cover_image

电商/票务类小程序必读,如何用小程序推送消息?

course小程序微信小程序小程序开发模板消息模板消息接口
Astrian 🦊

<p><img class="aligncenter size-full wp-image-791402" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/02/Featured-13.jpg" alt="" width="1200" height="750" srcset="http://www.ifanr.com/wp-content/uploads/2017/02/Featured-13.jpg 1200w, http://www.ifanr.com/wp-content/uploads/2017/02/Featured-13-360x225.jpg 360w, http://www.ifanr.com/wp-content/uploads/2017/02/Featured-13-768x480.jpg 768w, http://www.ifanr.com/wp-content/uploads/2017/02/Featured-13-1024x640.jpg 1024w" sizes="(max-width: 1200px) 100vw, 1200px" /></p> <p>如果你有一个电商小程序,或是一个活动报名小程序,那么你可能会遇到这样的问题:</p> <ul> <li>当消费者购买商品后,如何通知他们东西发货了呢?</li> <li>如果用户报名成功,怎么样快速又方便地告知他们报名结果呢?</li> </ul> <p>这时候,<strong>我们就需要用到小程序的「模板消息」接口</strong>。</p> <p>今天,知晓程序(微信号 zxcx0101)就来教你如何正确地发送模板消息。</p> <h3><span style="color: #605eac;">什么是模板消息?</span></h3> <p>顾名思义,<strong>模板消息是一种「套上模板的消息」</strong>。</p> <p>通常,服务方向用户推送的消息都带有通知性质,文案也相对固定。<strong>服务方将这类固定的文案制作成模板,这些文案就可以快速重复使用。</strong></p> <p>在发送时,服务方只需向模板内填充必要的数据(如客户名称、订单号、价格等),就可以将这条消息发送给用户了。</p> <p>例如,航空公司可能会向用户发送这样的消息:</p> <blockquote><p>张三,您好,您已购买 1 月 1 日 13:00 从广州飞往上海的 AB1234 航班的机票。</p></blockquote> <p>从中可以得知,除了一些需要根据实际情况填写的信息,其他文案都是固定的。</p> <p>那么,就可以提取这样的消息模板:</p> <blockquote><p>(旅客姓名),您好,您已购买(时间)从(出发地)飞往(到达地)的(航班号)航班的机票。</p></blockquote> <p>当航空公司发送消息时,他们只需要根据实际情况填充信息,就可以将这条消息发送给相应的用户了。</p> <h3><span style="color: #605eac;">微信小程序的模板消息限制</span></h3> <p>与普通的模板消息不同,<strong>在微信小程序中发送模板消息,具有一定条件</strong>。</p> <p>官方文档中规定,<strong>用户在小程序中进行支付或提交表单,小程序才能向用户发送模板消息</strong>。</p> <p>那么,微信如何得知用户是否有支付行为、表单提交的行为呢?</p> <p>用户支付或提交表单过后,开发者可以得到模板消息的 <code>formID</code>(为了方便解释,将它叫做「发送码」),这代表着开发者有发送模板消息的权限。</p> <p>开发者发送模板消息时,就需要向微信提供这样的发送码,完成模板消息的发送过程。</p> <p>而且,发送码是一次性的,用一次就会作废。也就是说,如果用户只发起过一次支付或提交过一次表单,那么开发者也只能向用户发送一次消息。</p> <p>除了需要用户进行支付或提交表单,小程序也不能通过模板消息接口,群发推广信息、垃圾信息等。</p> <h3><span style="color: #605eac;">如何发送模板消息?</span></h3> <p>知道了这些,就能得知,微信小程序发送模板消息的大致步骤是:</p> <ol> <li>开发者在微信公众平台,创建一个新的消息模板;</li> <li>获取支付过程或提交过程中,微信返回的消息发送码;</li> <li>开发者利用消息发送码,带上模板中非固定的信息,向微信发起发送消息的请求。</li> </ol> <p>那么,我们一步步开始吧。</p> <h4>创建新的消息模板</h4> <p>既然是「模板消息」,那第一步当然是创建新的模板了。</p> <ul> <li>打开 https://mp.weixin.qq.com 并登录小程序帐户;</li> <li>点击左侧菜单中的「模板消息」;</li> <li>进入顶部的「模板库」,从微信预置的模板中,选择一个合适的模板;</li> <li>确定模板中所使用的关键词。</li> </ul> <p>如果关键词列表中没有你希望使用的关键词,你可以点击申请一个新的关键词。但<strong>申请新的关键词需要提交审核</strong>。</p> <p><img class="aligncenter size-full wp-image-791364" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/02/template-1-1.jpg" alt="" width="1000" height="702" srcset="http://www.ifanr.com/wp-content/uploads/2017/02/template-1-1.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2017/02/template-1-1-360x253.jpg 360w, http://www.ifanr.com/wp-content/uploads/2017/02/template-1-1-768x539.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>模板添加后,会获得模板 ID(<code>template_id</code>),稍后就可以用到它。</p> <p><img class="aligncenter size-full wp-image-791367" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/02/template-2.jpg" alt="" width="1000" height="702" srcset="http://www.ifanr.com/wp-content/uploads/2017/02/template-2.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2017/02/template-2-360x253.jpg 360w, http://www.ifanr.com/wp-content/uploads/2017/02/template-2-768x539.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <h4>获取模板消息发送码</h4> <p>创建消息模板后,还需要「发送码」,才能发送模板消息。</p> <p>以提交表单为例,看看发送码的获取方式。</p> <p>首先,在小程序中,放置一个带有 <code>report-submit</code> 属性的表单:</p> <pre><code>&lt;form bindsubmit="formSubmit" bindreset="formReset" report-submit&gt; &lt;!-- 此处是表单元素 --&gt; &lt;button formType="submit"&gt;Submit&lt;/button&gt;&lt;!-- 提交按钮 --&gt; &lt;/form&gt; </code></pre> <p>然后,在页面的 <code>Page()</code> 函数中,新建一个提交表单的函数。</p> <p>在函数中,就能接收到 <code>formId</code>,也就是发送码了。</p> <pre><code>var sendercode; // 用于存储发送码 Page({ //其他的函数 formSubmit: function(e) { sendercode = e.detil.formId;) } }) </code></pre> <p>如果你想在微信发起支付请求后,获取发送码,那么你需要调用微信支付中的「统一下单」接口。</p> <p>当「统一下单」接口请求成功之后,回调值中的「预支付交易会话标识」,也就是 <code>prepay_id</code>,就可以作为发送码来使用。</p> <h4>发送模板消息</h4> <p>经过这么多步骤,终于可以向用户发送模板消息了。<strong>在这一步,所有过程都是在开发者的服务器完成。</strong></p> <p>首先,通过 GET 方式,获取到小程序的 Access Token:</p> <pre><code>https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&amp;appid=APPID&amp;secret=APPSECRET </code></pre> <p>接着,用 POST 方式,向微信提交模板消息的发送请求。</p> <p>请求地址为:</p> <pre><code>https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=ACCESS_TOKEN </code></pre> <p>请求数据的格式如下:</p> <pre><code>{ "touser": "OPENID", // 接收消息的用户的 OpenId,需要使用其他接口获取 "template_id": "TEMPLATE_ID", // 模板 ID,在第一步中可以获取到 "page": "index", // 进入小程序时打开的页面,可以添加参数 "form_id": "FORMID", // 一次性发送码 "data": { // 模板中非固定字段,用于填充模板 "keyword1": { "value": "张三", // 模板中,填充字段的信息 "color": "#173177" // 字段的展示颜色 }, "keyword2": { "value": "2015 年 01 月 05 日 12:30", "color": "#173177" } } }</code></pre> <p>当接口返回成功消息时,就代表着模板消息已经发送出去了。</p> <p>有关于微信小程序模板消息接口的更多使用方法和使用限制,可以访问<span style="color: #605eac;"><a style="color: #605eac;" href="http://suo.im/3ieJrr">官方文档</a></span>了解详情。</p> <h4>往期精选文章</h4> <ul> <li><span style="color: #605eac;"><a style="color: #605eac;" href="http://www.ifanr.com/minapp/790017">开发 | 效率提升 100%,小程序开发应该这样做</a></span></li> <li><span style="color: #605eac;"><a style="color: #605eac;" href="http://www.ifanr.com/minapp/787666">开发 | 技术高人如何开发小程序?他们用这套方法</a></span></li> <li><span style="color: #605eac;">开发 | 小程序开发有哪些坑?这份笔记都整理出来了</span></li> </ul> <p><strong>本文由知晓程序授权转载,关注微信号 zxcx0101,可获得以下内容和服务:</strong></p> <ul class=" list-paddingleft-2"> <li>在微信后台回复「<span style="color: #605eac;">0109</span>」,一张图教你玩转微信小程序。</li> <li>在微信后台回复「<span style="color: #605eac;">加群</span>」,加入「一起发现小程序」微信交流群。</li> <li>在微信后台回复任意关键词,还能获得相关小程序推荐,赶紧试试吧!</li> </ul> <p><img class="alignnone size-full wp-image-784874" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/02/zxcx_0208.png" alt="zxcx_0208" width="1000" height="926" srcset="http://www.ifanr.com/wp-content/uploads/2017/02/zxcx_0208.png 1000w, http://www.ifanr.com/wp-content/uploads/2017/02/zxcx_0208-360x333.png 360w, http://www.ifanr.com/wp-content/uploads/2017/02/zxcx_0208-768x711.png 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p>