小程序(包括taro、uni-app等预处理工具)随手记(持续)

日志

  • 2019.01.28:滴滴跨平台统一开发的框架Chameleon于今天开源。相信多端统一的开发形式将日益壮大。

1 配置文件

1.1 backgroundColor

在app.json及各页面的json配置文件中,backgroundColor的配置并非如h5一样改变整体页面的背景色,而是窗体背景颜色(页面上下拉时可看出)。要设置页面背景色还得单独写css。

2 API

2.1 图片自适应

一直以来小程序的图片自适应都是坑,大部分需要通过找到对应的mode来进行调整。

模式 说明
缩放 scaleToFill 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
缩放 aspectFit 保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
缩放 aspectFill 保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
缩放 widthFix 宽度不变,高度自动变化,保持原图宽高比不变
裁剪 top 不缩放图片,只显示图片的顶部区域
裁剪 bottom 不缩放图片,只显示图片的底部区域
裁剪 center 不缩放图片,只显示图片的中间区域
裁剪 left 不缩放图片,只显示图片的左边区域
裁剪 right 不缩放图片,只显示图片的右边区域
裁剪 top left 不缩放图片,只显示图片的左上边区域
裁剪 top right 不缩放图片,只显示图片的右上边区域
裁剪 bottom left 不缩放图片,只显示图片的左下边区域
裁剪 bottom right 不缩放图片,只显示图片的右下边区域

如果要实现宽固定高度自适应,最好还是设置个高度比较稳妥

2.2 获取设备信息,如宽度

在某些特殊场合需要获取屏幕的宽度,如设置canvas的with/height等:wx.getSystemInfoSync/wx.getSystemInfo

如:

1
2
3
4
5
// 使用了taro,微信原生则为wx.getSystemInfoSync()
try {
const res = taro.getSystemInfoSync();
console.log(res.screenWidth); // 屏幕宽度
} catch (e) {}

2.3 iphone X系列适配

还是通过获取设备信息接口,如

1
2
3
4
5
6
const res = taro.getSystemInfoSync();
if (~res.model.toLowerCase().replace(/\s/g, '').indexOf('iphonex')) {
this.setData({
isIphoneX: true
})
}

根据isIphoneX字段来添加className并以此作为iphone X系列的hack

3 组件

3.1 覆盖原生组件的cover-viewcover-image

小程序中的map、video、canvas、camera、live-player、live-pusher组件为原生组件,原生组件在小程序中的层级最高,因此小程序页面中的其他组件无论设置z-index为多少,都无法盖在原生组件上。这也导致了项目中出现了如下的情况(其中按钮按预期固定在页面底部)。

解决方法:使用cover-viewcover-image组件,官方文档cover-view只支持嵌套cover-view、cover-image,可在cover-view中使用button。

使用

这也导致了项目中出现了如下的情况,其中按钮按预期固定在页面底部。

layers

其中wxml:

1
2
3
<canvas />
<button class="u-fixed m-home"><image src="1.png"/></button>
<button class="u-fixed m-share"><image src="2.png"/></button>

wxss:

1
2
3
4
5
6
7
8
9
10
11
.u-fixed {
position: fixed;
z-index: 99;
right: 4%;
}
.m-home {
bottom: 250px;
}
.m-share {
bottom: 100px;
}

解决后:
layers

1
2
3
<canvas />
<cover-view class="u-fixed m-home"><button><cover-image src="1.png"/></button></cover-view>
<cover-view class="u-fixed m-home"><button><cover-image src="2.png"/></button></cover-view>

wxss:

1
2
3
4
5
6
7
8
9
10
11
.u-fixed {
position: fixed;
z-index: 99;
right: 4%;
}
.m-home {
bottom: 250px;
}
.m-share {
bottom: 100px;
}

在外层添加了cover-view组件,并将image组件替换为cover-image组件后,页面显示便正常了。

  • Taro中对于组件为:cover-view -> CoverViewcover-image -> CoverImage

不过貌似android还是有坑,得再看看。

4 预处理工具

4.1 taro写法的优势(React的优势)

微信小程序的wxml、wxss、js、json配置的分离写法不但造成了无法混合的不灵活,也造成了一定的学习成本。在小程序如日中天的当下,为了减小小程序开发的学习成本,越来越多的团队开始了多端统一开发这种形式的研究,当下最热门的便数taro、uni-app了。这些工具以对h5开发更加友好的方式提供了一种小程序的开发方案。
小程序与React相比,类似的点有很多:

  • 生命周期相似
  • 修改数据也是需要调方法,setState()
    当然,其数据模板毋庸置疑更像Vue的语法,但模板终将转换为语法树,数据模板的差异可以得到解决。并且taro几乎完全保留了React的语法,这点是uni-app类Vue形式的工具难以做到的,虽然taro打出的h5包过大这个问题很难解决,但本人还是更喜欢taro+TypeScript这种形式来开发小程序。

4.2 taro/uni-app的原理

虽然taro和uni-app分别站了React和Vue两大不同的阵营,但其运作原理相同。

1
源码 -> 词法分析 -> 语法分析 -> 语义分析 -> 转换操作 -> 终端代码