你会用vue写小程序吗？

一。登录授权

1.applet的登录机制

传统登录（以jwt模式为例）

用户输入用户名和密码（密码需要通过一些算法加密）来访问登录界面。

后端验证用户名和密码，将用户信息加密为令牌字符串，并将其返回给前端。

前端保存token（只需本地存储即可，这里有一个面试问题:本地存储、会话存储和cookie有什么区别？扪心自问）

前端每次发送请求都会发送到后端，后端判断登录状态是否合法（如何传递令牌，是放在头中还是放在体中）。

然后前端根据返回情况判断是否进行任何操作。

小程序登录授权小程序没有登录框，因此它被授权使用用户信息。加工过程是怎样的？简单来说，步骤是:获取用户信息进行授权-----》调用wx.login接口-----》获取唯一验证码----》并将用户信息发送到您的后端---3。

应该注意的是

代码只能使用一次，五分钟后过期。如果过期，则需要重新wx.login（）。

2.我们做登录授权

2-1，思考场景

落地前的2-2判断

在加载小程序之前，会判断是否登录，并进行相应的跳转。

装车前如何判断？------》生命周期挂钩功能

此时，当我们打开项目中的App.vue时，我们将看到以下代码:

OnLaunch:function（）{//此时app初始化完成//注意全局触发只有一次！！！console . log（& # 39；应用程序发布& # 39；）}，on show:function（）{//app从后台切入前台或启动//显然这是判断你是否登录过console . log（& # 39；应用程序展示& # 39；）}，on hide:function（）{//app进入后台console . log（& # 39；应用隐藏& # 39；）}因此，判断的方式

on show:function（）{//检查权限wx . get setting（{ success（RES）{//查看是否有用户信息。如果不存在，则证明您没有登录If（！RES . auth setting【“scope . userinfo“】）{//关闭所有页面并在应用程序中打开登录页面wx . relault（{ URL:“/pages/authorize/index“}）；} } });}，小程序跳转到页面之间的相关api。

wx . re launch（）；//关闭所有页面并在应用程序中打开一个页面wx . switch tab（）；//跳转到tabBar页面并关闭所有其他非tabBar页面wx . navigate to（）；//跳转到页面wx . navigate back（）；//返回上一页。具体使用方法请参考wx文档。如果你受不了，就看看uniapp文档。看起来一模一样。

uniapp的api包继承了小程序的api，基本上小程序api前面的wx字改成uni就可以用了。

2-3，登录操作

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

授权登录重新授权//获取用户信息后，调用登录接口。如果授权被拒绝，则跳转到设置页面MP get userinfo（result）{ const that = this；//检查wx . get setting（{ success（RES）{ if（RES . auth setting【“scope . userinfo“】）是否已授权{//）。可以直接调用getUserInfo获取头像昵称wx . get userinfo（{ success:function（RES）{ that . userinfo = RES . userinfo；wx . log in（{ success:function（log in RES）{ that . userinfo . code = log in RES . code；那个。$ http（{ URL:“登录接口地址“，数据:that.userInfo，方法:“POST“}）。然后（RES =》{//登录失败，出现错误消息。重新打开授权页面if（判断登录失败的条件）{ wx . redirecto（{ URL:““}）；//登录成功}否则{//保存令牌wx。登录成功获取setStorageSync（“token“，RES . data . userinfo . token）；//保存返回的处理后的用户信息uni . setstoragesync（“log in“，RES . data . userinfo）；//登录成功跳转到选项卡主页wx . switch tab（{ URL:““}）；} });} });} });} else { that.show = false} } });}，//处理重新授权的回调函数re authorize（e）{ If（e . detail . auth setting【“scope . userinfo“】）{//如果第二次授权成功，则切换对话框的显示按钮this.show = true}}这样，就完成了。至于这个什么。$http是，请阅读第三篇文章（我还没有写，所以我给你点个赞。

继续读。我只想说，已经三天了，我弟弟还没收到工资。太讨厌了。朋友们，让我们一起钓鱼吧。

上一本书说

这个。$http发送一个请求。这是什么？

首先，请求在PC端的vue项目中发送

愚蠢的步骤:（使用axios）

Yarn添加axios// npm正常//从& # 39；在cli项目// main.js中；axios & # 39//配置请求的根路径//如果为此baseURL配置了跨域代理，请使用代理中分配的名称使其成为axios . defaults . base URL = & # 39；/API & # 39；//配置请求拦截器axios。interceptors . request . use（config =》{//在这里做各种预处理，添加token，并拦截访问，只需返回config}。（错误）=》{返回承诺。拒绝（错误）}）axios。截击机。回应。use（config =》{ return config }）//Mount on vue。原型。$ http = axios II。小程序1的请求。本地实践:

wx . request（{ URL:& # 39；test.php & # 39，//只是一个例子，不是真正的接口地址数据:{ x:& # 39；'，y:& # 39；'}，标题:{ & # 39；content -type & # 39；: '应用程序/JSON & # 39；//Default value}，success（RES）{ console . log（RES . data）}）薛有点难受，因为他用惯了axios，支持promise，我们就让他支持promise吧。

2.封装一个支持promise的小请求函数。

1.创建一个新的request.js文件，并将其放在一个名为utils的文件夹中（我不会告诉你utils是什么意思）。

2.导出默认的函数对象。

3.该函数返回一个承诺，其中包含一个解决方案和一个拒绝方案。我不知道什么是承诺。请看我哥的其他文章。

export default（）=》{ return new promise（（resolve，reject）=》{ }）} 4。封装微信的api（uni app的API也可以，如果有跨端需求，直接封装uni的requestapi，差不多很长）。

export default（）=》{ return new Promise（（resolve，reject）=》{ wx . request（{ URL:& # 39；test.php & # 39，//只是一个例子，不是真正的接口地址数据:{ x:& # 39；'，y:& # 39；'}，标题:{ & # 39；content -type & # 39；: '应用程序/JSON & # 39；//默认值}，success（RES）{ console . log（RES . data）} } } 5。继续打包，但是现在不能直接用了。

//取出URL、方法、数据data等可以更改的参数，通过形参传递，从而得出请求成功或失败的结果。export default（params）=》{ Return new promise（（resolve，reject）=》{ wx . request （{...params header:{ & # 39；content -type & # 39；: '应用程序/JSON & # 39；//默认值}，Success（res）{ resolve（RES）//此处解析出的数据是RES还是res.data取决于您请求返回的数据} fail:（err）=》{ Reject（err）}）} 6。axios有一个baseURL，所以我们必须拥有它。

export default（params）=》{ const base URL =“写入您自己地址的公共部分“Return New Promise（（resolve，reject）=》{ wx . request （{...params，url: baseUrl + params.url，success:（RES）=》{ resolve（RES . data）}，fail:（err）=》{ reject（err）} }）；})}7.处理请求标头

//比如需要携带令牌请求//比如需要设置一些字段类型，可以输入Export Default（params）=》{ constbaseurl =“https://www . jianbingkonggu . com/“Lethead = { } If（判断是否需要添加令牌请求的条件）{ head【“token“】= uni . getstoragesync（& # 39；token & # 39);} head【& # 39；content -Type & # 39；] = 'application/x-www -form -urlencoded & # 39；返回新承诺（（resolve，reject）=》{ wx . request （{...params，url: baseUrl + params.url，header: head，success:（RES）=》{ resolve（RES . data）}，fail:（err）=》{ reject（err）} }）；}）}完整版

export default（params）=》{ const base URL =“https://www . jianbingkonggu . com/“let head = { } if（！params . URL . includes（“/MiniProgramLogin“）{ head【“token“】= uni . getstoragesync（& # 39；token & # 39);} head【& # 39；content -Type & # 39；] = 'application/x-www -form -urlencoded & # 39；return new promise（（resolve，reject）=》{//让用户看起来更舒服//获取动画uni . show loading（{ title:& # 39；正在加载& # 39；}）wx . request （{...params，url: baseUrl + params.url，header: head，success:（RES）=》{ resolve（RES . data）}，fail:（err）=》{ reject（err）}，Complete:（）=》{//请求完成//隐藏提示框uni。正在加载中隐藏（）} }）；})}2.如何在项目中使用？

总之，就像axios一样。

引入/介绍

增加

使用

在main.js中

从& # 39；。/utils/request & # 39；Vue.prototype.$http = Request然后你就可以开心了。这个的用途。$http（各种参数）。Vue的单个文件组件中的then（）平滑而凉爽。

我们还需要哪些技能？用vue写个小程序

别怀疑，山东人就是喜欢倒装句。好像没有什么直接的。

//从Haxian退出之前的npm run dev:mp-weixin的黑色窗口CTR+c//然后执行npm run build:mp-weixin以关闭开发人员工具中的项目，并在dist文件夹下的build文件夹中重新引入mp-weixin文件夹。这是我们的打包文件。导入后自行测试。如果没有问题，单击开发人员工具右上角的上传按钮上传代码。以上，谢谢。最后关注一波我的微信官方账号。我刚开始做。虽然，我还没有放任何东西进去。请支持我。

推荐教程:微信小程序

以上是能否用vue写小程序的细节。更多资讯请关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 可以用vue写小程序吗？

本文由主机参考刊发，转载请注明：你会用vue写小程序吗？ https://zhujicankao.com/102883.html