一、获取access_token 
access_token是接口调用的凭证,目前有效期为两个小时,需要定时刷新,重复获取将导致上次获取的access_token失效。(注:不建议每次调用需要access_token的接口,都去重新获取access_token,会导致失败) 
获取access_token的接口地址:

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

返回参数格式:

{"access_token": "ACCESS_TOKEN", "expires_in": 7200}

二、发送模板消息 
先在微信公众平台选用怒需要的模板id,例如 
选用模板消息:

https://mp.weixin.qq.com/wxopen/tmplmsg?action=self_list&token=264012870&lang=zh_CN

选用的是购买成功的模板,关键字可以自己定义顺序,如果不符合你的情况,还可以自定义关键字 

选用好了之后,可以在我的模板中查看。然后将其模板id复制过来。 
类似于这样 : _CfGS7SqVyNPg9Op8OXzMp6aOl7X9rCkrRfiMcccms8

发送模板的消息接口地址:

https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=ACCESS_TOKEN

参数: 
touser (必填) 接收者(用户)的 openid 
template_id (必填) 所需下发的模板消息的id 
page (可选) 点击模板卡片后的跳转页面,仅限本小程序内的页面。支持带参数,(示例index?foo=bar)。该字段不填则模板无跳转。 
form_id (必填) 表单提交场景下,为 submit 事件带上的 formId;支付场景下,为本次支付的 prepay_id 
data (必填) 模板内容,不填则下发空模板 
color (可选) 模板内容字体的颜色,不填默认黑色 
emphasis_keyword (可选) 模板需要放大的关键词,不填则默认无放大

例如

html
<form bind:submit="testSubmit" report-submit="true">
<button formType="submit">发送模板消息</button>
</form>

js

