微信mpvue框架的使用
阿新 • • 發佈:2018-12-18
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。