微信mpvue框架的使用

mpvue的使用

授权的弹框

<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('用户按了拒绝按钮')
      }
    }

用户是否授权过

 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。

微信mpvue框架的使用

猜你喜欢