最近又写了两个小程序，一个是图片处理的，功能就是国庆时候比较火的「加国旗」；另一个是视频相关的，开发期间又遇到一些坑，记录下来，避免以后再次踩坑。
页面传值
传值
例如现在有两个页面 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>本文将持续更新，欢迎沟通交流。
欢迎访问的个人博客：掘墓人的小铲子