小程序脱坑笔记

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

页面传值

传值

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

<code><navigator>/<code>

接收值

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

<code>onLoad: function (options) {
var videoId = options.videoId
}/<code>

for循环传参

列表跳转详情页

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

自定义点击

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

<code><view>/<code>

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

<code>getDetail: function(e) {

}/<code>

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

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

wxml:

<code><view>/<code>

js:

<code>getDetail: function(e) {
var itemId = e.currentTarget.dataset.itemid
}/<code>

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

图片相关

本地选图

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

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

图片处理

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

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

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

导航栏

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

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

要想解决这个问题,有两个办法:

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

文本相关

文本换行

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

text组件

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

<code><view>
<view>这是标题/<view>
<text>这是文本内容/<text>
/<view>/<code>

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

<code><view>
<view>这是标题/<view>
<text>
这是文本内容
/<text>
/<view>/<code>

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


分享到:


相關文章: