1. Login authorization

1. Mini program login mechanism

• Traditional login (jwt method as an example)

• The user enters the username and password (the password needs to be encrypted through certain algorithms) to access the login interface

• The backend verifies the username and password, encrypts the user's information into a token string, and returns it to the frontend

• The frontend saves the token (locally) Storage, here involves an interview question: What is the difference between localstorage, sessionstorage, and cookie? Ask yourself)

• Every time the front-end sends a request, it sends the token to the back-end. , it is up to the backend to determine whether the login status is legal (how to pass the token, whether to put it in the header or in the body, discuss it with the backend yourself)

• Then the front-end determines whether to execute something based on the return situation Operation

• Mini program login authorization The mini program does not have a login box, but only authorizes the use of user information. What is the process like? The simple steps are: Obtain user information for authorization----->Call wx.login interface------>Get the returned unique identity authentication code----->pass the code to you with user information Backend----->The back end is the same as above

It should be noted that the

• code can only be used once. And it expires in five minutes. If it expires, you need to wx.login() again

2. We do login authorization

##2-1 , Thinking scenario

Before loading the mini program, determine whether you have logged in (that is, whether you have a token). If you have not logged in, jump to the login interface (or directly call to obtain user information) Interface and login interface

2-2 Determination before login

Before loading the mini program, determine whether to log in , and make the corresponding jump

How to judge before loading?------>Life cycle hook function

At this time, when we open App.vue in the project, we will see the following Code:

        onLaunch: function() {
            // 這時app初始化完成
            // 注意全局只觸發(fā)一次?。?！
			console.log('App Launch')
		},
		onShow: function() {
            // app從后臺切入前臺或者啟動
            // 顯然這是判斷是否登陸過的好機會
			console.log('App Show')
		},
		onHide: function() {
            // app從前臺進入后臺
			console.log('App Hide')
		}

So the judgment method

 onShow: function() {
    //  查一下都獲取了那些權(quán)限
    wx.getSetting({
      success(res) {
        //   看看有沒有用戶信息，如果不存在，證明沒有登陸
        if (!res.authSetting["scope.userInfo"]) {
            // 關(guān)閉所有頁面，打開到應(yīng)用內(nèi)的登錄頁面
          wx.reLaunch({
            url: "/pages/authorise/index"
          });
        }
      }
    });
  },

The api related to jumping between pages of the mini program

wx.reLaunch(); // 關(guān)閉所有頁面，打開到應(yīng)用內(nèi)的某個頁面
wx.switchTab(); // 跳轉(zhuǎn)到 tabBar 頁面，并關(guān)閉其他所有非 tabBar 頁面
wx.navigateTo(); // 跳轉(zhuǎn)到某個頁面
wx.navigateBack(); // 返回到上個頁面，需要跟navigateTo配合使用

Please refer to the wx documentation for specific usage. If you really can’t stand it, just look at the uniapp documentation. They look the same anyway.

Uniapp’s api package inherits the mini program’s api. Basically, the mini program’s api is the same as wx in front of it. You can use it if you change the word to uni

2-3. Login operation

Not much to say, just look at some of the codes on WeChat The permissions API has been abandoned. Now you can only perform some permission operations through the button's opentype attribute. The following code includes handling the secondary boot authorization login process after the user refuses authorization.

<button open-type="getUserInfo"  @getuserinfo="mpGetUserInfo" size="mini" v-if="show">授權(quán)登錄</button>
<button type="primary" size="mini" open-type="openSetting" @opensetting="reauthorize" v-else>重新授權(quán)</button>

 // 獲取到用戶信息后，調(diào)用登錄接口，如果被拒絕授權(quán)，就跳轉(zhuǎn)到設(shè)置頁面
    mpGetUserInfo(result) {
      const that = this;
      // 查看是否授權(quán)
      wx.getSetting({
        success(res) {
          if (res.authSetting["scope.userInfo"]) {
            // 已經(jīng)授權(quán)，可以直接調(diào)用 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 => {
                        // 登錄失敗，提示錯誤信息,重新打開授權(quán)頁面
                        if (判斷登錄失敗的條件) {
                          wx.redirectTo({
                            url: ""
                          });
                          // 登陸成功
                        } else {
                          // 保存登陸成功獲取的token
                          wx.setStorageSync("token", res.data.userinfo.token);
                          // 保存返回的被處理過的用戶信息
                          uni.setStorageSync("login", res.data.userinfo);
                          // 登陸成功 跳轉(zhuǎn)到tab首頁
                          wx.switchTab({
                            url: ""
                          });
                        }
                      });
                  }
                });
              }
            });
          } else {
            that.show = false;
          }
        }
      });
    },
    // 處理重新授權(quán)后的回調(diào)函數(shù)
    reauthorize(e) {
      if (e.detail.authSetting["scope.userInfo"]) {
        // 若二次授權(quán)成功，切換對話框的顯示按鈕
        this.show = true;
      }
    }

