您的位置 首页 技术

你会用 vue 写小程序吗

一、登陆授权 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.$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

二、小程序的请求1、原生的做法:

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

3、函数返回一个promise,里面一个resolve一个reject,不知道promise是啥请看小哥哥其他文章哦

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

4、把微信的api封装进去(uniapp的api也行,如果有跨端需求,就直接封装uni的requestapi,差不多长得)

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

关闭当先开发者工具里的项目,重新引入dist文件夹下面的build文件夹中的mp-weixin文件夹,这是我们打包好的文件,引入之后,自己测试一遍,没问题后点击开发者工具的右上角上传按钮,进行上传代码,然后登录微信小程序后台把代码提交审核就行啦。以上,感谢大家,最后,关注一波我的公众号呗,刚开始做,虽然,里面还没放啥东西,求支持嘛。

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

以上就是你会用 vue 写小程序吗的详细内容,更多请关注24课堂在线网其它相关文章!

本文来自网络,不代表24小时课堂在线立场,转载请注明出处:http://www.24ketang.cn/76072.html

为您推荐

发表评论

电子邮件地址不会被公开。 必填项已用*标注

返回顶部