ミニプログラムがテンプレートメッセージ (画像とテキスト) を送信する機能を実装する方法

不言

リリース： 2018-09-07 15:23:37

オリジナル

14319 人が閲覧しました

フレンドリーなインタラクションを反映するには、ミニプログラムでメッセージ通知を見逃すことはできません。どのように実装すればよいでしょうか。実装方法については、次の記事で詳しく説明します。ミニプログラム機能でのテンプレートメッセージの送信。

背景

- ミニプログラム開発の過程で、ほとんどのプログラムは WeChat 支払いに対応します
- その後、フレンドリーなやり取りを反映して、支払い後のメッセージ通知を自然に考慮します
- それで、私のミニプログラムプロジェクトは、私もこの効果を完了する必要があるので、仲間の道士が落とし穴を回避できるように、私の実装手順を共有したいと思います...

WeChat メッセージ通知の違い: WeChat ウェブ 1.バージョンでは、公開アカウントからのメッセージリマインダー
メッセージを受信するにはユーザーが「販売者の公開アカウントをフォロー」する必要があります

繰り返しますが、それ以外の場合は、メッセージスタイルをコードでカスタマイズする必要があります (トラブル) 2. WeChat アプレットは「サービス通知」をサポートできます

独自の「テンプレートメッセージ」を設定し、WeChat メッセージからサービスを受けるためにユーザーの「openid」を取得するだけで済みます
ミニプログラムの管理背景で通知スタイルを選択してプレビュー(擬人化)できます

以下のJDショッピングのメッセージ通知を参照してください(つまり、以下で達成したい効果)

事前準備

ミニプログラムがテンプレートメッセージ (画像とテキスト) を送信する機能を実装する方法

① まず、WeChat アプレットの公式ドキュメントに、[テンプレートメッセージの送信] というガイドが用意されています。

simple

② ミニプログラムは手動テンプレートを設定する最も便利な方法を提供します简单的浏览，以方便自己的流程理解，避免蒙头苍蝇乱撞
②. 小程序给与了我们最方便的手动模板配置方式

我们可以先去 1（模板库）中选取自己需要的模板，自定义标题、排序
申请成功之后，进入 2（我的模板）中就可以看到自己能够使用的模板，我们后期进行代码编辑时，用到的就是那个模板ID

<img src="https://img.php.cn//upload/image/159/428/477/1536304579960741.png" title="1536304579960741.png" alt="ミニプログラムがテンプレートメッセージ (画像とテキスト) を送信する機能を実装する方法">

实现步骤

此处，主要以

组件形式的实现为例，对于prepay_id 的实现请参考文末的附录

1. 小程序端的要求

语境：微信支付成功后，对用户发送一条"订单支付成功通知"的模板消息

第一步：以我的代码实现为例，首先需要对我的

组件进行需发模板消息的声明，即设置属性 report-submit="true"
第二步：对应的 pages/cart/payment.js代码中，编写的提交代码，以及对 event参数打印的结果则为：
注意：截图部分只是为了，获取并保存我们需要的 formId，

其实，后面的代码还可以有很多的逻辑处理，以我的代码逻辑为例：
我继续进行了表单数据的规范验证 -> wx.request 数据提交 -> 唤醒微信支付 -> 支付结果的回调处理

第三步：request 调用发送消息通知的方法

以我的逻辑为例，是在执行完微信支付回调后，判断支付成功才进行调用的

ミニプログラムがテンプレートメッセージ (画像とテキスト) を送信する機能を実装する方法

此处，直接提供上述截图中 pages/cart/payment.js 所需要用到的两个核心方法

 /**
   * 微信支付成功后的 消息模板的发送
   */
  sendTemplatePaySuccess: function() {    
  var self = this;    
  var postData = {
      sn: self.data.order_sn,
      form_id: self.data.formId
    };
    self.http_post(&#39;https://xxx.com/wx/sendTemplatePaySuccess&#39;, postData, (data) => {
      wx.navigateTo({
        url: &#39;/pages/cart/results/index?status=1&type=pay&orderInfo=&#39; + JSON.stringify(self.data.orderInfo),
      });
    })
  }, /**
 * 封装 http 函数，默认‘GET’ 提交
 */
   http_post:function(toUrl, postData, httpCallBack) {
    wx.request({
      url:  toUrl,
      data: postData,
      method: &#39;POST&#39;, // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      header: {        &#39;content-type&#39;: &#39;application/x-www-form-urlencoded;charset=utf-8&#39;,
      },
      success: function (res) {        //回调处理
        return typeof httpCallBack == "function" && httpCallBack(res.data);
      },
      fail: function (error) {
        console.log(error);
      }
    })
  },

ログイン後にコピー

2. 服务端代码配置

我对服务端的代码，整合集中在了一个文件中，可从附录中进行下载
第一步：替换小程序配置信息
第二步：修改方法 sendTemplatePaySuccess()
- 🎜 アプリケーションが成功したら、2 (使用できるテンプレートは [マイテンプレート] で確認できます。後でコードを編集するときに、テンプレート ID🎜🎜<img src=" https:/ /img.php.cn//upload/image/159/428/477/1536304579960741.png" title="1536304579960741.png" alt="ミニプログラムがテンプレートメッセージ (画像とテキスト) を送信する機能を実装する方法"/>🎜🎜🎜🎜🎜 🎜🎜実装手順🎜🎜🎜🎜ここでは、主に
  コンポーネント form の実装を例に挙げます。prepay_id の実装については、記事の最後にある付録を参照してください🎜🎜🎜
  1。アプレットの要件
  h2>🎜コンテキスト: WeChat 支払いが成功すると、「注文支払い成功通知」のテンプレートメッセージがユーザーに送信されます🎜🎜🎜🎜ステップ 1: 私のコード実装を例に挙げます。まず、🎜🎜🎜🎜ステップ 2: 対応するページ/カート/支払い。 js コードを作成し、次のイベントパラメーターの結果を出力します。 🎜🎜 🎜🎜🎜注: スクリーンショットの部分は、必要な formId を取得して保存するだけです 🎜🎜