微信小程序开发踩坑记

前言

都说微信开发文档是个乐色，过分了啊！我看是非常乐色……

使用扩展组件miniprogram-component-plus

通过开发文档跳转到github链接, 依然没有任何怎么使用它的提示.
其实使用的方法是和使用npm第三方库一样的. Unbelievable!
npm支持的文档在这儿
现在的微信开发工具默认小程序下面会有子目录miniprogram,所以应该进到这个子目录里再下载, 以tabs组件为例:

cd miniprogram
npm init -y
npm i @miniprogram-component-plus/tabs --save

下载完了以后, 点击工具->npm构建后才能使用. 你会看到多了一个miniprogram_npm目录
在要使用的页面目录的json中定义:

  "usingComponents": {
    "mp-tabs": "@miniprogram-component-plus/tabs/index"
  }

还是说这个tabs组件, 长内容不支持上划! 所以超长的内容还是不要用了.

在wx:for列表循环中, 怎么知道点击的是第几项列表?

反正官方文档中我没找到, 是在官方源码中自己参详出来的. 和vue不同, 不能直接在bindtap中传递参数, 需要通过data-index

<view wx:for="array">
  <view bindtap="tapme" data-index="index">{{item}}</view>
</view>

data :{
  array:['a','b','c']
},
tapme: function tapme(e){
   console.log("序号:", e.currentTarget.dataset.index)
}

data-* (dataset)从wxml向js函数传参

参考事件捕获
按上面的, data-任意都可以. 在bind的函数中, 通过 e.currentTarget.dataset. 来获取

跨页面传参

是通过url传参的, 也就是标准的&a=x&b=y这种方式. 在页面的onLoad(option)函数中, 提取option.x和option.y即可

重要的公告

微信这个公告和蓝牙,获取用户信息等都有很大关系, 需要参照.
setData使用注意, 也比较重要, 如果遇到速度慢, 一定要看看.

超长列表的渲染

超长列表不适合用data中的数据进行常规的渲染, 因为data中数据是全渲染的, 不管array有多大. 此时应使用扩展组件recycle-view, 顾名思义是使用了某种回收技术, 没有全部渲染, 而是把视图外的渲染进行了"回收".
注意这个组件要用npm安装并构建.
recycle-view用起来很不一样,首先数据不在data里维护, 而是单独用createRecycleContext()创建和维护一个ctx对象. 其次,ctx对象有一系列很像Array的函数, 如splice等.

坑来了!

但注意了, 而ctx的append方法表现非常奇诡. 如果在数组arr上用一次append方法, 你会发现后面的ctx.splice方法会直接操作原数组arr! 但如果你用两次append方法, 你就又会发现ctx.splice操作的又不是原数组了!
所以为了表现的一致性, 我建议先append一个空数组[],再append原数组arr, 保证后面的ctx.splice只操作复制数组, 并且同步在原数组arr.splice一次.

ucharts的安装

ucharts使用npm i @qiun/wx-ucharts --save安装,并且npm构建以后, 会发现小程序界面白屏, 提示错误. 此时通过npm uninstall @qiun/wx-ucharts卸载掉以后(不影响构建后的wx-ucharts组件), 就正常可以用了.

微信头像和昵称的获取

据说这个获取接口变了数次, 看这个论坛公告, 很有意思, 截止今天这个公告有88页程序员的留言, 把腾讯都骂出翔了.
总之意思是从基础库2.27.1版本以后wx.getUserInfo和wx.getUserProfile接口都不能用了, 只保留分别填写微信头像和昵称的能力. 这样的话,

微信logManager和RealtimeLogManager功能

微信日志管理确实非常方便, 本地日志LogManager和客服沟通反馈界面直接打通,实时日志还可以进行实时分析. 然而日志是对JSON对象用stringify后存储的, 部分比较复杂的JSON对象很可能存在循环调用情况导致序列化报错, 进而使整个小程序异常. 所以并不是所有能console.log的内容都可以用logmanager的log输出, 不要log输出特别大型的不知道底细的对象. 现在已知listCtx就有这种情况.
LogManager保存5M日志, 存新删旧. RealtimeLogManager 现在属于We分析功能之一, 有基础版和专业版之分.

前言