Wie ruft Uniapp WeChat-Methoden direkt auf?

Mit der Beliebtheit von Smartphones steigt die Nachfrage nach mobilen Anwendungen und WeChat ist zu einer der Anwendungen geworden, die Hunderte Millionen Benutzer täglich nutzen müssen. Um Anwendungen intelligenter zu machen, entscheiden sich immer mehr Entwickler für die Verwendung von Uniapp zur Entwicklung von Anwendungen. uniapp ist ein auf Vue.js basierendes Entwicklungsframework, das hauptsächlich Lösungen zum gleichzeitigen Schreiben mehrerer Terminals bietet und die Kompilierung in mehrere Plattformen wie kleine Programme, H5 und Apps unterstützt.

Mit der Beliebtheit von WeChat-Miniprogrammen hat uniapp auch begonnen, die Entwicklung von Miniprogrammen zu unterstützen. Bei der Entwicklung kleiner Programme in Uniapp werden häufig WeChat-APIs verwendet, z. B. zum Aufrufen der Code-Scan-Funktion und zum Abrufen von Benutzerstandortinformationen. In diesem Artikel wird erläutert, wie Sie die WeChat-API direkt in Uniapp aufrufen.

1. Konfigurieren Sie die Datei uni-app.uniConfig.js

Wenn Sie uniapp zum Entwickeln eines Miniprogramms verwenden, müssen Sie eine neue Datei uni-app.uniConfig.js im Projektstammverzeichnis erstellen und die APPID mini konfigurieren Programmname usw. darin Informationen. Sie müssen dieser Datei außerdem ein neues WX-Objekt hinzufügen und ihm einen Wert zuweisen. Wie folgt:

module.exports = {
  // 配置APPID等信息
  // ...
 
  // 添加wx对象并进行赋值
  ext: {
    wx: {
      chooseImage: uni.chooseImage,
      getImageInfo: uni.getImageInfo,
      saveImageToPhotosAlbum: uni.saveImageToPhotosAlbum,
      stopRecord: uni.stopRecord,
      getFileSystemManager: uni.getFileSystemManager,
      env: 'wx'
    }
  }
}

Im obigen Code haben wir das WX-Objekt hinzugefügt und ihm einen Wert zugewiesen. Darunter sind Methoden wie ChooseImage, getImageInfo, saveImageToPhotosAlbum, stopRecord und getFileSystemManager APIs, die in uniapp implementiert wurden. Das env-Attribut ist „wx“, was bedeutet, dass derzeit die WeChat-Umgebung verwendet wird.

2. WeChat-API aufrufen

Nachdem wir die Datei uni-app.uniConfig.js konfiguriert haben, können wir die WeChat-API direkt in uniapp aufrufen. Am Beispiel des Abrufens der aktuellen Standortinformationen des Benutzers lautet der spezifische Code wie folgt:

// 获取用户位置信息
uni.getLocation({
  type: 'gcj02',
  success: function (res) {
    console.log(res)
  }
})

Im obigen Code verwenden wir die getLocation-Methode in uniapp, um die Standortinformationen des Benutzers abzurufen.

3. WeChat Payment API aufrufen

Wir nehmen die WeChat Payment API als Beispiel, um vorzustellen, wie man die WeChat Payment API direkt in Uniapp aufruft.

1. Rufen Sie die App-ID, mch_id, den Schlüssel und andere Parameter von WeChat Pay im WeChat Pay-Händler-Backend ab.

2. Erstellen Sie einen Zahlungsauftrag in uniapp. Der spezifische Code lautet wie folgt:

/**
 * 创建支付订单(服务端创建)
 * 商品名：test
 * 金额：1
 * openid：abc
 * @param {Object} userInfo
 */
export const createPayOrder = (userInfo) => {
  return new Promise((resolve, reject) => {
    uni.request({
      url: 'https://test.com/api/weixin/pay',
      method: 'POST',
      data: {
        openid: userInfo.openid,
        amount: 1,
        goodsName: 'test'
      },
      success: function (res) {
        resolve(res.data.data)
      },
      fail: function (err) {
        reject(err)
      }
    })
  })
}

Im obigen Code initiieren wir eine Anfrage an den Server, um über die uni.request-Methode einen Zahlungsauftrag zu erstellen. Unter diesen ist openid die WeChat-Openid des Benutzers, amount der Zahlungsbetrag und GoodsName der Produktname.

3. WeChat-Zahlung einleiten, der spezifische Code lautet wie folgt:

/**
 * 发起微信支付
 * @param {Object} data
 */
export const wxPayment = (data) => {
  return new Promise((resolve, reject) => {
    uni.requestPayment({
      timeStamp: data.timeStamp,
      nonceStr: data.nonceStr,
      package: data.package,
      signType: 'MD5',
      paySign: data.paySign,
      success: function (res) {
        resolve(res)
      },
      fail: function (err) {
        reject(err)
      }
    })
  })
}

Im obigen Code initiieren wir die WeChat-Zahlung über die uni.requestPayment-Methode. Darunter werden timeStamp, nonceStr, package, paySign und andere Parameter generiert, wenn der Server den Zahlungsauftrag erstellt.

4. Zusammenfassung

Das Obige ist die Einführung zum direkten Aufruf der WeChat-API in Uniapp. Die Verwendung von uniapp zur Entwicklung kleiner Programme kann die Entwicklungseffizienz erheblich verbessern. Gleichzeitig können Sie durch die Konfiguration der Datei uni-app.uniConfig.js auch problemlos die WeChat-API aufrufen. Wir glauben, dass Uniapp in Zukunft aufgrund der kontinuierlichen Weiterentwicklung der Technologie eine noch wichtigere Rolle im Bereich der Entwicklung mobiler Anwendungen spielen wird.

Das obige ist der detaillierte Inhalt vonWie ruft Uniapp WeChat-Methoden direkt auf?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!