小程序脱坑笔记
  分类: 开发   评论: 0 条

小程序脱坑笔记

in 开发 with 0 comment

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

页面传值

传值

例如现在有两个页面 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
  }
})

导航栏

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

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

文本相关

文本换行

由于数据是后端返回的,且有换行,最开始直接使用的是 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>

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

欢迎关注我的公众号,及时获取最新文章推送。