친절한 상호 작용을 반영하기 위해 미니 프로그램에서는 메시지 알림을 놓칠 수 없습니다. 템플릿 메시지 전송 기능을 어떻게 구현할 수 있는지 궁금합니다. 구현 방법에 대해 자세히 소개하겠습니다. 미니 프로그램 기능에서 템플릿 메시지 보내기.

Background

- 미니 프로그램 개발 과정에서 대부분 위챗 결제가 만족스러울 겁니다
- 그럼, 우호적인 소통을 반영하여 결제 후 메시지 알림도 자연스럽게 고려하도록 하겠습니다
- 그래서 저의 미니 프로그램 프로젝트는 제가 나도 이 효과를 완료해야 하므로 동료 도교인들이 함정을 피할 수 있도록 구현 단계를 공유하고 싶습니다...

WeChat 메시지 알림의 차이점:

1. 버전, 공개 계정의 메시지 알림
메시지를 받으려면 사용자가 "판매자의 공개 계정을 팔로우"해야 합니다
그리고 이상한 문제가 있습니다: 가까운 시일 내에 공개 계정과 통신하지 않은 경우 여전히 메시지 알림을 받을 수 없습니다
그렇지 않으면 메시지 스타일을 코드로 사용자 정의해야 합니다(문제) 2. WeChat 애플릿은 "서비스 알림"을 지원할 수 있습니다
WeChat 메시지에서 서비스를 받으려면 자신만의 "템플릿 메시지"를 구성하고 사용자의 "openid"를 얻기만 하면 됩니다.
미니프로그램 관리 배경에서 알림 스타일을 선택하여 미리보기(인간화)할 수 있습니다

JD쇼핑의 메시지 알림은 다음과 같습니다(즉, 아래에서 달성하고 싶은 효과)를 참고해주세요

미니 프로그램이 템플릿 메시지(사진 및 텍스트) 전송 기능을 구현하는 방법

사전 준비

① 먼저 위챗 애플릿 공식 문서에서 안내를 제공합니다 - [템플릿 메시지 보내기]

먼저 편의를 위해 간단 문서를 찾아볼 수 있습니다 눈을 가린 파리를 피하기 위한 자신만의 프로세스를 이해하세요简单的浏览，以方便自己的流程理解，避免蒙头苍蝇乱撞
②. 小程序给与了我们最方便的手动模板配置方式

我们可以先去 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);
      }
    })
  },

로그인 후 복사