在小程序的开发中，遇到过不少的坑，总结一下

1、wxss中无法使用本地图片当背景图

2、关闭开发工具域名校验，可以不在小程序后台配置接口地址，体验版可使用http、ip地址，正式环境必须为https、域名，域名可以带端口号

3、按钮始终有描边，&::after{border:none}

4、小程序动画api，wx.createAnimation的使用，wx.createSelectorQuery获取节点信息

5、在单独的页面使用webview组件，可以跳转外部页面(需配置域名白名单)

6、picker组件的range-key{{'name'}}，需加引号才能正常使用

7、wx.previewImage图片预览api，可保存图片和识别图片二维码，目前只能识别小程序二维码

8、微信自带弹窗按钮回调无法调起分享api，可通过自定义弹窗，给按钮绑定open-type="share"

9、绑定了open-type的按钮，可同时绑定bindtap点击事件，都可以响应

10、wx.navigateTo最多可以跳转十层页面，超过则无法跳转，在不必返回的地方用redirectTo，合理使用这个api

11、textarea组件文字滚动时会穿透fixed的元素，需要将fixed元素用cover-view包裹，如果textarea在弹窗里，设置fix，同时设置展示弹窗时才渲染元素

12、小程序判断当前环境

let host = '';
console.log('version', __wxConfig.envVersion);
let env = __wxConfig.envVersion;
switch (env) {
case 'develop':
    host = 'https://测试版环境域名';
    break;
case 'trial':
    host = 'https://体验版环境域名';
    break;
case 'release':
    host = 'https://线上环境域名';
    break;
default:
    host = 'https://测试版环境域名';
}
console.log(host)

13、cover-view标签自带overflow:hidden;且无法修改，在真机上无效，因为cover-view是原生组件

14、小程序transform动画，使用transition-delay时，在真机上会发生抖动

15、小程序中部分组件是使用客户端创建的原生组件，包括camera、canvas、input、live-player、live-pusher、 map、textarea、video。原生组件和h5组件在不同层级进行渲染，原生组件层级最高，所以无法修改， 部分样式无法应用。cover-view和cover-image是原生组件，本质就是用原生组件包裹h5组件，从而达到层级可控。 是一种hack做法，最好的解决办法是同层渲染，将原生组件绘制到webview所渲染的html中

16、Mac客户端小程序上传图片ApI会对图片名称进行转码，图片前缀为wxfile://tmp_ ,Windows客户端不会对图片名称进行修改，图片前缀为wxfile://temp_

17、taro1.3.37 + mobx4.8.0 , 在view层使用store时必须要解构，否则可能不响应

18、map循环数组时，key必须是唯一的，否则可能导致iphone11及以上机型数据不重渲问题

19、在ios下要隐藏滚动条，必须使用ScrollView标签才会生效

20、Taro 3.5.6在子组件中使用类名获取dom节点高度时，会返回所有节点的信息，可以使用useRef获取当前组件的唯一id，去获取节点高度，实现展开收起效果

1
2
3
4
5
6
7
const query = Taro.createSelectorQuery()
query.selectAll(`#${ref1.current.sid}, #${ref2.current.sid}`)
  .boundingClientRect((res) => {
    console.log(res, '-----');
    setShowFold(res[0].height < res[1].height);
  })
  .exec();