Pouvez-vous utiliser vue pour écrire de petits programmes ?

1. Autorisation de connexion

1. Mécanisme de connexion du mini programme

• Connexion traditionnelle (méthode jwt à titre d'exemple)

• L'utilisateur saisit le nom d'utilisateur et le mot de passe (le mot de passe doit être crypté via certains algorithmes) et accède à l'interface de connexion

• Le backend vérifie le nom d'utilisateur et le mot de passe, crypte les informations de l'utilisateur dans une chaîne de jeton et les renvoie au frontend

• Le frontend enregistre le stockage du jeton (localement), voici une question d'entretien : Quelle est la différence entre le stockage local, le stockage de session et le cookie ? Demandez-vous)

• Chaque fois que le front-end envoie une requête, il envoie le token au back-end, c'est au backend de déterminer si le statut de connexion est légal (comment transmettre le token, s'il faut le mettre dans l'en-tête ou dans le corps et en discuter vous-même avec le backend)

• Ensuite, le front-end jugera s'il faut exécuter quelque chose en fonction de la situation de retour. Opération

• Autorisation de connexion au mini-programme. Le mini programme n'a pas de boîte de connexion, mais autorise uniquement l'utilisation des informations utilisateur. Comment se déroule le processus ? Les étapes simples sont les suivantes : Obtenir les informations utilisateur pour l'autorisation -----> Appeler l'interface wx.login------> Obtenir le code d'authentification d'identité unique renvoyé -----> vous transmettre le code avec les informations utilisateur Backend-- --->Le back-end est le même que ci-dessus

Il est à noter que le

• code ne peut être utilisé qu'une seule fois. Et il expire dans cinq minutes. S'il expire, vous devez à nouveau wx.login()

2. Nous effectuons une autorisation de connexion

. 2-1 , Scénario de réflexion

Avant de charger le mini programme, déterminez si vous êtes connecté (c'est-à-dire si vous avez un jeton si vous n'êtes pas connecté). , accédez à l'interface de connexion (ou appelez directement pour obtenir les informations de l'utilisateur) Interface et interface de connexion

2-2 Détermination avant connexion

Avant de charger le mini programme, déterminez si vous devez vous connecter et effectuez le saut correspondant

Comment déterminer avant le chargement ------>Fonction de hook de cycle de vie

À ce moment-là, lorsque nous ouvrirons App.vue dans le projet, nous verrons le code suivant :

        onLaunch: function() {
            // 这时app初始化完成
            // 注意全局只触发一次！！！
			console.log('App Launch')
		},
		onShow: function() {
            // app从后台切入前台或者启动
            // 显然这是判断是否登陆过的好机会
			console.log('App Show')
		},
		onHide: function() {
            // app从前台进入后台
			console.log('App Hide')
		}

Donc la méthode de jugement

 onShow: function() {
    //  查一下都获取了那些权限
    wx.getSetting({
      success(res) {
        //   看看有没有用户信息，如果不存在，证明没有登陆
        if (!res.authSetting["scope.userInfo"]) {
            // 关闭所有页面，打开到应用内的登录页面
          wx.reLaunch({
            url: "/pages/authorise/index"
          });
        }
      }
    });
  },

L'API liée au saut entre les pages du mini programme

wx.reLaunch(); // 关闭所有页面，打开到应用内的某个页面
wx.switchTab(); // 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.navigateTo(); // 跳转到某个页面
wx.navigateBack(); // 返回到上个页面，需要跟navigateTo配合使用

Veuillez vous référer à la documentation wx pour une utilisation spécifique. Si vous ne pouvez vraiment pas le supporter, regardez simplement la documentation uniapp. la même chose de toute façon.

Le package API d'Uniapp hérite de l'API du mini programme. Fondamentalement, l'API du mini programme est la même que wx devant lui. Il peut être utilisé même si le caractère est modifié en uni

.

2-3. Opération de connexion

Pas grand chose à dire, il suffit de regarder le code sur WeChat. L'API d'autorisation a été abandonnée. Désormais, vous ne pouvez effectuer que certaines opérations d'autorisation via l'attribut opentype du bouton. Le code suivant inclut la gestion du processus de connexion d'autorisation de démarrage secondaire après que l'utilisateur a refusé l'autorisation

<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;
      }
    }

C'est tout, c'est fait Quant à Qu'est-ce que c'est.$ http ? Veuillez lire le troisième article (je ne l'ai pas encore écrit, pourquoi ?) Après l'avoir lu, donnez-lui un coup de pouce

Continuons la lecture et laissons-moi d'abord me plaindre. Cela fait trois jours et je ne l'ai pas fait. Je ne l'ai pas encore reçu. Salaire, tellement ennuyeux, pêchons ensemble, les amis

Comme mentionné dans la dernière lettre

---

This.$http envoie une requête, qu'est-ce que c'est ?

1. Envoyer une requête dans le projet vue côté PC

Étapes stupides : (utilisez 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

2. Demandes de mini programmes
1 Approche native :

wx.request({
  url: 'test.php', //仅为示例，并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})

xue Wei est un peu mal à l'aise car il est habitué aux axios et soutient les promesses. , nous allons donc le laisser Support promises

2. Encapsuler une petite fonction de requête qui prend en charge les promesses

1 Créez un nouveau fichier request.js et placez-le dans un dossier appelé utils (j'ai gagné. Je ne vous dis pas ce que signifie utils)

2. Exportez un objet fonction par défaut

3. La fonction renvoie une promesse, qui contient une résolution et un rejet si vous ne savez pas. qu'est-ce qu'une promesse, veuillez lire mes autres articles

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

4. Encapsulez l'API de WeChat (l'API d'uniapp fonctionnera également. S'il y a une exigence croisée, encapsulez simplement l'API de requête d'uni directement, ce qui est presque le même)

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. Continuez à encapsuler, vous ne pouvez pas l'utiliser directement maintenant

// 把会改的参数抽出来，像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 a une baseURL pour économiser des efforts, il faut aussi avoir

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. Traiter les en-têtes de requête

// 比如需要携带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)
            }
        });
    })
}

Version complète

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 Comment l'utiliser dans le projet ?

En une phrase, c'est la même chose qu'axios

• Introduction

• 挂载

• 使用

在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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!