跟著小豬來(lái)做小程序開(kāi)發(fā)：體驗(yàn)?zāi)０逑?/h1>
發(fā)布時(shí)間：2017-12-09 16:53 所屬欄目：小程序開(kāi)發(fā)教程
在上一篇結(jié)束時(shí)小豬本打算這一篇使用falsk來(lái)做后端存儲(chǔ)formId然后走標(biāo)準(zhǔn)的小程序開(kāi)發(fā)流程來(lái)實(shí)現(xiàn)模板消息的功能。
但是后來(lái)仔細(xì)想想，如果讀者本身自是想做小程序開(kāi)發(fā)，對(duì)后端開(kāi)發(fā)并不感興趣，或者后端框架也不一定是基于Python的Flask，那其實(shí)對(duì)是否使用flask來(lái)做后端是并不關(guān)心的。
所以小豬這一篇開(kāi)始，能不用后端的就不用后端，因?yàn)樾〕绦蚩蚣鼙旧硪呀?jīng)為我們封裝了wx.request接口來(lái)訪問(wèn)網(wǎng)絡(luò)了。我們可以方便的使用這個(gè)接口來(lái)代替服務(wù)器來(lái)做請(qǐng)求。
準(zhǔn)備工作
設(shè)置微信后臺(tái)的request合法域名
這個(gè)設(shè)置是用來(lái)限制我們的小程序中使用wx.request接口時(shí)可以調(diào)用哪些域名來(lái)進(jìn)行訪問(wèn)，一般而言我們配置我們自己的域名。
因?yàn)楸酒恼滦枰谛〕绦騼?nèi)部調(diào)用發(fā)送模板消息的接口，所以需要將https://api.weixin.qq.com/加入到合法域名里。
然后到微信《微信web開(kāi)發(fā)者工具》里面的項(xiàng)目tag里刷新配置信息，如果不刷新的話可能會(huì)出現(xiàn)下述情況：
獲取access_token
獲取access_token的方法小豬很久之前就有單獨(dú)的文章介紹過(guò)。和小豬一起搞微信公眾號(hào)開(kāi)發(fā)—獲取Access_token
不過(guò)這里我們使用的是wx.request接口來(lái)請(qǐng)求，所以我們直接使用調(diào)試的方法：
1. 打開(kāi)網(wǎng)址https://mp.weixin.qq.com/debug/，確認(rèn)選擇的調(diào)試接口為獲取access_token
2. 屬于我們的appid 和secret值。
3. 點(diǎn)擊調(diào)試,獲取數(shù)據(jù)，在下面的返回框里找到對(duì)應(yīng)的access_token值，并取出，這個(gè)值在兩個(gè)小時(shí)之內(nèi)是有效的。
獲取openid
直接使用跟著小豬來(lái)做小程序開(kāi)發(fā)吧——獲取用戶Openid的方法來(lái)獲取openid。
使用模板消息id
在微信小程序后臺(tái)的模板消息欄里添加合適的模板消息，并記錄其對(duì)應(yīng)的模板ID。
開(kāi)始編寫(xiě)代碼
因?yàn)槲覀冎皇菫榱梭w驗(yàn)下小程序的模板消息，所以我們把上面獲取的信息先臨時(shí)的保存在小程序的全局環(huán)境里：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
//app.js
App({
onLaunch: function () {
//調(diào)用API從本地緩存中獲取數(shù)據(jù)
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
},
//…… 省略了其他代碼
globalData:{
userInfo:null,
openid:'oWv370DkivlAs-LPrxKKvQ9KP98w',
appid:'wx8fa41e5f33e****',
access_token:'********'
}
})
|
然后在對(duì)應(yīng)的表單頁(yè)的邏輯代碼里sform.js：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
var app = getApp()
Page({
data:{
formId:null,
template_id:null,
openId:null,
msg:null
},
formSubmit: function(e) {
console.log('form發(fā)生了submit事件，攜帶數(shù)據(jù)為：', e.detail.formId)
this.orderSign(e)
},
formReset: function() {
console.log('form發(fā)生了reset事件')
},
onLoad:function(){
console.log('sform load')
},orderSign: function (e) {
var fId = e.detail.formId;
var that = this;
var l = 'https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=' + app.globalData.access_token;
var d = {
touser: app.globalData.openid,
template_id: 'quFqMrHJnAHiVwyfCXrK_EGbHAvtOy9UdIDhP-1l5xY',//模板消息id，
page: '/pages/index/index',
form_id: fId,
data: {
"keyword1": {
"value": "主題1111",
"color": "#4a4a4a"
},
"keyword2": {
"value":new Date().getDate(),
"color": "#9b9b9b"
},
"keyword3": {
"value":"地點(diǎn)是……",
"color": "#9b9b9b"
},
"keyword4": {
"value": "描述一下這這是測(cè)試代碼",
"color": "#9b9b9b"
},
"keyword5": {
"value": "備注信息。",
"color": "red"
}
},
color: '#ccc',
emphasis_keyword: 'keyword1.DATA'
}
wx.request({
url: l,
data: d,
method: 'POST',
success: function(res){
that.setData({'formId':fId,'openId':app.globalData.openid,'template_id':d.template_id})
that.setData({'msg':res})
console.log("push msg");
console.log(res);
},
fail: function(err) {
// fail
console.log("push err")
console.log(err);
}
});
}
})
|
對(duì)應(yīng)的頁(yè)面代碼sform.wxml：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<form bindsubmit="formSubmit" bindreset="formReset" report-submit = "true">
<view class="section section_gap">
<view class="section__title">checkbox</view>
<checkbox-group name="checkbox">
<label><checkbox value="checkbox1"/>checkbox1</label>
<label><checkbox value="checkbox2"/>checkbox2</label>
</checkbox-group>
</view>
<view class="btn-area">
<button formType="submit">Submit</button>
<button formType="reset">Reset</button>
</view>
</form>
<view class="section section_gap">
<view class="section_title">{{ formId}}</view>
</view>
<view class="section section_gap">
<view class="section_title">{{ openId}}</view>
</view>
<view class="section section_gap">
<view class="section_title">{{ template_id}}</view>
</view>
<view class="section section_gap">
<view class="section_title">{{ msg}}</view>
</view>
|
頁(yè)面代碼里為了方便調(diào)試我們加上了一些調(diào)試信息。
上述代碼邏輯很簡(jiǎn)單，根據(jù)主要就是獲取到formid之后組裝調(diào)用模板消息的必要信息，然后調(diào)用微信模板消息API，調(diào)用成功之后將信息反饋到小程序界面。
代碼編寫(xiě)完成之后，轉(zhuǎn)到《微信web開(kāi)發(fā)者工具》的項(xiàng)目tag，點(diǎn)擊預(yù)覽按鈕，編譯上傳完成之后微信掃描二維碼就可以體驗(yàn)。
點(diǎn)擊提交表單時(shí)可看到我們的服務(wù)通知窗口里有了消息推送:
