你会用 vue 写小程序吗

一、登陆授权1.小程序的登录机制传统登陆（jwt 方式为例）用户输入用户名密码（密码需要通过某些算法进行加密），访问登录接口后端校验用户名密码，将用户的这些信息加密成一个 token 字符串，返回给前端前端将 token 保存下来（就本地化存储咯，这里涉及一个面试题：
localstorage,sessionstorage,cookie 区别是啥？自己问问自己咯）前端每次发请求都带着 token 发给后端，由后端去判断是否合法登录状态（token 怎么传，放在头还是体里自己和后端商量哈）然后前端根据返回情况去判断是否执行什么操作小程序登录授权 小程序没有登录框，就一个授权使用用户信息，那处理过程是怎么样的呢？简单讲步骤就是：
获取用户信息做授权----->调用 wx.login 接口------>拿到返回的唯一的身份认证 code----->连 code 带用户信息传给你的后端----->后面就跟上面一样的了需要注意的是code 只能用一次，且五分钟过期，过期就需要重新 wx.login()2.我们做登陆授权2-1、思考场景在小程序加载之前，判断是否登录过（就是有没有token咯），如果没有登陆过，就跳转登录界面（或者直接调用获取用户信息接口以及登录接口2-2 登陆前的判断在小程序加载之前，判断是否登录，并做对应跳转如何判断加载之前？------>生命周期钩子函数这时，我们打开项目中的 App.vue 会看到以下代码：
onLaunch: function() {
// 这时app初始化完成 // 注意全局只触发一次！！！ console.log('
App Launch'
) }
, onShow: function() {
// app从后台切入前台或者启动 // 显然这是判断是否登陆过的好机会 console.log('
App Show'
) }
, onHide: function() {
// app从前台进入后台 console.log('
App Hide'
) }
因此判断方式 onShow: function() {
// 查一下都获取了那些权限 wx.getSetting({
success(res) {
// 看看有没有用户信息，如果不存在，证明没有登陆 if (!res.authSetting["scope.userInfo"]) {
// 关闭所有页面，打开到应用内的登录页面 wx.reLaunch({
url: "/pages/authorise/index" }
);
}
}
}
);
}
,小程序的页面间跳转相关 apiwx.reLaunch();
// 关闭所有页面，打开到应用内的某个页面 wx.switchTab();
// 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 wx.navigateTo();
// 跳转到某个页面 wx.navigateBack();
// 返回到上个页面，需要跟navigateTo配合使用具体使用方式请参考 wx 文档，实在看不下去就看 uniapp 的文档，长得一个样反正uniapp 的 api 封装继承了小程序的 api，基本上小程序的 api 前面的 wx 俩字改成 uni 都能用2-3、登录操作话不多说，看代码 微信的有些权限的 api 被废弃了，现在只能通过 button 的 opentype 属性来做一些权限操作了 以下代码包括处理用户拒绝授权后的二次引导授权登录过程授权登录 重新授权 // 获取到用户信息后，调用登录接口，如果被拒绝授权，就跳转到设置页面 mpGetUserInfo(result) {
const that = this;
// 查看是否授权 wx.getSetting({
success(res) {
if (res.authSetting["scope.userInfo"]) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称 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 {
// 保存登陆成功获取的token wx.setStorageSync("token", res.data.userinfo.token);
// 保存返回的被处理过的用户信息 uni.setStorageSync("login", res.data.userinfo);
// 登陆成功 跳转到tab首页 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)yarn add axios // npm 也行啦// 在cli项目中 // main.js中 import axios from '
axios'
// 配置请求的根路径 // 这个baseURL如果配置了跨域代理，就把proxy里配的名字给它就成 axios.defaults.baseURL = '
/api'
// 配置请求拦截器 axios.interceptors.request.use(config => {
// 这里做各种预处理，加token啦，拦截权限访问啦随便 return config }
, (error) => {
return Promise.reject(error) }
) axios.interceptors.response.use(config => {
return config }
) // 挂载到vue上 Vue.prototype.$http = axios二、小程序的请求1、原生的做法：
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是啥请看小哥哥其他文章哦export default () => {
return new Promise((resolve,reject)=>{
}
) }
4、把微信的api封装进去（uniapp的api也行，如果有跨端需求，就直接封装uni的requestapi，差不多长得）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、继续封装，还没法直接用现在// 把会改的参数抽出来，像URL啦，methods啦，data数据啦，通过形参的方式传递，把请求的成功或者失败的结果弄出去 export default (params) => {
return new Promise((resolve,reject)=>{
wx.request({
...params header: {
'
content-type'
: '
application/json'
// 默认值 }
, success (res) {
resolve(res) // 这里resolve出去的是res还是res.data看你们请求返回的数据 }
fail: (err) => {
reject(err) }
, ) }
) }
6、axios有一个baseURL省劲儿，咱也得有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、处理请求头// 比如需要携带token请求的 // 比如需要设置一些字段类型 都在这里搞 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) }
}
);
}
) }
完整版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里import Request from '
./utils/request'
Vue.prototype.$http = Request然后就可以开开心心在vue单文件组件里this.$http(各种参数).then()的使用拉，流畅又爽我们还需要啥技能？用vue写小程序不要怀疑，山东人就是喜欢倒装句咋地好像没啥了直接// 把之前的npm run dev:mp-weixin的黑窗口ctr+c退出哈先 // 然后执行 npm run build:mp-weixin关闭当先开发者工具里的项目，重新引入dist文件夹下面的build文件夹中的mp-weixin文件夹，这是我们打包好的文件，引入之后，自己测试一遍，没问题后点击开发者工具的右上角上传按钮，进行上传代码，然后登录微信小程序后台把代码提交审核就行啦。
以上，感谢大家，最后，关注一波我的公众号呗，刚开始做，虽然，里面还没放啥东西，求支持嘛。
推荐教程：
《微信小程序》以上就是你会用 vue 写小程序吗的详细内容，更多请关注php中文网其它相关文章！
微信
分享相关标签：
vue，小程序本文转载于：
掘金，如有侵犯，请联系a@php.cn删除
上一篇：
微信小程序：
一个json帮你完成分享朋友圈图片
下一篇：
ECMAScript 2020 的新特性相关文章相关视频为什么要使用小程序如何设置小程序客服消息小程序跨页面交互的作用和方法小程序怎样在页面传递对象数组？你会用 vue 写小程序吗（欧阳克）微信小程序与CMS后台登录小程序中心小程序的rpx长度单位详解 [温州做微信公众号]