Comment uniapp appelle-t-il directement les méthodes WeChat ?

Avec la popularité des smartphones, la demande d'applications mobiles augmente et WeChat est devenu l'une des applications que des centaines de millions d'utilisateurs doivent utiliser chaque jour. Afin de rendre les applications plus intelligentes, de plus en plus de développeurs choisissent d'utiliser Uniapp pour développer des applications. uniapp est un framework de développement basé sur Vue.js. Il fournit principalement des solutions pour écrire plusieurs terminaux à la fois et prend en charge la compilation sur plusieurs plates-formes telles que les petits programmes, H5 et Apps.

Avec la popularité des mini-programmes WeChat, uniapp a également commencé à soutenir le développement de mini-programmes. Lors du développement de petits programmes dans Uniapp, les API WeChat sont souvent utilisées, par exemple pour appeler la fonction d'analyse de code et obtenir des informations de localisation de l'utilisateur. Cet article explique comment appeler directement l'API WeChat dans uniapp.

1. Configurez le fichier uni-app.uniConfig.js

Lorsque vous utilisez uniapp pour développer un mini programme, vous devez créer un nouveau fichier uni-app.uniConfig.js dans le répertoire racine du projet et configurer l'APPID, mini nom du programme, etc. dans les informations. Dans ce fichier, vous devez également ajouter un objet wx et lui attribuer une valeur. Comme suit :

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

Dans le code ci-dessus, nous avons ajouté l'objet wx et lui avons attribué une valeur. Parmi elles, des méthodes telles que ChooseImage, getImageInfo, saveImageToPhotosAlbum, stopRecord et getFileSystemManager sont des API qui ont été implémentées dans uniapp. L'attribut env est « wx », ce qui signifie que l'environnement WeChat est actuellement utilisé.

2. Appeler l'API WeChat

Après avoir configuré le fichier uni-app.uniConfig.js, nous pouvons appeler directement l'API WeChat dans uniapp. En prenant comme exemple l'obtention des informations de localisation actuelle de l'utilisateur, le code spécifique est le suivant :

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

Dans le code ci-dessus, nous utilisons la méthode getLocation dans uniapp pour obtenir les informations de localisation de l'utilisateur.

3. Appelez l'API de paiement WeChat

Nous prenons l'API de paiement WeChat comme exemple pour présenter comment appeler directement l'API de paiement WeChat dans uniapp.

1. Obtenez l'appid, le mch_id, la clé et d'autres paramètres de WeChat Pay dans le backend du marchand WeChat Pay.

2. Créez un ordre de paiement dans uniapp. Le code spécifique est le suivant :

/**
 * 创建支付订单(服务端创建)
 * 商品名：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)
      }
    })
  })
}

Dans le code ci-dessus, nous lançons une demande au serveur pour créer un ordre de paiement via la méthode uni.request. Parmi eux, openid est l'openid WeChat de l'utilisateur, Montant est le montant du paiement et GoodsName est le nom du produit.

3. Initiez le paiement WeChat, le code spécifique est le suivant :

/**
 * 发起微信支付
 * @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)
      }
    })
  })
}

Dans le code ci-dessus, nous initions le paiement WeChat via la méthode uni.requestPayment. Parmi eux, timeStamp, nonceStr, package, paySign et d'autres paramètres ont été générés lorsque le serveur crée l'ordre de paiement.

4. Résumé

Ce qui précède est l'introduction à l'appel direct de l'API WeChat dans uniapp. Utiliser uniapp pour développer de petits programmes peut améliorer considérablement l'efficacité du développement. Dans le même temps, en configurant le fichier uni-app.uniConfig.js, vous pouvez également facilement appeler l'API WeChat. À l'avenir, avec l'amélioration continue de la technologie, nous pensons qu'uniapp jouera un rôle encore plus important dans le domaine du développement d'applications mobiles.

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!