可以用vue写小程序吗？

I .登录授权

1.applet的登录机制

传统登录(以jwt模式为例)

输入用户名和密码(密码需要用一些算法加密)，进入登录界面。

后端验证用户名和密码，将用户的信息加密成一个令牌字符串，然后返回给前端。

保存前端令牌(本地存储即可)，这涉及到一个面试问题:本地存储，会话存储，cookies有什么区别？扪心自问)

前端每发送一次请求，就把token发送给后端，后端判断登录状态是否合法(token怎么传，放在头还是放在体，跟后端讨论)

然后前端根据返回的信息判断是否进行任何操作。

applet登录授权applet没有登录框，只有一个使用用户信息的授权。加工过程是什么样的？简单的步骤是:获取用户信息进行授权---->；调用wx.login接口------>:获取唯一的身份认证码----->:带有用户信息的代码到你的后端----->:跟后面那个一样。

应该注意的是

代码只能用一次，五分钟后过期。当它到期时，您需要重新登录wx.login()

2.我们做登录授权。

2-1，思考场景

2-2落地前的判断

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

装之前怎么判断？------>生命周期挂钩功能

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

OnLaunch: function() {//此时app初始化完成。//注意全局触发只有一次！！！console . log( # 39；应用程序发布 # 39；)}，onShow: function() {// app从后台切入前台还是启动//显然这是判断你是否登录了console . log( # 39；App Show # 39)}，onHide: function() {// app从前台进入后台console . log( # 39；应用程序隐藏 # 39；)}所以判断的方式

on:function(){//检查一下有没有获得那些权限wx.getSetting({ success(res) {//看看有没有用户信息。如果没有，证明你没有登录如果(！RES . auth setting[ ；scope.userInfo ]){//关闭所有页面，打开登录页面wx . relault({ URL:"/pages/authorise/index ；});} } });}、小程序页面跳转相关的api

wx . re launch()；//关闭所有页面并打开应用程序中的一个页面wx . switch tab()；//跳转到tabBar页面，关闭所有其他非tabBar页面wx . navigate to()；//跳转到一个页面wx . navigateback()；//返回上一页。具体使用方式请参考wx文档。如果实在受不了，就看uniapp文档。反正看起来都一样。

Uni的api包继承了applet的api。基本上小程序的api前面的wx这个词改成uni就可以了。

2-3，登录操作

话不多说，微信代码部分权限的api已经被抛弃。现在有些权限只能通过button的opentype属性来操作。下面的代码包含了用户拒绝授权后二次引导授权的登录过程。

lt按钮打开-type = ；getUserInfo @ getuserinfo = mpGetUserInfo size = 迷你 v-if = ；显示 gt批准

听着，我们先说点什么。已经三天了，小弟弟还没领工资。太讨厌了。朋友们，我们一起去钓鱼吧。

上次，我说

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

I .在PC端的vue项目中发送请求

愚蠢的步骤:(使用axios)

纱线添加axios// npm很好//从 # 39；在cli项目// main.js中；axios # 39//配置请求的根路径//如果baseURL配置了跨域代理，则赋予它在代理中分配的名称，成为axios . defaults . baseURL = # 39；/API # 39；//配置请求拦截器axios . interceptors . request . use(config = >；{//这里做各种预处理，添加令牌，拦截权限访问，只需返回config}，(error)= gt；{ return promise . reject(error)})axios . interceptors . response . use(config = gt；{return config})//挂载到vue Vue.prototype上，$http = axios II。小程序1的请求。本地实践:

wx . request({ URL: # 39；test.php # 39，//只是一个例子，不是真实的接口地址数据:{ x: # 39；'，y: # 39；'}，表头:{ # 39；内容-类型 # 39；: '应用/JSON # 39；//default value}，success(RES){ console . log(RES . data)} })薛有点难受，因为他用惯了axios，支持无极，那我们就让他支持无极吧。

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

1.创建一个新的request.js文件，放在一个名为utils的文件夹中(我不会告诉你utils是什么意思)

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

3.该函数返回一个带有resolve和reject的承诺。我不知道什么是承诺。请看小哥哥的其他文章。

export default () = >{返回新承诺((解决，拒绝)= gt{}}} 4.封装微信的api(uniapp的API没问题，如果有跨端需求，直接封装uni的requestapi，差不多一样长)

export default () = >{返回新承诺((解决，拒绝)= gt{ wx . request({ URL: # 39；test.php # 39，//只是一个例子，不是真实的接口地址数据:{ x: # 39；'，y: # 39；'}，表头:{ # 39；内容-类型 # 39；: '应用/JSON # 39；//默认值}，success(RES){ console . log(RES . data)} } } 5。继续打包，但是现在不能直接用了。

//取出URL、方法、数据等可以改变的参数，通过形参传递，从而得到请求out export default (params) = >成功或失败的结果；{返回新承诺((解决，拒绝)= gt{ wx.request({...params头:{ # 39；内容-类型 # 39；: '应用/JSON # 39；//默认值}，success (res) {resolve(res) //这里解析出去的是res还是res.data取决于你请求返回的数据} fail:(err)= >；{reject (err)}，}} 6。axios有baseURL，所以我们必须拥有它。

导出默认值(参数)= gt{ const baseUrl = 把自己地址的公共部分写成“return new Promise((resolve，reject)= gt；{ wx.request({...params，url: baseUrl + params.url，success:(RES)= gt；{ resolve(res.data) }，fail:(err)= gt；{ reject(err)})；}}} 7.处理请求标头

//比如需要携带令牌请求//比如需要设置一些字段类型，使export default(params)= >；{ const baseUrl = https://www.jianbingkonggu.com/&;让head = { if }(判断需要添加令牌请求的条件){ head[ ；令牌 ]= uni . getstoragesync( # 39；token # 39);}头[ # 39；内容-类型 # 39；] = 'application/x-www-form -urlencoded # 39；返回新承诺((解决，拒绝)= gt{ wx.request({...params，url: baseUrl + params.url，header: head，success:(RES)= gt；{ resolve(res.data) }，fail:(err)= gt；{ reject(err)})；})}完整版

导出默认值(参数)= gt{ const baseUrl = https://www.jianbingkonggu.com/&;让head = {如果(！params . URL . includes( ；/MiniProgramLogin ；)){ head[ ；令牌 ]= uni . getstoragesync( # 39；token # 39);}头[ # 39；内容-类型 # 39；] = 'application/x-www-form -urlencoded # 39；返回新承诺((解决，拒绝)= gt{//为了让用户看起来更舒服//弄个加载动画uni . show loading({ title: # 39；加载 # 39；}) wx.request({...params，url: baseUrl + params.url，header: head，success:(RES)= gt；{ resolve(res.data) }，fail:(err)= gt；{ reject(err) }，complete:()= gt；{//请求完成//在加载中隐藏提示框uni . Hide loading()} })；}}} 2.如何在项目中使用？

总之，就像axios一样

从别处引进

增加

使用

在main.js中

导入请求来自 # 39；。/utils/request # 39；Vue.prototype.$http = Request。然后，你可以愉快地使用这个。$http(各种参数)。然后是Vue单文件组件中的()，流畅酷炫。

我们还需要什么技能？用vue写个小程序

不要怀疑，山东人就是喜欢倒装句。为什么看起来没有什么直接的？

//退出npm run dev:mp-weixin来自哈尔滨的上一个黑窗ctr+c。//然后执行npm run build:mp-weixin关闭第一个开发者工具中的项目，重新导入到dist文件夹下build文件夹的mp-weixin文件夹中。这是我们的打包文件。导入后自己测试。点击开发者工具右上角的上传按钮，上传代码。以上，谢谢大家。最后关注一波我的微信官方账号。刚开始做，虽然还没放什么进去，求支持。

推荐教程:《微信小程序》以上是你如何在vue中编写小程序的细节。更多请关注主机参考其他相关文章！

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

• 你会用vue写小程序吗？

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