小程序开发中注意的细节

1.绑定变量的语法，各不相同。

//绑定style中的height变量

  <scroll-view scroll-y style="height:{{height}}px;">

//绑定class中的变量

  <view  class="tab-item{{curTab == 2 ? ' btnActive' : ''}}">

//事件绑定是不使用双花括号,事件中如果传递的值是变量却需要用双花括号

  <view @tap="doTab(2)" >
  <view @tap="onTag('{{item.name}}')"
  //组件传值也是不使用双花括号的
  <Bdmap :title="mapTitle"></Bdmap>
  // 循环绑定变量k也是是不需要花括号的
  <repeat for="{{list}}" key="index" index="index" item="item">

1. 普通循环标签事件,外层容器加display:block,循环内容加display:inline-block.并且设置一个40rpx的高度。会有神奇的样式效果出现，文字出现在了块级元素下方。这个是什么鬼？这个问题是因为你使用了text的标签变成了inline-block，如果换成view就正常了。

    <view class='tag' style="display:block">
    <repeat for="{{tagList}}" key="index" index="index" item="item">
        <text @tap="onTag('{{item.name}}')" style='height:40rpx;display:inline-block'>
            {{item.name}}
        </text>
    </repeat>
    </view>
   

另外还有就还是在text标签中如果使用&nbsp的时候记得还要添加decode="{{true}}"属性。

3.canvas 在手机端适配有两个bug，第一个是苹果手机中默认screenScroll为false，当操作canvas 以后屏幕就没有办法再上下滚动了，出现了类似死机一般的效果。但是安卓手机操作很正常。解决方法是，需要你再苹果手机结束canvas绘图操作后，手动将属性screenScroll改为true。让屏幕可以继续除滑动了。如果你只是满屏显示不需要屏幕上下滑动的需求，就请忽略以上内容。
第二个坑就是苹果手机将canvas转换成二进制图片后，苹果手机转换后的图片居然是180度颠倒的，安卓手机是正常的。这个bug的解决方法是将苹果手机中生成的图片在上传到自己的服务器之前旋转180度，具体的做法如下。

      wx.canvasGetImageData({
                canvasId: 'canvas',
                x: 0,
                y: 0,
                width: 350,
                height: 200,
                success(res) {
                    let platform = wx.getSystemInfoSync().platform
                    if (platform == 'ios') {
                        // 兼容处理：ios获取的图片上下颠倒
                        let result = that.reversedata(res)
                    }
                    // 3. png编码
                    let pngData = upng.encode([res.data.buffer], res.width, res.height)
                    // 4. base64编码
                    let base64 = wx.arrayBufferToBase64(pngData)
                    let base64Image = "data:image/jpeg;base64," + base64
                    let sign = base64Image
                    let state = that.state

                    let pages = getCurrentPages();
                    if (pages.length > 1) {
                        //上一个页面实例对象
                        let prePage = pages[pages.length - 2];
                        //关键在这里,这里面是触发上个界面
                        prePage.changeData(state, sign) // 不同的人里面的值是不同的，这个数据是我的，具体的你们要根据自己的来查看所要传的参数
                    }
                    wx.navigateBack({
                        changed: true
                    })
                }
            })
          //图片翻转的方法
      reversedata(res) {
        var w = res.width;
        var h = res.height;
        let con = 0;
        for (var i = 0; i < h / 2; i++) {
            for (var j = 0; j < w * 4; j++) {
                con = res.data[(i * w * 4 + j) + ""];
                res.data[(i * w * 4 + j) + ""] = res.data[((h - i - 1) * w * 4 + j) + ""];
                res.data[((h - i - 1) * w * 4 + j) + ""] = con;
            }
        }
        return res;
    };

4.第四点是开发者需要注意的。微信登录的时候一定要先获取用户的code，再获取iv和encryptData的数组否则，要两次才能登录成功哦，文档中并没有强调，开发中如果不仔细阅读文档很容易忽略掉，造成不必要的时间浪费。具体方法如下可以在页面加载的时候获取code.点击登录的时候在获取iv和encryptData数据。

    <button class="btnwx" open-type="getPhoneNumber" bindgetphonenumber="doWxLogin">微信手机号快捷登录</button>     
     async doWxLogin(e) {
            let self = this;
            let login = await api.wxLogin({
                query: {
                    code: self.code,
                    iv: e.detail.iv,
                    encryptData: e.detail.encryptedData
                },
                method: 'POST'
            });
            if (login.data.code === 0) {
                wepy.setStorageSync('mobile', login.data.data.mobile);
                wepy.setStorageSync('userInfo', login.data.data);
                wepy.setStorageSync('token', login.data.data.token);
                await tip.success('登录成功').then(() => {
                    // goUrl(self.url || '/pages/mine/index')
                    wx.switchTab({
                        url: '/pages/mine/index'
                    })
                })
            } else {
                // tip.error(login.data.message)
            }
        }
  //页面加载的时候获取code
  async onShow() {
        let ret = await wepy.login();
        console.log(ret)
        this.code = ret.code
    }