Develop WeChat Mini Programs from Scratch (3): WeChat Mini Program Binding System Account and Authorized Login WeChat

1. Before developing account binding and authorized login functions, you must already have a small program project, refer to the article:

https://my.oschina.net/u/3337958/blog/1618214

2. Create a test page for testing

    Create a new test directory under the pages directory, and create a new test page test page in the test directory

    

    

   Add bottom bar tab: Add the following code under app.json in the root directory:

,
  "tabBar": {
    "color": "#6e6d6b",
    "selectedColor": "#e64340",
    "borderStyle": "white",
    "backgroundColor": "#fff",
    "box-shadow": "0 0 6px 0",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "images/nav/home-off.png",
        "selectedIconPath": "images/nav/home-on.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/test/test",
        "iconPath": "images/nav/my-off.png",
        "selectedIconPath": "images/nav/my-on.png",
        "text": "test"
      }
    ]
  }

In this way, there is a switching tab between the home page and the test page. Four pictures are required here, the selection of the home page, the unselected image, and the selected and unselected image of the test page. After adding the code, the project is as follows:

    Add the following code to test.js, where APP_ID and APP_SECRET should be changed to your own

// pages/test/test.js
const APP_ID = 'wxxxxxxx';//输入小程序appid  
const APP_SECRET = 'xxxxxxxxxxxxxxxxxxxx';//输入小程序app_secret  
var OPEN_ID = ''//储存获取到openid  
var SESSION_KEY = ''//储存获取到session_key
var CODE=''  
Page({
  getOpenIdTap: function () {
    var that = this;
    wx.login({
      success: function (res) {
        wx.request({
          //获取openid接口  
          url: 'https://api.weixin.qq.com/sns/jscode2session',
          data: {
            appid: APP_ID,
            secret: APP_SECRET,
            js_code: res.code,
            grant_type: 'authorization_code'
          },
          method: 'GET',
          success: function (res) {
            console.log(res.data)
            OPEN_ID = res.data.openid;//获取到的openid  
            SESSION_KEY = res.data.session_key;//获取到session_key  
            console.log(OPEN_ID.length)
            console.log(SESSION_KEY.length)
            that.setData({
              openid: res.data.openid.substr(0, 10) + '********' + res.data.openid.substr(res.data.openid.length - 8, res.data.openid.length),
              session_key: res.data.session_key.substr(0, 8) + '********' + res.data.session_key.substr(res.data.session_key.length - 6, res.data.session_key.length)
            })
          }
        })
      }
    })
  },
  getCodeTap:function(){
    var that = this;
    wx.login({
      success: function (res) {
        CODE = res.code;//code  
        console.log(CODE)
        that.setData({
          code: CODE
        })
      }
    })
  }
})  

Add the following code to test.wxml

<image class="logo" src="{{userInfo.avatarUrl}}"></image>
<button bindtap="getOpenIdTap">获取用户唯一标识openid</button>  
openid:{{openid}}session_key:{{session_key}}


<button bindtap="getCodeTap">获取CODE</button>  
code:{{code}}

After saving the code, as shown in the figure below, click "Get code" to get the code authorized by the applet. After getting the code, add your own system username and password to send a request to your system background for binding operation.

Added login binding page, see the following link for the code

 

 

Source code download: https://gitee.com/xszhangmin/wechat-app-test/tree/master