1.新建小程序项目
https://gitlab.xxx.com/TCO/H5/base_mini_la
初始的框架 已经上传git 项目框架包括 网关接入 + 登录 + 小程序自带底部导航 + 加载页 + 错误页
具体错误页和登录接口 根据业务替换sid和网关配置即可
项目文件结构如下：
image.png
2.上传代码到git
同前端vue项目上传步骤一样：先在gitlab上新建项目 填写项目名 拿到git地址 在本地项目中clone并上传
3.测试、预发布、线上 切换
修改 utils文件夹下的const 文件里的myVersion变量 develop为开发环境和测试环境，预发布则需要将myVersion字段值改为pre 相应的线上环境改为pub
- 上传可以到体验版测试，需要正式环境测试时再提交审核
*版本控制要注意 - 二维码识别或者扫一扫打开小程序 体验版一次只能配置五个链接的二维码 需要更多就只能在发布后的版本
- 小提示：如果审核有点急 可以在审核版本页面点击左上角的联系客服催一下 亲测有效哦~
4.上线注意事项
小程序选择时间点提交审核（一般在上线前两个小时要做准备提交审核，因为审核需要时间）在此期间可以在体验版简单测试h5页面。
审核通过后，服务端上线， 服务端上线完成 可以在体验版 测试整个线上环境 无误 可以发布 也可以灰度发布测试 （灰度发布是根据用户比例测，目前没使用过，担心会影响线上用户使用 使用体验版一样能达到效果 所以就没用）
ps：上述测试 要在服务端上线 h5不上线 不影响线上用户使用情况下 否则最好一起上线 直接在线上测试
5.自定义底部导航
参考如下链接
https://www.jianshu.com/p/27b1fe7043a4
6.自定义顶部导航
https://www.jianshu.com/p/0ea8178a5045
7.动态加载底部导航
https://www.jianshu.com/p/713551c33cc3
8.h5链接、扫一扫打开小程序
https://www.jianshu.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);
})
}
})
}
},
这里注意点：
- 这种判断 取消和 拒绝的判断 按照我这种写法些 网上的不全面
if (e.detail.errMsg == 'getPhoneNumber:fail:user deny' || e.detail.errMsg == 'getPhoneNumber:fail user deny')
- 按钮控制连续点击 isActOn我这里用这个变量控制的 点完按钮变灰即isActOn为true变灰
