小程序綁定公眾號進行消息推送,公眾號授權功能

小程序綁定公眾號,通過公眾號進行消息推送,首先要在小程序上進行公眾號的授權
授權不可以直接在小程序上打開,所以必須要小程序先跳到其他網頁,再跳回小程序

1.我們是做了一個先做賬號綁定小程序,再做公眾號綁定小程序,沒有綁定的話,就跳到外部鏈接

 wxBind () {
    // 綁定賬號之后,再綁定小程序
    let that = this.data;
    const data = {
      account: that.userInfo.account,
      openid: wx.getStorageSync('openid')
    };
    WXAPI.wxBind(data).then((response) => {
      if (response.code === '0000') {
        this.setData({showUnbind: true});
        Toast(response.msg);
        setTimeout(() => {
          this.getUrl()
        }, 300)
      } else {
        this.getUrl()
        Toast(response.msg)
      }
    })
  },
  //小程序和公眾號綁定
  getUrl() {
    let data = {}
    WXAPI.isBind(data).then((res) => {
      if (res.code === '0000' && !res.data) {
        let userInfo = wx.getStorageSync('userInfo');
        if (userInfo) {
          wx.navigateTo({
            url: "/pages/saas/saas?wxbind=wxbind"
          });
        } else {
          Toast('尚未登錄，請前往登錄')
          setTimeout(() => {
            wx.navigateTo({
              url: "/pages/login/login"
            })
          }, 300)
        }
      }
    })
  },

2.外部鏈接,將token帶上
saas 頁面的代碼

<view>
  <web-view src="{{saasUrl}}"></web-view>
</view>

Page({
  data: {
    saasUrl: ''
  },
  onReady: function () {
    wx.setNavigationBarTitle({
      title: 'saas'
    })
  },
  onLoad (options) {
    let type = options.wxbind
    var url
    if (type && type == 'wxbind') {
      url = 'xxxxx/#/miniProgram?' 
    } else {
      url = 'xxxxx?'
    }
    let userInfo = wx.getStorageSync('userInfo')
    let param = []
    for (let key in userInfo) {
      if (key !== 'tenancyCodeList') {
        param.push(key + '=' + userInfo[key])
      }
    }
    url = url + param.join('&')
    if (type && type == 'wxbind') {
      url =  url + '&wxbind=wxbind'  
    }   
    this.setData({saasUrl: url})
  }
})

xxxxx這個就是網頁的網址,你可以跳去一個h5頁面,根據路由跳到需要做公眾號授權的頁面

3.我的H5授權頁面的代碼

<template>
    <div>
        <!-- 公眾號授權測試 -->
    </div>
</template>
<script>
import apiProgram from '@/api/miniProgram'
import store from '../../store'
export default {
    data() {
        return {
            url: '',
            wechatCode: '',
            token: ''
        }
    },
    methods: {
        getCode() {
            let tenancyCode = this.getQueryParam('tenancyCode')
            let data = {
                tenancyCode: tenancyCode,
                redirectUri: `xxxxxx/#/miniProgram?token=${this.token}`,
                state: 2,
                scope: 'snsapi_userinfo'
            }
            apiProgram.pageUrl(data, (res) => {
                if (res.code === '0000') {
                    let url = res.data.url
                    this.url = url
                    window.location.href = this.url
                } else {
                    this.$message.warning({ message: res.msg })
                }
            })
        },
         //切割字符串
        getQueryParam(key) {
            const pairs = location.href.split('?')[1].split('&')
            for (let i = 0; i < pairs.length; i++) {
                if (pairs[i].indexOf(key + '=') === 0) {
                    return pairs[i].substr(key.length + 1)
                }
            }
        },
        // 獲取token
        getToken(key) {
            const pairs = location.href.split('?')[2].split('&')
            for (let i = 0; i < pairs.length; i++) {
                if (pairs[i].indexOf(key + '=') === 0) {
                    return pairs[i].substr(key.length + 1)
                }
            }
        },
        //小程序綁定公眾號
        bind(code) {  
            var token = this.getToken('token')
            this.$store.dispatch("SetAccount", {
                token
            })
            let data = {
                code: code
            }
            apiProgram.weChatBind(data, (res) => {
                if (res.code === '0000') {
                    this.$message.success({ message: res.msg })
                    setTimeout(() => {
                        wx.miniProgram.switchTab({
                            url: "/pages/index/index"
                        });
                    }, 300)
                } else {
                    this.$message.warning({ message: res.msg })
                }
            })
        }
    },
    mounted() {
        if (location.href.indexOf('code=') !== -1 && location.href.indexOf('state=') !== -1) {
            this.wechatCode = this.getQueryParam('code')
            if (parseInt(this.getQueryParam('state')) === 2) { // 狀態2為綁定
            // 如果這里有code的話
                this.bind(this.wechatCode)
            }
        } else {
            this.token = this.getQueryParam('token') || ''
            // 更新一下token
            this.getCode()
        }
    }
}
</script>

一定要注意去更新token,也可以存在內存去,返回之后再從內存里面拿,這里的redictUrl必須去公眾號后台去配置～只用配置xxxx就行,綁定必須拿到授權后的code

最后:

e mmmm 不懂的話 加我微信467015242 備注:博客園-公眾號推送