小程式開發總結
阿新 • • 發佈:2019-02-06
開發前準備
本文首先假定開發者已經粗略閱讀過微信小程式的開發文件,所以註冊小程式的流程就不介紹了。不過需要注意,小程式現在只允許企業使用者註冊,所以認證需要企業營業執照影印件
和加蓋公章的小程式申請公函
。如果是選擇對公賬戶認證,則不需要公函。另外,如果需要使用微信支付
介面,則需要另外進行一次微信認證,這個就必須使用300塊的方式了,感覺靠給微信認證的公司就掙錢不少。。。
開發工具介紹
我使用的開發工具就是微信官方提供的IDE,現在也有了很多第三方的IDE或者外掛,但是用起來感覺整合度不如官方版,索性不換了。新建專案需要輸入註冊小程式時獲取的AppId
。需要注意的是設定頁面:其中有一項是開發環境不校驗請求域名以及TLS版本
localhost
除錯變的很麻煩,勾選此項之後就沒有這種限制了。但只有在開發環境才可以。
功能設計
如圖:
開發過程
首先是目錄結構:
- pages:用於存放會員卡、個人資訊和註冊三個頁面的檔案
- utils:放置公共js檔案
- app.js:程式入口
- app.json:小程式頁面配置檔案
- app.wxss:小程式全域性樣式檔案
app.js
var request = require('utils/requestfun.js');//封裝了ajax的實現
App({
data: { //app.js中使用的data
},
globalData: { //全域性使用的data
REQUEST_BASE_URL: '',//後臺伺服器域名
GET_VIP_BR_CODE: '',//請求條形碼介面
GET_VIP_QR_CODE: '',//請求二維碼介面
channelid: '',
vipcode: null,//初始設定會員卡號為null
wxuserkey: ''//後臺返回的解密後資訊
},
//獲取會員資訊
getVipInfo: function (cb) {
var that = this;
if (!that.globalData.vipcode) {
//呼叫登入介面
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();
}
}
})
這裡強調幾點:
- 微信路由介面有三個,分別是
wx.redirectTo
、wx.navigateTo
和wx.switchTab
wx.navigateTo
全域性最多呼叫5次- 如果某頁面設定為tab頁,則只支援
wx.switchTab
,不支援其他兩種路由方式訪問
app.json
app.json是全域性配置檔案。
{
"pages": [//所有頁面都需要在這裡註冊後才能使用
"pages/index/index",
"pages/vipinfo/vipinfo",
"pages/reg/reg"
],
"window": {//設定小程式窗體樣式及顯示文字
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "會員卡",
"navigationBarTextStyle": "black"
},
"tabBar": {//設定Tab頁樣式
"list": [//設定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控制全域性樣式。
/**app.wxss**/
page{//需要設定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;//小程式推薦的自適應長度單位
}
reg.wxml
wxml為微信創造的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>//使用雙大括號語法進行資料繫結,但只支援單向繫結,若要實現雙向繫結,需要藉助事件
</view>
<view class="regbtn_container">
<button class="reg_btn" size="default" type="primary" bindtap="regist">註冊</button>
</view>
</view>
加密解密
關於加密解密,推薦大家閱讀小程式基礎篇之資料解密,詳細且正確。
提交稽核
按照官方操作說明進行即可。參照下圖:
總結
- 有其他MVVM開發經驗的話,小程式上手很快,可以將其理解為
簡化版VUE.js
- 微信資料解密是難點,必須嚴格按照微信提供的解密流程,java需要引入新jar包
- 設定頁面高度時,必須設定page的height為100%,否則高度設定無效
- 重定向路徑寫法:“/pages/index/index”
- 若同一頁面中兩個input都設定了“focus”屬性,則會導致小程式閃退
- 在tab中註冊的頁面,不可使用重定向及新頁面介面,只可使用tab切換
- 微信規定,整體程式碼大小不得超過1M,所以圖片需使用雲端儲存連結獲取
以上小程式開發的經驗總結,歡迎大家留言交流,給我點贊吧!