testSubmit:function(e){
var self= this;
let _access_token = '5_E1pZJQzTC-lC0r-JJz9wVAZv5Zv22CNtmV_7C1T0sqC9TV7mGE4FTmDX2B0PVM4LaGtaTfXwzfJLnD7fDKTg8DOICJNkKBQgn_Ot2zYmBJyY1g1VXoBNdtwUE0QaP8_9tWlbR-Zq7L1OyrrPKCIjAEAOGM';
let url='https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token='+_access_token ; let _jsonData = {
access_token: _access_token,
touser: openid,
template_id: '_CfGS7SqVyNPg9Op8OXzMp6aOl7X9rCkrRfiMcccms8',
form_id: e.detail.formId,
page: "pages/index/index",
data: {
"keyword1": { "value": "测试数据一", "color": "#173177" },
"keyword2": { "value": "测试数据二", "color": "#173177" },
"keyword3": { "value": "测试数据三", "color": "#173177" },
"keyword4": { "value": "测试数据四", "color": "#173177" },
}
}
wx.request({
url: url,
data: data,
method: method,
success: function (res) {
console.log(res)
},
fail: function (err) {
console.log('request fail ', err);
},
complete: function (res) {
console.log("request completed!");
} })

结果: 
类似于这种 

微信小程序之发送模板消息(通过openid推送消息给用户)的更多相关文章

  1. (三)微信小程序之发送服务通知(模板消息)

    1.后端获取AccessToken返回给微信端 微信小程序端请求后端得到AccessToken   2.后端获取openid返回给微信端   微信小程序端登录请求后端得到openid   3.发送消息 ...

  2. 微信小程序中发送模版消息注意事项

    在微信小程序中发送模版消息 参考微信公众平台Api文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/notice.html#模版消息管理 此参考地址 ...

  3. 微信小程序:WXML 模板

    微信小程序:WXML 模板 一.WXML 模板 网页编程采用的是 HTML + CSS + JS 这样的组合,其中 HTML 是用来描述当前这个页面的结构,CSS 用来描述页面的样子,JS 通常是用来 ...

  4. 原创:【微信小程序】发送消息模板教程(后台以PHP示例)

    1.本教程对外开放,未经博主同意,禁止转载. 2.准备材料:1)公众号|小程序,添加选择的模板消息,2)在设置>开发设置页面,开通消息模板功能:如: 3.因为调用微信发送模板的接口是:https ...

  5. 微信小程序开发之模板消息

    一.添加模板 登录https://mp.weixin.qq.com获取模板,如果没有合适的模板,可以申请添加新模板,审核通过后可使用,详见模板审核说明 页面的 <form/> 组件,属性r ...

  6. 微信小程序开发之模板

    一.简介 WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用. 定义模板 使用name属性,作为模板的名字.然后在<template/>内定义代码片段,如 ...

  7. 微信小程序如何发送短信验证码,无需搭建服务器

    自从微信小程序提供云开发支持,开发者无需搭建后台服务器,使用微信提供的核心API就可以实现应用功能,此时就需要小程序能够自己发送短信,比如短信验证码,榛子云短信(http://smsow.zhenzi ...

  8. 微信小程序开发 [04] 模板和模块化

    1.模板 如果相同的wxml代码可能在不同的页面重复使用,ctrl+c配合ctrl+v的方式,后期维护起来未免也太麻烦了.微信提供了"模板",可以在模板中定义代码片段,然后在不同的 ...

  9. 微信小程序-wepy-组件模板重复渲染

    微信小程序开发,有使用wepy框架的需求.上手: 安装自己可以到官网查看,飞机票:https://tencent.github.io/wepy/document.html#/ 具体开发模式和Vue开发 ...

随机推荐

  1. Codeforces Round #554 (Div. 2) 1152B. Neko Performs Cat Furrier Transform

    学了这么久,来打一次CF看看自己学的怎么样吧 too young too simple 1152B. Neko Performs Cat Furrier Transform 题目链接:"ht ...

  2. DOM1级问题与DOM2级事件

    前几天有小伙伴问过我一个问题,为什么有DOM 0级事件以及DOM2级事件,但是却没有DOM1级事件呢?那我们今天就来说一说DOM的级别问题. 同时推荐伙伴们可以看看尚学堂有关JavaScript BO ...

  3. Android 监听屏幕锁屏&用户解锁

    在做视频播放器的时候,遇到一个问题,在用户播放视频然后锁屏之后,视频播放器仍然在继续播放,遇到类似手机系统状态改变的问题的时候,首先想到了广播,下面做个总结: public class ScreenL ...

  4. Spark基础-scala学习(八、隐式转换与隐式参数)

    大纲 隐式转换 使用隐式转换加强现有类型 导入隐式转换函数 隐式转换的发生时机 隐式参数 隐式转换 要实现隐式转换,只要程序可见的范围内定义隐式转换函数即可.Scala会自动使用隐式转换函数.隐式转换 ...

  5. Vue 中是如何解析 template 字符串为 VNode 的?

    在接触 React 时候,我只了解到通过 babel 可以把 JSX 转成 VNode(通过调用 React.createElement 方法),但是对其具体是如何转换的却不了解. 很明显,回答失败. ...

  6. Ubuntu安装Python2.7,nodejs,Redis

    安装Python2.7 sudo add-apt-repository ppa:fkrull/deadsnakes-python2.7sudo apt-get update sudo apt-get ...

  7. update-rc.d: error: XXX Default-Start contains no runlevels, aborting.

    root@hm-saas-db:/etc/init.d# update-rc.d confluence disable update-rc.d: error: confluence Default-S ...

  8. vue项目 使用Hbuilder打包app 设置沉浸式状态栏

    使用 Hbuilder新建好移动app项目后,mainfest.json这个文件里的 plus里设置 statusbar ..... "plus": { "statusb ...

  9. ionic2 关于启动后白屏问题跟app启动慢的问题

    问题描述: 在ionic2下创建的项目打包生成apk,运行在真机上,进入启动页然后有5秒左右的白屏情况才进入首页,在真实项目中更严重,启动画面后更有时候十几秒都是白屏,体验性非常差. 在各种搜索之下, ...

  10. php(curl请求)测试接口案例

    请求测试接口,如下: $data = [']; $result = curlrequest($apiUrl,$data); ){ echo json_encode($result); }else{ e ...