小程序脱坑笔记

最近又写了两个小程序，一个是图片处理的，功能就是国庆时候比较火的「加国旗」；另一个是视频相关的，开发期间又遇到一些坑，记录下来，避免以后再次踩坑。

页面传值

传值

例如现在有两个页面 A 和 B，要从 A 跳转到 B，在 A 页面使用 navigator 组件进行跳转，代码如下：

<navigator url="/pages/video-detail/video-detail?videoId={{item.videoId}}">

接收值

那么在 B 页面 onLoad 方法中即可获取到传递的值 item.videoId，代码如下：

onLoad: function (options) {
    var videoId = options.videoId
}

for循环传参

列表跳转详情页

可以参考上面说到的页面传值方式，将列表的 item 使用 navigator 组件包裹起来，设置跳转 url 和参数。

自定义点击

小程序的点击事件设置是在 wxml 中定义点击事件，代码如下：

<view bindtap="getDetail">

然后在 js 文件中完成点击事件的处理，代码如下：

getDetail: function(e) {

}

但是小程序点击方法没办法传递参数，那怎么解决呢？

幸好，小程序组件的公共属性有 data-* 属性，使用如下：

wxml：

<view bindtap="getDetail" data-itemid="{{item.itemId}}">

js：

getDetail: function(e) {
    var itemId = e.currentTarget.dataset.itemid
}

注意：取值的时候，detaset 后面的的变量只认小写。

图片相关

本地选图

即使选择的是单张图，返回的结果也是一个数组，需要自己处理将其取出。

wx.chooseImage({
  count: 1,
  success: function(res) {
    const tempFilePaths = res.tempFilePaths
    var path = tempFilePaths[0]
  },
})

图片处理

使用 canvas 操作图片时，在不同的基础库版本下会有不同的效果，简单说就是可能显示空白，因为找不到图片。

稳妥的操作是先获取图片的信息，然后找到图片的本地缓存路径，使用缓存路径对其进行操作即可，具体代码如下：

wx.getImageInfo({
  src: imgUrl,
  success (res) {
    var path = res.path
  }
})

导航栏

小程序自定义顶部导航栏之后，会影响原生的下拉刷新效果：

• Android 设备下拉会将整个导航栏下拉
• iOS 设备影响较小

要想解决这个问题，有两个办法：

• 放弃自定义顶部导航栏，即可保证原生下拉刷新正常使用
• 使用自定义顶部导航栏，但是需要自定义下拉刷新

文本相关

文本换行

由于数据是后端返回的，且有换行，最开始直接使用的是 WeUI 的 article 组件，文本是包裹在 view 组件内的，不会自动换行，解决的方法很简单，将 view 换成 text 组件即可。

text组件

还是 WeUI 的article 组件里，text 组件书写要写成一行，代码如下：

<view class="weui-article__section">
  <view class="weui-article__h2">这是标题</view>
  <text class="weui-article__p">这是文本内容</text>
</view>

如果格式不对，可能会导致有上边距，很奇怪，但是实际体验就是这样，错误的代码如下：

<view class="weui-article__section">
  <view class="weui-article__h2">这是标题</view>
  <text class="weui-article__p">
    这是文本内容
  </text>
</view>

本文将持续更新，欢迎沟通交流。

欢迎访问的个人博客：掘墓人的小铲子