从零开始开发微信小程序（三）：微信小程序绑定系统帐号并受权登陆之微信端

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