1.新建小程序項目
https://gitlab.xxx.com/TCO/H5/base_mini_la
初始的框架 已經(jīng)上傳git 項目框架包括 網(wǎng)關接入 + 登錄 + 小程序自帶底部導航 + 加載頁 + 錯誤頁
具體錯誤頁和登錄接口 根據(jù)業(yè)務替換sid和網(wǎng)關配置即可
項目文件結構如下：
image.png
2.上傳代碼到git
同前端vue項目上傳步驟一樣：先在gitlab上新建項目 填寫項目名 拿到git地址 在本地項目中clone并上傳
3.測試、預發(fā)布尊惰、線上 切換
修改 utils文件夾下的const 文件里的myVersion變量 develop為開發(fā)環(huán)境和測試環(huán)境专缠，預發(fā)布則需要將myVersion字段值改為pre 相應的線上環(huán)境改為pub
- 上傳可以到體驗版測試壮虫，需要正式環(huán)境測試時再提交審核
*版本控制要注意 - 二維碼識別或者掃一掃打開小程序 體驗版一次只能配置五個鏈接的二維碼 需要更多就只能在發(fā)布后的版本
- 小提示：如果審核有點急 可以在審核版本頁面點擊左上角的聯(lián)系客服催一下 親測有效哦~
4.上線注意事項
小程序選擇時間點提交審核（一般在上線前兩個小時要做準備提交審核，因為審核需要時間）在此期間可以在體驗版簡單測試h5頁面荤崇。
審核通過后，服務端上線， 服務端上線完成 可以在體驗版 測試整個線上環(huán)境 無誤 可以發(fā)布 也可以灰度發(fā)布測試 （灰度發(fā)布是根據(jù)用戶比例測吹榴，目前沒使用過，擔心會影響線上用戶使用 使用體驗版一樣能達到效果 所以就沒用）
ps：上述測試 要在服務端上線 h5不上線 不影響線上用戶使用情況下 否則最好一起上線 直接在線上測試
5.自定義底部導航
參考如下鏈接
http://www.reibang.com/p/27b1fe7043a4
6.自定義頂部導航
http://www.reibang.com/p/0ea8178a5045
7.動態(tài)加載底部導航
http://www.reibang.com/p/713551c33cc3
8.h5鏈接滚婉、掃一掃打開小程序
http://www.reibang.com/p/5bc5af13d282
9.一鍵登錄
wxml
<button class="qrview" wx:if="{{!isActOn}}" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" style="width:100%;line-height: 100rpx;font-size: 32rpx;border-radius: 50rpx;margin-top: 90rpx;padding:0;">手機號碼一鍵登錄</button>
getPhoneNumber (e) {
if (this.data.isActOn) {
return;
}
this.setData({
isActOn: true
})
console.log('111',e.detail)
this.setData({
numberObj: e.detail
})
var _data = e.detail;
if (e.detail.errMsg == 'getPhoneNumber:fail:user deny' || e.detail.errMsg == 'getPhoneNumber:fail user deny'){
console.log('refuse');
this.setData({
isActOn: false
})
} else if (e.detail.errMsg == 'getPhoneNumber:fail:user cancel' || e.detail.errMsg == 'getPhoneNumber:fail user cancel'){
console.log('cancel');
this.setData({
isActOn: false
})
} else {
wx.login({
success: res => {
_data.code = res.code;
console.log('loginparam',_data);
LoginApi.directLogin({
data: _data
}).then(res => {
console.log("directLogin", res);
if (res.reCode === Consts.SERVER_CODE.SUCCESS_CODE_0) {
if (res.result && res.result.phoneNumber) {
this.setData({
mobileNo: res.result.phoneNumber
})
this.wxMiniRegisterFuc(_data,1)
} else {
this.setData({
isActOn: false
})
this.showToast('獲取手機號失敗图筹，請稍后再試');
}
} else {
this.setData({
isActOn: false
})
this.showToast(res.reInfo);
}
}).catch(error => {
this.setData({
isActOn: false
})
console.log(error)
this.showToast(Consts.SERVER_CODE.MSG_ERROR_MSG);
})
}
})
}
},
這里注意點：
- 這種判斷 取消和 拒絕的判斷 按照我這種寫法些 網(wǎng)上的不全面
if (e.detail.errMsg == 'getPhoneNumber:fail:user deny' || e.detail.errMsg == 'getPhoneNumber:fail user deny')
- 按鈕控制連續(xù)點擊 isActOn我這里用這個變量控制的 點完按鈕變灰即isActOn為true變灰
