小程序开发总结

前言提要

做了一波欲仙欲死的小程序(:з」∠)以下总结一波。

新做的小程序使用了Taro。其实我纠结了好久用mpvue还是wepy还是Taro。事实证明还好没用wepy = =。 差点就为了方便超代码而使用了wepy。很难受【。

选用Taro最大的原因是因为是它是react-like的，然后写起来果然很爽。嘻嘻。

当然实际写的时候也感觉自己非常的犹豫，感觉很不ok。下次开发时一定要事先了解业务的发展方向。这一期就很单纯的没有上数据管理【【【。纯用globalData控制数据。感觉自己很弱智(:з」∠)

下次无论发生什么都要把数据管理上上去！！ > <

另外一提，之后准备使用Redux。因为感觉Taro对mobx的限制，有点Redux。→_→

既然Redux是早就支持了，所以我相信他是OJBK的嘻嘻。

调试

不知道为什么我的开发工具非常不OK。加了本地代理之后调用开放能力和上传就会疯狂报错。一开始还以为是框架有问题。xswl。

然鹅使用非本地代理就没有问题了。当然考虑到模拟器调试和真机调试是有一定区别的，所以手机配代理然后再手机上预览调试我觉得问题也不大。

但是我就非常觉得是ZanProxy的问题。有空找到底是为什么。

兼容

在IOS9和IOS10上，小程序部分页面就会白屏掉。

在真机上debug之后发现报错是 page[x] in not found.May be caused by :1. Forgot to add page route in app.json.2. Invoking Page() in async task.

因为这不是每个设备都有这个问题，所以定位是兼容问题。最后经过一番测试之后发现是 page 在 app.json 中配置顺序。 最好是二级页面写在一级页面后面，三级页面写在二级页面后面。但是也没有发现其中的准确的规律。只能疯狂调整路径配置的位置找到最佳的顺序。

分享

这个也是目前测试下来发现只有iPhone上有。

场景是这样。分享的路由带着一坨query。然而在页面跳转的过程中，query还是会挂在路由上。非常奇怪。

大概是这样:

理想： A.query -> B -> A 现实： A.query -> B.query -> A.query

在加上我把获取query的逻辑加在了onShow上，导致打开这个页面就会再获取最开始进来时的query。非常崩溃【【【

当然因为页面跳转的时候会经过onLoad。所以把逻辑移动之后修复了这个问题导致的bug。

自定义Tabbar

实现了一下新(?)特性，自定义Tabbar。

当然最后发现需要这样写只会因为我弱智【【【 非常自闭

配置方法是在app.json中的把tabBar配置为custom: true

然后增加一个文件夹custom-tab-bar。但是因为Taro没有对自定义Tabbar做很好的支持。

所以我的做法是新增一个custom-tab-bar文件夹，然后通过编辑配置，把这个文件夹编译并整个拷贝到编译后的文件夹里面。

然后我在写的过程中发现一个问题。当我切换页面时尝试切换高亮的tab时。只有图片被高亮了，文字没有被高亮。然后并没有找到是为什么。active的时候图片确实替换了，但是class没加上，很迷。

最后我的解决方案是，把图案和文字切在一张图片里面。

自定义NavigatorBar

因为需要做胶囊。所以使用了自定义NavigatorBar。也是在app.json里面把navigationStyle设为custom。

但是要获取胶囊正确的位置就很迷了。

一开始我就直接在模拟器上用绝对定位，没有用任何的经验值和计算。然后再安卓和iPhoneX上胶囊就飘了。

然后我先是使用wx.getMenuButtonBoundingClientRect()获取右侧胶囊的位置，然后从而计算出我们需要的胶囊的位置。

【然后很迷的就是这个方法在真机调试上会爆炸，然后页面打不开。try catch都防不住【【【

最后经过我的一番真机测试，最终使用了经验值，使胶囊保持在一个正常的位置。

一个是NavigatorBar可以分为iPhone是44px，安卓48px。 另外一个是计算胶囊的top时：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

const { statusBarHeight } = Taro.getSystemInfoSync()
const canUseMBBC = Taro.canIUse('getMenuButtonBoundingClientRect')
let navTop = '26px' // 一个默认的经验值
const isIPhone = model.indexOf('iPhone') > -1
const isIPhoneX = isIPhone && model.indexOf('X') > -1
if (canUseMBBC) {
	// 顺便一提Taro里面没有封装wx.getMenuButtonBoundingClientRect，所以就直接用原生的
	// @ts-ignore
	const {top, height} = wx.getMenuButtonBoundingClientRect()
	// 如果是安卓的话就要减去状态栏的高度，不然就会因为top太小而看不见胶囊
	// 减去29是因为我们的胶囊设计高度是22px，然后右边的那个胶囊要下移个7px
	navTop = (height - 29) + top - (isIPhone ? 0 : statusBarHeight) + 'px'
} else {
	navTop = isIPhone ? isIPhoneX ? '53px' : '29px' : '11px'
}

• Next Post →