1. 程式人生 > >微信mpvue框架的使用

微信mpvue框架的使用

mpvue的使用

  1. 授權的彈框
<button open-type="getUserInfo" @getuserinfo="getUserInfo" @tap="getUserInfo1">微信授權登入</button>
 // 點選事件
    getUserInfo1(){
      // 判斷小程式的API,回撥,引數,元件等是否在當前版本可用。  為false 提醒使用者升級微信版本
      if(wx.canIUse('button.open-type.getUserInfo')){
        // 使用者版本可用
      }else{
        wx.showToast({
          title: '請更新微信版本',
          duration: 2000
        })
      }
    },
    getUserInfo (e) {
      if (e.mp.detail.rawData){
        //使用者按了允許授權按鈕
        wx.redirectTo({url:"/pages/teleBinding/main?"})
      } else {
        //使用者按了拒絕按鈕
        console.log('使用者按了拒絕按鈕')
      }
    }
  1. 使用者是否授權過
 mounted() {
    // 一進來看看使用者是否授權過
    this.getSetting();
  },
 methods: {
    // 是否授權過
    getSetting () {
      let that = this;
      wx.getSetting({
        success: function(res){
          if (res.authSetting['scope.userInfo']) {
            //使用者已經授權過
          }else{
            wx.redirectTo({url:"/pages/login/main"});
            // console.log('使用者還未授權過');
          }
        }
      })
    }, 
 },

3.獲取使用者的基本資訊

wx.getUserInfo({
   success: function(res) {
     // 獲取微信資訊
   }
 })

4.獲取code值

  wx.login({
   success: res => {
      // 傳送 res.code 到後臺換取 openId, sessionKey, unionId
      if(res.code){

      }else{
        wx.showToast({
          title: '登入失敗!' + res.mp.detail.errMsg,
          icon: 'none',
        })
      }
    }
  })

5 前後臺切換資料重置可以寫在onShow裡面

  onShow() {
    this.teleCode = '';
    this.isClick = true;
    this.btnDisabled = true;
    let interval = this.interval;
    clearInterval(interval);
    this.time = '獲取驗證碼';
  },

6 一進來就執行的函式寫在mounted裡面

 mounted() {
    // 一進來看看就執行
    this.getSetting();
  },

7 獲取路由跳轉頁面獲取傳過來的值

當前頁面準備跳轉:this.$router.push({name:'page',params:{msg:page}})   
新頁面獲取引數:
created(){    
      console.log(this.$route.query)
     console.log(this.$route.params.msg) 
  }
(1)必須是在onLoad鉤子函式往後的生命週期中獲取
onShow(options){
console.log(options);
}
(2)在所有 頁面 的元件內可以通過 this.$root.$mp.query 進行獲取小程式在 page
onLoad 時候傳遞的 options。要注意:寫在mounted函式裡,寫到created報錯。
(3)在所有的元件內可以通過 this.$root.$mp.appOptions 進行獲取小程式在 app
onLaunch/onShow 時候傳遞的 options。