微信小程序的开发踩坑

前言

记录一下在开发小程序的时候遇到的问题，笔记跟坑我都稍微写一点

关于开发的

一. 生命周期和路由跳转

实在记不住( = = ||)，可是用到的概率挺高，因此就索性抄下来了

1.页面的生命周期

• onLoad—-监听页面加载
• onReady—-监听页面初次渲染完成
• onShow—-监听页面显示
• onHide—-监听页面隐藏
• onUnload—-监听页面卸载

2.组件的生命周期

• created 组件实例化，但节点树还未导入，所以这时不能用setData
• attached 节点树完成，能够用setData渲染节点，但没法操做节点
• ready 组件布局完成，这时能够获取节点信息，也能够操做节点
• moved 组件实例被移动到树的另外一个位置
• detached 组件实例从节点树中移除

3.路由跳转

直接截图了

二. setData修改的类型是对象的话

咱们知道小程序更改data里面字段值的话，要这样

this.setData({
    name: '小程序'
})

这种状况比较常见，可是若是是对象的话，要用中括号括起来

this.setData({
['info.isLike']:  true
});

还有一个状况，若是是要修改数组里面某个项的值

let targetIndex = 0;
this.setData({
['messages['+ targetIndex +'].isLoad']:false
})

三. 自定义顶部导航栏

原生的顶部导航栏功能太少，好比没有我的头像，没有回到主页等等。因此不少时候都会要求本身写一个

步骤一：app.json文件写上这句话
加了这句话自带的导航栏就会消失

"window": {
    "navigationStyle": "custom" //加上这句话
}

步骤二：本身写一个组件，高度的话能够参考这样

wx.getSystemInfo({
success: (res) => {
let  device  =  res.platform;
let  statusBarH  =  res.statusBarHeight;

// 自定义导航栏高度,ios设置40px,安卓端48px
if (device  ===  'ios') {
this.globalData.navbarHeight  =  statusBarH  +  40;
} else {
this.globalData.navbarHeight  =  statusBarH  +  48;
}

// 手机状态栏高度
this.globalData.statusbarHeight  =  statusBarH;
// 手机系统
this.globalData.deviceSystem  =  device;
}
});

步骤三：每个页面要padding-top高度去适配这个导航栏组件

<view  class='order-refund_details'  style='padding-top:{{navbarHeight}}px'>

四. 自定义底部导航栏

跟顶部的缘由同样，不少功能没法知足，要自定义，这里提一个点，使用自定义以后，切换页面的时候会有明显的抖动
为了解决这个问题，咱们把一级页面所有变成了组件，用组件切换来代替页面切换,大概是这样

<view  style='flex:1;height:calc(100% - {{showVersionTip?50:0}}rpx)'>
  <CardInfo  visible="{{ current  === 'card' }}"></CardInfo>
  <Mine  visible="{{ current  === 'mine' }}"></Mine>
</view>

五. 暂时没想到，等待补充

关于踩坑的

一. 微信端

1.自动更新是作不到无感知的

版本有更新的话，用户必定会看到弹窗，必定要点一下肯定按钮

2.组件拿不到app.wxss里面的样式

3.data里面直接定义app的global全局参数的话，若是中途变了，可能data里面的字段不会实时更新

global数据若是中途值改变了，页面或者组件里面的data里面初始化的那个值不会改变的，因此要额外处理

data: {
    vipCode:  app.global.vipCode  // vip版本
},

ready() {
// 有时候app全局值改变了,data里面的值没有同步
this.setData({
    vipCode:  app.global.vipCode
});
},

4. canvas画图的图片要先用wx.getImageInfo下载下来，拿临时路径才能用

5. 小程序文本框自带手机键盘的高度，监听focus事件能够获取到

写聊天页面的时候，为了解决输入框要顶上，可是聊天列表不顶上的问题。

<textarea  bindfocus="fixedPosition"/>

page.js
//输入框聚焦时
fixedPosition(event){
//加个延时器保险一下
    setTimeout(() => {
        this.setData({
            fixedScrollTop:  event.detail.height?  event.detail.height:  0, //整个页面的高度往上顶软键盘的高度
            scrollTop:  this.data.messages.length  *  1000 //聊天列表滚动到最低
        });
    });
},

6. 部分机型就算遮罩层也没法阻挡底层页面的滚动，能够在遮罩层的view加一个属性catchtouchmove="ture"

<view  class="qwui-auth_container"  catchtouchmove="ture">

企业微信端

1. 企业微信里分包预加载失效

配置了也没用，不生效，会报错，可是不影响使用

2. 企业微信里中文传递要转码

使用web-view跳转到时候遇到一个问题，这个页面能够分享，分享出去的url路径带了中文，在微信端跳转的时候没问题，可是在企业微信跳转就死活打不开，后来排查问题是中文没有转码

onShareAppMessage() {
return {
    path:  `${this.route}?pathUrl=${encodeURIComponent(this.data.url)}&userId=${wx.getStorageSync('userId')}`
};
}

3. 企业微信里某些异步API速度没有微信快

好比setData这个，企业微信里面若是某些操做要紧跟setData以后，请务必放在setData的回调里面,当时快坑死了，其余像路由跳转，setStorageSync和getStorageSync也要注意

this.setData({
    xxx:  xxx
},() => {
    //请务必写在这里
    xxxx
});

4.使用canvas绘图，在调这个wx.canvasToTempFilePath以前，安卓端须要必定的延时（300ms），否则图片生成不完整

保险起见，微信跟企业微信都加吧

5. echarts画饼状图,在安卓机上，当图案还没画完时，此时点击图片饼状图中间那一块会被染上颜色

已解决，使用cover-view先遮住，防止用户点击，当加载完成再把它隐藏，不能不隐藏，由于cover-view存在时没法拖动

云开发

这玩意也算摸过一次，还行，接口写法也比较简单，不难，目前就发现一个缺点，慢慢慢（不过我以为是由于我用的是免费版的缘由，哈哈）

1. 云函数的网络请求不用https，不用配置域名

2. 云函数里面调用云函数，返回的格式是这样的

在云函数里面console是没用的，看不到输出，只能靠瞎猜

3. 插入和update的操做，返回的数据是没有data的，只有一个id

4. update若是数据改变了的话，返回状态值是1，没有更改的话返回的状态码是0，其实也算成功了

5. 现有项目若是要接通云开发的话