你会用 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"           });         }       }     });   },

小程序的页面间跳转相关 api

wx.reLaunch(); // 关闭所有页面，打开到应用内的某个页面 wx.switchTab(); // 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 wx.navigateTo(); // 跳转到某个页面 wx.navigateBack(); // 返回到上个页面，需要跟navigateTo配合使用

具体使用方式请参考 wx 文档，实在看不下去就看 uniapp 的文档，长得一个样反正

uniapp 的 api 封装继承了小程序的 api，基本上小程序的 api 前面的 wx 俩字改成 uni 都能用

2-3、登录操作

话不多说，看代码 微信的有些权限的 api 被废弃了，现在只能通过 button 的 opentype 属性来做一些权限操作了 以下代码包括处理用户拒绝授权后的二次引导授权登录过程

<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>

 // 获取到用户信息后，调用登录接口，如果被拒绝授权，就跳转到设置页面     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

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、导出一个默认函数对象

export default () => {     return new Promise((resolve,reject)=>{              }) }

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

推荐教程：《微信小程序》

以上就是你会用 vue 写小程序吗的详细内容，更多内容请关注技术你好其它相关文章！