How does uniapp directly call WeChat methods?

With the popularity of smart phones, the demand for mobile applications is increasing, and WeChat has become one of the applications that hundreds of millions of users must use every day. In order to make applications more intelligent, more and more developers choose to use uniapp to develop applications. uniapp is a development framework based on Vue.js. It mainly provides solutions for writing once and running on multiple terminals, and supports compilation into multiple platforms such as small programs, H5, and Apps.

With the popularity of WeChat mini programs, uniapp has also begun to support the development of mini programs. When developing small programs in uniapp, WeChat APIs are often used, such as calling the code scanning function and obtaining user location information. This article will introduce how to directly call the WeChat API in uniapp.

1. Configure the uni-app.uniConfig.js file

When using uniapp to develop small programs, you need to create a new uni-app.uniConfig.js file in the project root directory and add it in Configure APPID, applet name and other information. In this file, you also need to add a new wx object and assign it a value. As follows:

module.exports = {
  // 配置APPID等信息
  // ...

  // 添加wx对象并进行赋值
  ext: {
    wx: {
      chooseImage: uni.chooseImage,
      getImageInfo: uni.getImageInfo,
      saveImageToPhotosAlbum: uni.saveImageToPhotosAlbum,
      stopRecord: uni.stopRecord,
      getFileSystemManager: uni.getFileSystemManager,
      env: 'wx'
    }
  }
}

In the above code, we added the wx object and assigned it a value. Among them, methods such as chooseImage, getImageInfo, saveImageToPhotosAlbum, stopRecord and getFileSystemManager are APIs that have been implemented in uniapp. The env attribute is 'wx', which means that the WeChat environment is currently used.

2. Call the WeChat API

After configuring the uni-app.uniConfig.js file, we can directly call the WeChat API in uniapp. Taking obtaining the user's current location information as an example, the specific code is as follows:

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

In the above code, we use the getLocation method in uniapp to obtain the user's location information.

3. Calling the WeChat Payment API

We take the WeChat Payment API as an example to introduce how to directly call the WeChat Payment API in uniapp.

1. Obtain the appid, mch_id, key and other parameters of WeChat Pay in the WeChat Pay merchant backend.

2. Create a payment order in uniapp. The specific code is as follows:

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

In the above code, we initiate a request to the server to create a payment order through the uni.request method. Among them, openid is the user's WeChat openid, amount is the payment amount, and goodsName is the product name.

3. Initiate WeChat payment, the specific code is as follows:

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

In the above code, we initiate WeChat payment through the uni.requestPayment method. Among them, timeStamp, nonceStr, package, paySign and other parameters have been generated when the server creates the payment order.

4. Summary

The above is the introduction to directly calling the WeChat API in uniapp. Using uniapp to develop small programs can greatly improve development efficiency. At the same time, by configuring the uni-app.uniConfig.js file, you can also easily call the WeChat API. In the future, with the continuous upgrading of technology, we believe that uniapp will play an even more important role in the field of mobile application development.

The above is the detailed content of How does uniapp directly call WeChat methods?. For more information, please follow other related articles on the PHP Chinese website!