VPS参考测评推荐
专注分享VPS主机优惠信息
hostkvm优惠促销活动
zji优惠促销活动
衡天云优惠活动
亚马逊云aws.amazon.com最新优惠活动

可以用vue写小程序吗?

locvps
主机参考:VPS参考测评推荐,专注分享VPS主机优惠信息!若您是商家也可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
部分文章发布时间较久远,可能存在未知因素,购买时建议在本站搜索商家名称,可查看相关文章充分了解商家!若非中文页面可使用谷歌浏览器同步翻译!PayPal代付/收录合作

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写小程序吗? https://zhujicankao.com/77615.html

【腾讯云】爆款2核2G云服务器首年40元,企业首购最高获赠300元京东卡
打赏
转载请注明原文链接:主机参考 » 可以用vue写小程序吗?
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!