In this way, it's done. As for What is this.$http? Please read the third article (I haven’t written it yet, why?) After reading it, please give it a like.

If you continue reading, let me make a complaint first. It’s been three days and I haven’t received it yet. Salary, so annoying, let’s fish together, friends

I mentioned it in my last reply

---

This.$http sends a request, what is this?

1. Send a request in the PC-side vue project

Foolish steps: (Use axios)

yarn add axios
// npm 也行啦

// 在cli項目中 
// main.js中
import axios from 'axios'
// 配置請求的根路徑
// 這個baseURL如果配置了跨域代理，就把proxy里配的名字給它就成
axios.defaults.baseURL = '/api'
// 配置請求攔截器
axios.interceptors.request.use(config => {
 // 這里做各種預(yù)處理，加token啦，攔截權(quán)限訪問啦隨便
  return config
}, (error) => { return Promise.reject(error) })

axios.interceptors.response.use(config => {
  return config
})

// 掛載到vue上
Vue.prototype.$http = axios

2. Mini program request1. Native approach:

wx.request({
  url: 'test.php', //僅為示例，并非真實的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默認(rèn)值
  },
  success (res) {
    console.log(res.data)
  }
})

xue Wei is a little uncomfortable because he is used to axios and supports promises, so we will let him Support promises

2. Encapsulate a small request function that supports promises

1. Create a new request.js file and put it in a folder called utils (I won’t tell you What does utils mean)

2. Export a default function object

3. The function returns a promise, which contains a resolve and a reject. If you don’t know what a promise is, please read my other articles

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

4. Encapsulate WeChat’s api (uniapp’s api will also work. If there is a cross-end requirement, just encapsulate uni’s requestapi directly, which is almost the same)

export default () => {
    return new Promise((resolve,reject)=>{
        wx.request({
        url: 'test.php', //僅為示例，并非真實的接口地址
        data: {
            x: '',
            y: ''
        },
    header: {
        'content-type': 'application/json' // 默認(rèn)值
    },
    success (res) {
        console.log(res.data)
        }
    })
    })
}

5. Continue to encapsulate, you can’t use it directly now

// 把會改的參數(shù)抽出來，像URL啦，methods啦，data數(shù)據(jù)啦，通過形參的方式傳遞，把請求的成功或者失敗的結(jié)果弄出去
export default (params) => {
    return new Promise((resolve,reject)=>{
        wx.request({
            ...params
            header: {
                'content-type': 'application/json' // 默認(rèn)值
            },
            success (res) {
               resolve(res)   // 這里resolve出去的是res還是res.data看你們請求返回的數(shù)據(jù)
            }
            fail: (err) => {
              reject(err)
            },
        )
    })
}

6. Axios has a baseURL to save effort, we also have to have

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. Process the request header

// 比如需要攜帶token請求的
// 比如需要設(shè)置一些字段類型 都在這里搞
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)
            }
        });
    })
}

Full version

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. How to use it in the project?

In one sentence, it’s the same as axios

• Introduction

• 掛載

• 使用

在main.js里

import Request from './utils/request'
Vue.prototype.$http = Request

然后就可以開開心心在vue單文件組件里this.$http(各種參數(shù)).then()的使用拉，流暢又爽

我們還需要啥技能？用vue寫小程序

不要懷疑，山東人就是喜歡倒裝句咋地
好像沒啥了
直接

// 把之前的npm run dev:mp-weixin的黑窗口ctr+c退出哈先
// 然后執(zhí)行
npm run build:mp-weixin

關(guān)閉當(dāng)先開發(fā)者工具里的項目，重新引入dist文件夾下面的build文件夾中的mp-weixin文件夾，這是我們打包好的文件，引入之后，自己測試一遍，沒問題后點擊開發(fā)者工具的右上角上傳按鈕，進行上傳代碼，然后登錄微信小程序后臺把代碼提交審核就行啦。
以上，感謝大家，最后，關(guān)注一波我的公眾號唄，剛開始做，雖然，里面還沒放啥東西，求支持嘛。

作者：我是一個小哥哥

本文轉(zhuǎn)載自：https://juejin.cn/user/131597127388024/posts

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

The above is the detailed content of Can you use vue to write small programs?. For more information, please follow other related articles on the PHP Chinese website!