小程序开发汇总

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变灰