你会不会用Vue技术栈开发复杂度较高的微信小程序？

本文共计1713个文字，预计阅读时间需要7分钟。

一、登录授权+1.小程序的登录机制+传统登录（JWT方式）+用户输入用户名密码（密码需通过某些算法加密），访问登录接口+后端验证用户名密码+将用户信息加密后返回给前端

一、登陆授权

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.$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 = "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 写小程序吗的详细内容，更多请关注自由互联其它相关文章！