經(jīng)歷了一段繁忙的工作期,還有2天就要過年了。在這里總結(jié)一下最新開發(fā)微信小程序的心得和體會,算是一個總結(jié),也算溫故而知新,如果還能對讀者有所幫助,那就更好了。 ...
本文首先假定開發(fā)者已經(jīng)粗略閱讀過微信小程序的開發(fā)文檔,所以注冊小程序的流程就不介紹了。不過需要注意,小程序現(xiàn)在只允許企業(yè)用戶注冊,所以認證需要企業(yè)營業(yè)執(zhí)照復印件
和加蓋公章的小程序申請公函
。如果是選擇對公賬戶認證,則不需要公函。另外,如果需要使用微信支付
接口,則需要另外進行一次微信認證,這個就必須使用300塊的方式了,感覺靠給微信認證的公司就掙錢不少。。。
我使用的開發(fā)工具就是微信官方提供的IDE,現(xiàn)在也有了很多第三方的IDE或者插件,但是用起來感覺整合度不如官方版,索性不換了。新建項目需要輸入注冊小程序時獲取的AppId
。需要注意的是設(shè)置頁面:其中有一項是開發(fā)環(huán)境不校驗請求域名以及TLS版本。這一項需要勾選上,因為微信只支持HTTPS的協(xié)議而且必須是指定域名,這讓開發(fā)者使用localhost
調(diào)試變的很麻煩,勾選此項之后就沒有這種限制了。但只有在開發(fā)環(huán)境才可以。
如圖:
首先是目錄結(jié)構(gòu):
var request = require('utils/requestfun.js');//封裝了ajax的實現(xiàn)
App({
data: { //app.js中使用的data
},
globalData: { //全局使用的data
REQUEST_BASE_URL: '',//后臺服務器域名
GET_VIP_BR_CODE: '',//請求條形碼接口
GET_VIP_QR_CODE: '',//請求二維碼接口
channelid: '',
vipcode: null,//初始設(shè)置會員卡號為null
wxuserkey: ''//后臺返回的解密后信息
},
//獲取會員信息
getVipInfo: function (cb) {
var that = this;
if (!that.globalData.vipcode) {
//調(diào)用登錄接口
wx.login({//微信提供的login接口,可以獲得openid及code
success: function (res) {
var code = res.code;
wx.getUserInfo({//微信提供的接口,使用code獲取用戶信息,包括unionid
success: function (res) {
var params = {
'channelid': that.globalData.channelid,
'code': code,
'res': res
}
request.mnsrequest(that.globalData.REQUEST_BASE_URL + 'weixin/miniappgetvipinfo.action', params, function (mnsres) {//請求項目后臺服務器返回會員信息
if (mnsres.data) {
if (mnsres.data.returndata.isregistered) {
var vipcode = mnsres.data.returndata.vipcode;
that.globalData.vipcode = vipcode;
typeof cb == "function" && cb();
} else {
that.globalData.wxuserkey = mnsres.data.returndata.wxuserkey;//此處為后臺返回的會員微信信息key,通過此key與后臺通信
wx.redirectTo({//微信提供的路由接口,重定向。
url: '/pages/reg/reg'
})
}
} else {
return mnsres.errMsg;
}
})
}
})
}
})
} else {
typeof cb == "function" && cb();
}
}
})
這里強調(diào)幾點:
wx.redirectTo
、wx.navigateTo
和wx.switchTab
wx.navigateTo
全局最多調(diào)用5次wx.switchTab
,不支持其他兩種路由方式訪問app.json是全局配置文件。
{
"pages": [//所有頁面都需要在這里注冊后才能使用
"pages/index/index",
"pages/vipinfo/vipinfo",
"pages/reg/reg"
],
"window": {//設(shè)置小程序窗體樣式及顯示文字
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "會員卡",
"navigationBarTextStyle": "black"
},
"tabBar": {//設(shè)置Tab頁樣式
"list": [//設(shè)置Tab頁列表,最大支持5個
{
"pagePath": "pages/index/index",
"text": "會員卡",
"iconPath": "pages/img/vip.png",
"selectedIconPath": "pages/img/vip2.png"
},
{
"pagePath": "pages/vipinfo/vipinfo",
"text": "個人信息",
"iconPath": "pages/img/info.png",
"selectedIconPath": "pages/img/info2.png"
}
],
"borderStyle":"white"
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true
}
app.wxss控制全局樣式。
/**app.wxss**/
page{//需要設(shè)置page高度,才能正常讓空間高度顯示為100%
height: 100%;
}
.container {
font-family: 'Franklin Gothic Medium', 'Arial Narrow';
/*border: 1px solid black;*/
background-color: #48c23d;
width: 100%;
height: 100%;
display: flex;//小程序推薦使用flex布局
flex-direction: column;
align-items: center;
justify-content: flex-end;
box-sizing: border-box;
overflow: hidden;
padding: 50rpx;
}
.reg_container{
font-family: 'Franklin Gothic Medium', 'Arial Narrow';
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
box-sizing: border-box;
overflow: hidden;
padding: 50rpx;
}
.info_container{
font-family: 'Franklin Gothic Medium', 'Arial Narrow';
font-size: 30rpx;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
box-sizing: border-box;
overflow: hidden;
padding: 50rpx;//小程序推薦的自適應長度單位
}
wxml為微信創(chuàng)造的xml標記語言。
<view class="reg_container">//view可以簡單理解為html中的塊狀元素
<view class="phone_container">
手機號:
<input class='phone' type="number" placeholder="請輸入手機號" maxlength="11" focus bindinput="bindKeyInput" />//使用bind綁定事件
</view>
<view class="vertify_container">
驗證碼:
<input class='vertify' type="number" placeholder="請輸入驗證碼" maxlength="4" bindinput="bindKeyInput2" />
<button class="vertify_btn" size="default" type="primary" bindtap="getVertifycode" disabled='{{vertical.disabled}}'>{{vertical.value}}</button>//使用雙大括號語法進行數(shù)據(jù)綁定,但只支持單向綁定,若要實現(xiàn)雙向綁定,需要借助事件
</view>
<view class="regbtn_container">
<button class="reg_btn" size="default" type="primary" bindtap="regist">注冊</button>
</view>
</view>
按照官方操作說明進行即可。參照下圖:
簡化版VUE.js
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務