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

作者：我是一个小哥哥

本文转载自：https://juejin.cn/user/131597127388024/posts

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

以上是你會用 vue 寫小程式嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！