Heim > WeChat-Applet > WeChat-Entwicklung > Kann man mit Vue kleine Programme schreiben?

Kann man mit Vue kleine Programme schreiben?

hzc
Freigeben: 2021-09-07 09:08:21
nach vorne
6391 Leute haben es durchsucht

1. Anmeldeberechtigung

1. Anmeldemechanismus des Miniprogramms


  • Traditionelle Anmeldung (JWT-Methode als Beispiel)

    • Der Benutzer gibt den Benutzernamen und das Passwort ein (das Passwort muss durch bestimmte Algorithmen verschlüsselt werden) und greift auf die Anmeldeschnittstelle zu

    • Das Backend überprüft den Benutzernamen und das Passwort, verschlüsselt die Benutzerinformationen in einer Token-Zeichenfolge und gibt sie an das Frontend zurück

    • Das Frontend speichert Der Token (lokal) Storage, hier ist eine Interviewfrage: Was ist der Unterschied zwischen Localstorage, Sessionstorage und Cookie? Fragen Sie sich)

    • Jedes Mal, wenn das Frontend eine Anfrage sendet, Es sendet das Token an das Backend. Es ist Sache des Backends, zu bestimmen, ob der Anmeldestatus zulässig ist (wie das Token übergeben wird, ob es in den Header oder in den Text eingefügt werden soll, und dies selbst mit dem Backend zu besprechen).

    • Dann beurteilt das Frontend anhand der Rückgabesituation, ob etwas ausgeführt werden soll.

  • Mini-Programm-Anmeldeautorisierung Das Miniprogramm verfügt über keine Login-Box, sondern erlaubt lediglich die Nutzung von Benutzerinformationen. Wie ist der Ablauf? Die einfachen Schritte sind: Erhalten Sie Benutzerinformationen zur Autorisierung -----> Rufen Sie die wx.login-Schnittstelle auf ------> Erhalten Sie den zurückgegebenen eindeutigen Identitätsauthentifizierungscode -----> geben Sie den Code mit den Benutzerinformationen an Sie weiter. Backend-- --->Das Backend ist das gleiche wie oben

Es ist zu beachten, dass der

  • Code nur einmal verwendet werden kann. Und es läuft in fünf Minuten ab, Sie müssen wx.login() erneut ausführen

2. Wir führen eine Anmeldeautorisierung durch

2-1, Denkszenario

Stellen Sie vor dem Laden des Miniprogramms fest, ob Sie angemeldet sind (d. h. ob Sie über ein Token verfügen). , springen Sie zur Anmeldeschnittstelle (oder rufen Sie direkt an, um Benutzerinformationen zu erhalten) Schnittstelle und Anmeldeschnittstelle


2-2 Bestimmung vor der Anmeldung

Bestimmen Sie vor dem Laden des Miniprogramms, ob Sie sich anmelden möchten, und führen Sie den entsprechenden Sprung aus

Wie wird vor dem Laden festgestellt? ------>Lebenszyklus-Hook-Funktion

Wenn wir zu diesem Zeitpunkt App.vue im Projekt öffnen, sehen wir den folgenden Code:

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

So die Beurteilungsmethode

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

Die API im Zusammenhang mit dem Springen zwischen Seiten des Miniprogramms

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

Informationen zur spezifischen Verwendung finden Sie in der wx-Dokumentation. Wenn Sie es wirklich nicht ertragen können, schauen Sie sich einfach die Uniapp-Dokumentation an Das Gleiche gilt jedenfalls.

Das API-Paket von Uniapp erbt im Grunde das gleiche wie wx davor. Es kann auch dann verwendet werden, wenn das Zeichen in uni geändert wird


2-3. Anmeldevorgang

Es gibt nicht viel zu sagen, schauen Sie sich einfach den Code auf WeChat an. Die Berechtigungs-API wurde aufgegeben. Jetzt können Sie einige Berechtigungsvorgänge nur über das OpenType-Attribut der Schaltfläche ausführen. Der folgende Code umfasst die Handhabung des sekundären Startautorisierungs-Anmeldevorgangs, nachdem der Benutzer die Autorisierung verweigert.

<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>
Nach dem Login kopieren
 // 获取到用户信息后,调用登录接口,如果被拒绝授权,就跳转到设置页面
    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;
      }
    }
Nach dem Login kopieren

Das ist es, es ist erledigt http? Bitte lesen Sie den dritten Artikel (ich habe ihn noch nicht geschrieben, warum?) Geben Sie ihm nach dem Lesen einen Daumen nach oben

Lasst uns weiterlesen und mich erst einmal beschweren Ich habe es noch nicht erhalten, so nervig, lasst uns zusammen fischen, Freunde


Wie im vorherigen Brief erwähnt


This.$http sendet eine Anfrage, was ist das?

1. Eine Anfrage im PC-seitigen Vue-Projekt senden

Dumme Schritte: (Axios verwenden )

yarn add axios
// npm 也行啦
Nach dem Login kopieren
e

2. Anfragen für Miniprogramme 1. Nativer Ansatz:

// 在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
Nach dem Login kopieren

xue Wei ist ein wenig unbehaglich, weil er an Axios gewöhnt ist und Versprechen unterstützt , also lassen wir ihn Versprechen unterstützen

2. Kapseln Sie eine kleine Anforderungsfunktion, die Versprechen unterstützt

1. Erstellen Sie eine neue request.js-Datei und legen Sie sie in einem Ordner namens utils ab (ich habe gewonnen). Ich sage Ihnen nicht, was Utils bedeuten)

2. Exportieren Sie ein Standardfunktionsobjekt

3. Die Funktion gibt ein Versprechen zurück, das eine Auflösung und eine Ablehnung enthält. Falls Sie es nicht wissen Was für ein Versprechen ist, lesen Sie bitte meine anderen Artikel


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)
  }
})
Nach dem Login kopieren

4. Kapseln Sie die API von WeChat (die API von uniapp ist ebenfalls akzeptabel. Wenn es eine Cross-End-Anforderung gibt, kapseln Sie einfach die Anforderungs-API von uni direkt, was fast der Fall ist das Gleiche)


export default () => {
    return new Promise((resolve,reject)=>{
        
    })
}
Nach dem Login kopieren

5. Kapseln Sie weiter, Sie können es jetzt nicht direkt verwenden

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)
        }
    })
    })
}
Nach dem Login kopieren

6. Axios hat eine Basis-URL, um Aufwand zu sparen, wir müssen auch < haben 🎜>
// 把会改的参数抽出来,像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)
            },
        )
    })
}
Nach dem Login kopieren

7. Anforderungsheader verarbeiten

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

    })
}
Nach dem Login kopieren

Vollversion

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

2. Wie verwende ich es im Projekt?

In einem Satz ist es dasselbe wie Axios

    Einführung
  • 挂载

  • 使用

在main.js里

import Request from &#39;./utils/request&#39;
Vue.prototype.$http = Request
Nach dem Login kopieren

然后就可以开开心心在vue单文件组件里this.$http(各种参数).then()的使用拉,流畅又爽

我们还需要啥技能?用vue写小程序

不要怀疑,山东人就是喜欢倒装句咋地
好像没啥了
直接

// 把之前的npm run dev:mp-weixin的黑窗口ctr+c退出哈先
// 然后执行
npm run build:mp-weixin
Nach dem Login kopieren

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

作者:我是一个小哥哥

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

推荐教程:《微信小程序

Das obige ist der detaillierte Inhalt vonKann man mit Vue kleine Programme schreiben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:juejin.im
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage