小程序一点记录

文章提纲

1. 开发前，初期的难点与思考
2. 开发中又出现的问题以及解决方法
3. 开发完，分别对腾趣， 对小程序，对wepy还有哪些不足

年后先做了个简单的小程序活动页面，测试恋爱忠诚度的，用的是小程序原生开发的；

3.26前一个星期做腾趣商城小程序的项目规划，划分了差不多22个任务，两人分工，其中难点有：

• 使用wepy开发的模式转变，还好之前用原生做过，对问题分析略有帮助
• 定制功能各方面的不确定性，上传用户图片，手势操作，获取定制元素的大小位置等信息
• 对组件化开发还不够了解，如何划分组件更合理
• 两个人开发，代码如何布置，防止文件冲突，暂时用svn

开发中结合github上一个wepy的项目，用了它的封装好的几个函数，主要是http.js,(这里需要写对http.js的改动)；还有目录结构

components
    activity
    main
    subject
images
mixins
pages
    activity
    main
    subject
styles
    custom
    lib
app.wpy
config.js

遇到的问题与解决

1. 小程序文件限制为2mb，图片普遍较大 （解决办法：图片存到线上服务器，使用统一的图片地址前缀https://api.51app.cn/webPage/tq/xcx/images，style和script要分别引入）
2. 定制页面先在小程序页面上实现了上传图片和手势操作（刚好是alloy_finger的小程序版），以及获取图片的位置大小等信息，图片清晰，操作也顺畅（在我自己的6s上，安卓不知怎么样）；后来考虑到字体文件过大只能用本地的文件，还有后面多个元素的操作，问题的添加等问题，遂用跳转到webview的方式来是实现定制，此方案同样有需要解决的问题，一是不能用input type=file来上传图片，一点就退出了小程序，只能用微信jssdk的api，可它上传后只返回一个图片路径或是微信服务器上的id，无法获取到图片的信息，不能用原来上传图的接口以及之前图片旋转的问题，故通过传线上图片id给后台下载图片后获取到Orientation来修复角度；
3. 跳转webview时要把token传过去，防止两边的不统一
4. 属性选择组件结合web上的还算顺利
5. 小程序不能直接识别公众号图片二维码，小程序码倒是可以
6. banner上的可能出现跳转url的地方，全部判断是否有goodsId，没有就不显示
7. 图片是 input记得要闭合
8. 对于点击按钮请求接口后才跳转页面的要加防抖，如立即购买的按钮，疯狂点的话，会出现多个确认订单页面；一开始是想到用个变量来控制，变量为true就return，初始是false，点击一次后设为true，请求不管成功失败complete后再设为false；后来想到和webview的定制页面一样用个loading层，刚好可以用微信的 wx.showLoading({
   title:'',
   mask:true
   })；记得加上mask:true，阻止穿透，再就是这个它不是自己消失的，最后在请求complete里面wx.hideLoading()
9. 上面的问题又想到好办法，直接把这个loading加到http.js里面的请求中，那这样就会和之前做的loading层重复，选择去掉原来loading层的菊花图，白色遮罩还是要有；这个办法真好，不用一个个页面加，统一修改了，再就是给了用户提示也不错
10. 微盟的支付，有两种方式，一是自己已经有了开通了微信支付的帐号绑定即可，二是委托微盟代申请的小程序支付，其中还要填企业的营业执照，还有银行卡等信息，应该是他们先收钱然后再打到商户账上，貌似对个人不能用；微盟套餐的价格没有直接看到，是申请后他们再联系。功能很多，确实很方便，生成的页面还挺好看的，我们要是要做这一套，估计够呛。感觉我们自己的小程序都可以直接用他们的。。。
11. 下拉刷新不回弹；在真机上回弹会超过顶部再往下回来；下拉卡的那下要不就是微信设计的，下拉后顿一下再回弹回去

下拉刷新默认是不开启的，那就是页面自己的弹性滚动，感觉还不错
开启的话window加上enablePullDownRefresh: true，page再加onPullDownRefresh
解决不回弹：
要不就是在onPullDownRefresh里面再初始化一次页面
要不就是加上wx.stopPullDownRefresh()
onPullDownRefresh() {
  this.initPageData()
  //去掉这个页面就不会弹过顶部，后又发现去掉initPageData里的ajax请求也可以；
  //最后发现是http.js里wx.showLoading导致的
  //那就想办法判断是否是下拉刷新触发的ajax，是就不loading
  
  wx.stopPullDownRefresh(); 
  //原来http.js在请求complete后有写这个，难怪上面那个有用，那就不用加这个了
}


//那就加个参数pullDown来判断，true表示来自下拉刷新
//一开始想到在ajax与url平级的地方加这个pullDown，然后在下拉里加个参数
onPullDownRefresh(){
    this.initPageData(true)
}
initPageData(pullDown){
    this.$get({
        url: '***/today/list',
        pullDown:pullDown||false
    }。。。
}
//上面办法每个页面改动较大

//可以在globalData加个全局变量isPullDown；
//然后在http.js里面获取this.$root.$parent.globalData.isPullDown
//在onPullDownRefresh设置isPullDown为true，然后延迟100ms再设为false
//要保证在这100ms内由下拉刷新引起的ajax都要触发，设为true操作是异步应该不要紧，除非有的ajax也有setTimeout

onPullDownRefresh() {
  this.$root.$parent.globalData.isPullDown = true
  setTimeout(()=>{
    this.$root.$parent.globalData.isPullDown = false
    this.$apply()
  },100)
  this.initPageData()

}

2018年5月10日 22:30:48 解决下拉不流畅最终方案

关键点：由于下拉刷新时有ajax，又触发了wx.showLoading导致的,方案为在ajax里判断是否处于下拉刷新的状态

然后再封装一下放到公共base.js里，页面引用下就都可以用了
后将变量名改为hideWXLoading，函数名改为setHideWXLoading
是为了方便用到其他也要隐藏微信loading的地方，如购物车加减后会出现两次
//设置隐藏微信的loading
setHideWXLoading(){
    this.$root.$parent.globalData.hideWXLoading = true
    setTimeout(()=>{
      this.$root.$parent.globalData.hideWXLoading = false
      this.$apply()
    },500)
}
只需要改为
onPullDownRefresh() {
    this.setHideWXLoading()
    this.initPageData()
}
暂时不知道如何统一设置所有页面的onPullDownRefresh

我看京东小程序的下拉的那三个点是由小变大的，微信默认的没有大小变化
我怀疑京东的下拉刷新的弹性效果是自己单独写的，找找看有没有这样的库

找到个 微信小程序动画能力研究（踩坑、iscroll源码解读）

test({aa=22}){
  console.log(aa)
}
参数为对象的话就不能传空了
this.test({})

13. 下拉后未等页面会弹点了其他页面再回到上个页面，一直处于下拉刷新的状态，不自动恢复
14. wx.getUserInfo()注意：此接口有调整，使用该接口将不再出现授权弹窗，请使用 引导用户主动进行授权操作
    
    可以考虑一进去弹一个自己的弹窗，让用户点了去获取授权
    
    后发现可用open-data去直接拿到头像和昵称，获取token的流程不变，==那还要getUserInfo干啥==，那些用户信息都能直接用了
    所以先把之前获取用户信息的代码去掉，放在这防止以后有用

// 获取用户信息
getUserInfo(cb){
  let that = this
  wx.getUserInfo({
    success:function(res) {
      cb(res)
    },
    fail:function(){
      wx.getSetting({
        success: (res) => {

          if(res.authSetting['scope.userInfo']){

              wx.getUserInfo({
                success: function(res) {
                  cb(res)
                }
              })

          }else{
            wx.showModal({
            title: '',
            content: '检测到您未打开微信用户信息授权，开启后即可进行下一步操作',
            success: function(res) {
              if (res.confirm) {
                wx.openSetting({
                  success: (res) => {
                    that.getUserInfo(cb)

                  }
                })
              } 

            }
            })
          }

        }
      })


    }
  })
}
//在initPageData中
that.getUserInfo(function(res){
  let userInfo = res.userInfo
  that.userAvatar = userInfo.avatarUrl
  that.userName = userInfo.nickName
  that.$apply()
  
})

需要改进

1. 需要多试试小程序的功能，如模版消息、客服对话等
2. 了解小电铺、微盟等小程序服务商，看他们是如何实现的，用户小程序的管理、支付等
3. 尝试小游戏，乘着现在这股风
4. 首页进去很慢