從零開始開發微信小程序（三）：微信小程序綁定系統帳號並受權登陸之微信端

1. 開發帳號綁定及受權登陸功能前，必須已經有了小程序項目，參考文章：

http://www.javashuo.com/article/p-uprdemaj-bs.html

2. 創建test頁面進行測試

    在pages根據目錄下新建一個test目錄，在test目錄下新建一個測試頁面test的page

    

    

   增長底欄頁籤：在根目錄的app.json下增長以下代碼：

,
  "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"
      }
    ]
  }

這樣就有了首頁和測試頁的切換頁簽了，這裏須要四個圖片，首頁的選擇、未選中圖和測試頁的選中、未選中圖。加入代碼後，項目以下圖：

    在test.js中加入如下代碼，其中APP_ID和APP_SECRET要改爲你本身的

// 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
        })
      }
    })
  }
})

在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}}

保存代碼後，以下圖所示，點擊「獲取code」，能夠拿到小程序受權的code，拿到code後加上本身系統用戶名密碼就能夠向你的系統後臺發送請求進行綁定操做了。

增長了登陸綁定頁面，代碼見如下連接

 

 

源碼下載：https://gitee.com/xszhangmin/wechat-app-test/tree/master