uniapp はどのようにして WeChat メソッドを直接呼び出すのでしょうか?

スマートフォンの普及に伴い、モバイル アプリケーションの需要が高まっており、WeChat は数億人のユーザーが毎日使用する必要があるアプリケーションの 1 つになりました。アプリケーションをよりインテリジェントにするために、uniapp を使用してアプリケーションを開発する開発者が増えています。 uniapp は Vue.js をベースとした開発フレームワークで、主に一度書いて複数の端末で実行するためのソリューションを提供し、小さなプログラム、H5、App などの複数のプラットフォームへのコンパイルをサポートします。

WeChat ミニ プログラムの人気に伴い、uniapp もミニ プログラムの開発のサポートを開始しました。 uniappで小規模なプログラムを開発する場合、コードスキャン機能の呼び出しやユーザーの位置情報の取得など、WeChat APIがよく使われます。この記事では、uniappでWeChat APIを直接呼び出す方法を紹介します。

1. uni-app.uniConfig.js ファイルを設定する

uniapp を使用して小さなプログラムを開発する場合は、プロジェクト ルートに新しい uni-app.uniConfig.js ファイルを作成する必要があります。ディレクトリに追加し、APPID、アプレット名、その他の情報の設定に追加します。このファイルでは、新しい wx オブジェクトを追加し、それに値を割り当てる必要もあります。次のように:

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

上記のコードでは、wx オブジェクトを追加し、それに値を割り当てました。このうち、chooseImage、getImageInfo、saveImageToPhotosAlbum、stopRecord、getFileSystemManager などのメソッドは uniapp に実装されている API で、env 属性は「wx」となっており、現在 WeChat 環境が使用されていることを意味します。

2. WeChat API の呼び出し

uni-app.uniConfig.js ファイルを構成した後、uniapp で WeChat API を直接呼び出すことができます。ユーザーの現在位置情報を取得する場合を例として、具体的なコードは次のとおりです。

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

上記のコードでは、uniapp の getLocation メソッドを使用してユーザーの位置情報を取得します。

3. WeChat Payment API の呼び出し

WeChat Payment API を例として、uniapp で WeChat Payment API を直接呼び出す方法を紹介します。

1. WeChat Pay 加盟店バックエンドで WeChat Pay の appid、mch_id、key、およびその他のパラメーターを取得します。

2. uniapp で支払い注文を作成します。具体的なコードは次のとおりです:

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

上記のコードでは、uniapp を通じて支払い注文を作成するためのサーバーへのリクエストを開始します。リクエストメソッド。このうち、openid はユーザーの WeChat openid、amount は支払い金額、goodsName は商品名です。

3. WeChat 支払いを開始します。具体的なコードは次のとおりです:

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

上記のコードでは、uni.requestPayment メソッドを通じて WeChat 支払いを開始します。このうち、timeStamp、nonceStr、package、paySign およびその他のパラメーターは、サーバーが支払い注文を作成するときに生成されます。

4. 概要

上記は、uniapp で WeChat API を直接呼び出す方法の概要です。 uniappを使用して小規模なプログラムを開発すると、開発効率が大幅に向上すると同時に、uni-app.uniConfig.jsファイルを設定することでWeChat APIを簡単に呼び出すこともできます。今後もテクノロジーの進化に伴い、uniappはモバイルアプリケーション開発の分野でさらに重要な役割を果たすと考えています。

以上がuniapp はどのようにして WeChat メソッドを直接呼び出すのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。