掌握 Vue 技术能否用于编写小程序的探讨-FinClip官网

掌握 Vue 技术能否用于编写小程序的探讨

why 214 2024-07-15

一、登陆授权

掌握 Vue 技术能否用于编写小程序的探讨

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(&#39;App Launch&#39;)
},
onShow: function() {
    // app从后台切入前台或者启动
    // 显然这是判断是否登陆过的好机会
    console.log(&#39;App Show&#39;)
},
onHide: function() {
    // app从前台进入后台
    console.log(&#39;App Hide&#39;)
}

因此判断方式

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 属性来做一些权限操作了以下代码包括处理用户拒绝授权后的二次引导授权登录过程

1 2	`<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)

1 2	`yarn add axios` `// npm 也行啦`

// 在cli项目中 
// main.js中
import axios from &#39;axios&#39;
// 配置请求的根路径
// 这个baseURL如果配置了跨域代理，就把proxy里配的名字给它就成
axios.defaults.baseURL = &#39;/api&#39;
// 配置请求-
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: &#39;test.php&#39;, //仅为示例，并非真实的接口地址
  data: {
    x: &#39;&#39;,
    y: &#39;&#39;
  },
  header: {
    &#39;content-type&#39;: &#39;application/json&#39; // 默认值
  },
  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: &#39;test.php&#39;, //仅为示例，并非真实的接口地址
        data: {
            x: &#39;&#39;,
            y: &#39;&#39;
        },
    header: {
        &#39;content-type&#39;: &#39;application/json&#39; // 默认值
    },
    success (res) {
        console.log(res.data)
        }
    })
    })
}

5、继续封装，还没法直接用现在

// 把会改的参数抽出来，像URL啦，methods啦，data数据啦，通过形参的方式传递，把请求的成功或者失败的结果弄出去
export default (params) => {
    return new Promise((resolve,reject)=>{
        wx.request({
            ...params
            header: {
                &#39;content-type&#39;: &#39;application/json&#39; // 默认值
            },
            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(&#39;token&#39;);
    }
    head[&#39;Content-Type&#39;] = &#39;application/x-www-form-urlencoded&#39;
    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(&#39;token&#39;);
    }
    head[&#39;Content-Type&#39;] = &#39;application/x-www-form-urlencoded&#39;
    return new Promise((resolve, reject) => {
        // 为了让用户看起来更舒服
        // 弄一个加载中动画
        uni.showLoading({
            title: &#39;加载中&#39;
        })
        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里

1 2	`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文件夹，这是我们打包好的文件，引入之后，自己测试一遍，没问题后点击开发者工具的右上角上传按钮，进行上传代码，然后登录微信小程序后台把代码提交审核就行啦。
以上，感谢大家，最后，关注一波我的公众号呗，刚开始做，虽然，里面还没放啥东西，求支持嘛。

企业如何利用flutter小程序提升管理与运营效率

214 2024-07-15

掌握 Vue 技术能否用于编写小程序的探讨

小程序开发设计在提升企业数字化转型效率中的关键作用

企业如何利用flutter小程序提升管理与运营效率

洞察企业在使用vue小程序时，如何结合FinClip的监管与管理能力提高合规性和效率?

最近发表

更多内容

小程序SDK

Finclip技术文档

小程序开发

小程序容器

小程序框架

Finclip小程序平台

Finclip用户投稿

车联网

推荐文章

小程序SDK是什么意思？小程序sdk和插件有什么区别？

小程序支付功能怎么实现？

企业app开发流程是什么？

app运营模式有哪些？

小程序多端引流怎么做？

小程序生态分析的机会和威胁

Flutter入门这一篇效率文章就够了

原生与跨平台解决方案分析,跨平台软件开发技术方案

热更新技术：让软件更新变得更加轻松快速

解决方案

银行解决方案

证券解决方案

互联网解决方案

政企OA解决方案

科技解决方案

loT解决方案

信任解决方案

热评文章

AppCan:基于混合模式的移动应用开发,移动混合模

Hybrid App混合模式开发的了解

小程序容器技术助力券商数字营销突围，小程序容器化的意

用mpvue开发微信小程序基础知识（vue.js开发

小程序多端框架全面测评对比，强烈推荐！

券商app架构 - 解析券商应用程序的构建与设计