一、登陆授权
1.小程序的登录机制
需要注意的是
2.我们做登陆授权
2-1、思考场景
在小程序加载之前，判断是否登录过（就是有没有token咯），如果没有登陆过，就跳转登录界面（或者直接调用获取用户信息接口以及登录接口
2-2 登陆前的判断
在小程序加载之前，判断是否登录，并做对应跳转
如何判断加载之前？------>生命周期钩子函数
这时，我们打开项目中的 App.vue 会看到以下代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
|
因此判断方式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | onShow: function() {
wx.getSetting({
success(res) {
if (!res.authSetting["scope.userInfo"]) {
wx.reLaunch({
url: "/pages/authorise/index"
});
}
}
});
},
|
小程序的页面间跳转相关 api
1 2 3 4 | wx.reLaunch();
wx.switchTab();
wx.navigateTo();
wx.navigateBack();
|
具体使用方式请参考 wx 文档，实在看不下去就看 uniapp 的文档，长得一个样反正
uniapp 的 api 封装继承了小程序的 api，基本上小程序的 api 前面的 wx 俩字改成 uni 都能用
2-3、登录操作
话不多说，看代码 微信的有些权限的 api 被废弃了，现在只能通过 button 的 opentype 属性来做一些权限操作了 以下代码包括处理用户拒绝授权后的二次引导授权登录过程
1 2 | <button open-type="getUserInfo" @getuserinfo="mpGetUserInfo" size="mini" v-if="show">授权登录</button>
<button type="primary" size="mini" open-type="openSetting" @opensetting="reauthorize" v-else>重新授权</button>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | mpGetUserInfo(result) {
const that = this;
wx.getSetting({
success(res) {
if (res.authSetting["scope.userInfo"]) {
wx.getUserInfo({
success: function(res) {
that.userInfo = res.userInfo;
wx.login({
success: function(loginRes) {
that.userInfo.code = loginRes.code;
that.$http({
url: "登录接口地址",
data: that.userInfo,
method: "POST"
})
.then(res => {
if (判断登录失败的条件) {
wx.redirectTo({
url: ""
});
} else {
wx.setStorageSync("token", res.data.userinfo.token);
uni.setStorageSync("login", res.data.userinfo);
wx.switchTab({
url: ""
});
}
});
}
});
}
});
} else {
that.show = false;
}
}
});
},
reauthorize(e) {
if (e.detail.authSetting["scope.userInfo"]) {
this.show = true;
}
}
|
这样，就搞定咯，至于那个this.$http是啥请看第三篇（我还没写，咋地） 看完，点个赞呗。
继续看 先吐槽一句，三天了，小哥哥还没收到工资，好烦烦哦，咱一起摸鱼吧，朋友们
上回书说到
this.$http发送请求，这是个啥？
一、PC端vue项目中发请求
傻瓜式步骤：(使用axios)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | import axios from 'axios'
axios.defaults.baseURL = '/api'
axios.interceptors.request.use(config => {
return config
}, (error) => { return Promise.reject(error) })
axios.interceptors.response.use(config => {
return config
})
Vue.prototype.$http = axios
|
二、小程序的请求
1、原生的做法：
1 2 3 4 5 6 7 8 9 10 11 12 13 | wx.request({
url: 'test.php',
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json'
},
success (res) {
console.log(res.data)
}
})
|
xue微有点难受，因为用惯了axios，支持promise，那我们就让他支持promise呗
2、封装一个支持promise的小请求函数
1、新建一个request.js文件，放到一个叫utils的文件夹下（我就不跟你说utils啥意思）
2、导出一个默认函数对象
3、函数返回一个promise,里面一个resolve一个reject，不知道promise是啥请看小哥哥其他文章哦
1 2 3 4 5 | export default () => {
return new Promise((resolve,reject)=>{
})
}
|
4、把微信的api封装进去（uniapp的api也行，如果有跨端需求，就直接封装uni的requestapi，差不多长得）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | export default () => {
return new Promise((resolve,reject)=>{
wx.request({
url: 'test.php',
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json'
},
success (res) {
console.log(res.data)
}
})
})
}
|
5、继续封装，还没法直接用现在
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | export default (params) => {
return new Promise((resolve,reject)=>{
wx.request({
...params
header: {
'content-type': 'application/json'
},
success (res) {
resolve(res)
}
fail: (err) => {
reject(err)
},
)
})
}
|
6、axios有一个baseURL省劲儿，咱也得有
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | export default (params) => {
const baseUrl = "写你自己的地址的公共部分"
return new Promise((resolve, reject) => {
wx.request({
...params,
url: baseUrl + params.url,
success: (res) => {
resolve(res.data)
},
fail: (err) => {
reject(err)
}
});
})
}
|
7、处理请求头
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | export default (params) => {
const baseUrl = "https://www.jianbingkonggu.com/"
let head = {}
if (判断需要加token请求的条件) {
head["token"] = uni.getStorageSync('token');
}
head['Content-Type'] = 'application/x-www-form-urlencoded'
return new Promise((resolve, reject) => {
wx.request({
...params,
url: baseUrl + params.url,
header: head,
success: (res) => {
resolve(res.data)
},
fail: (err) => {
reject(err)
}
});
})
}
|
完整版
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | export default (params) => {
const baseUrl = "https://www.jianbingkonggu.com/"
let head = {}
if (!params.url.includes("/MiniProgramLogin")) {
head["token"] = uni.getStorageSync('token');
}
head['Content-Type'] = 'application/x-www-form-urlencoded'
return new Promise((resolve, reject) => {
uni.showLoading({
title: '加载中'
})
wx.request({
...params,
url: baseUrl + params.url,
header: head,
success: (res) => {
resolve(res.data)
},
fail: (err) => {
reject(err)
},
complete: () => {
uni.hideLoading()
}
});
})
}
|
2、咋在项目中用？
一句话，跟axios一样
在main.js里
1 2 | import Request from './utils/request'
Vue.prototype.$http = Request
|
然后就可以开开心心在vue单文件组件里this.$http(各种参数).then()的使用拉，流畅又爽
我们还需要啥技能？用vue写小程序
不要怀疑，山东人就是喜欢倒装句咋地
好像没啥了
直接
关闭当先开发者工具里的项目，重新引入dist文件夹下面的build文件夹中的mp-weixin文件夹，这是我们打包好的文件，引入之后，自己测试一遍，没问题后点击开发者工具的右上角上传按钮，进行上传代码，然后登录微信小程序后台把代码提交审核就行啦。
以上，感谢大家，最后，关注一波我的公众号呗，刚开始做，虽然，里面还没放啥东西，求支持嘛。
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
暂时没有评论，来抢沙发吧~