项目背景:
由于公司领导想要寻找一个能一套代码开发多端程序的框架,在团队开了一顿“肯得鸡”会议后,决定要用uni-app来搞,目标是用uni-app重构线上微信小程序“皆电社区”,生成各端小程序、h5、安卓app、ios app,然后给出的时间是两周多点的时间,包含各端上线的了,这个时间一听还是有点鸭力阿。
项目配置:
项目的配置人员是3个前端(两男一女,女的已婚已育,55555) + 1个ios + 项目组长,人员技术方面,前端都是有vue的经验和小程序经验,然后项目组长是负责协调各端账号和资源的调配,然后我是负责搭项目结构和编写公共插组件以及负责社区发帖流程相关页面,女生负责个人中心页相关,另一男前端负责登录和分享相关,ios负责了解打包app相关。然后代码托管是git,master下分出了dev,然后各个人再从dev分出各个人的分支,到时就合并到dev这个分支
项目需求:

项目启动:
启动时大家首先都先去看了下原微信小程序版本的源码和uni-app的文档,熟悉了下大概交互和页面逻辑,然后负责各自模块开发。由于uni-app是背靠vue的,然后我这边是把项目结构搭出来是综合了vue项目和小程序项目的结构,初步给出了以下结构:

这些目录和vuecli的差不多,大概讲下
static目录是放置一些webpack打包时不用处理的文件,打包时直接copy就行的
public是放置一些公共的文件或者api,封装的插件
config是放置项目的接口配置文件
store是vuex相关,gitignore里配置了免除unpackage文件的上传,vue.config.js作用是增加一些对webpack打包时的控制
项目过程:
...............此处省略几万个字,由于uni-app的代码风格是跟vue一模一样的,所以一顿撸代码就行了,业务逻辑和交互什么的,没啥特别。
项目过程遇到的坑:
- 首先vue的一些语法在uni-app这框架下是不适用的,具体要上uni-app官网看下对比,还有就是vue的表现不一样,例如我在for一个数组时,拿了item.id作为key,但是由于id是生成的无规则的长字符串,我向一个数组新增内容时,发现视图表现错乱,根本和数组的顺序不一致,用了vue.set也没生效。。。后来把key的值用index来填,视图正常了
- 各端小程序的差异化,最多异样的就是字节跳动和百度的小程序了,支付宝和qq小程序和微信小程序是比较少的异样
- 百度小程序里面遇到的坑有canvas画图功能,canvasToTempFilePath的方法画出来的图保存报错,报"解析失败,需要检查调起协议是否合法",
- 百度小程序中request接口返回的数据是已经parse的了,后端接口返回的对象是值是对象字符串都会自动帮你格式成对象
- 支付宝端的坑是如果后端设了两个cookie,只能拿到最后一个cookie,向支付宝反映后,支付宝这边说会在11月底fix
- ios端使用navback是会触发上级页面的onshow生命周期,其他端是不会触发的
- uniapp中h5端的cookie问题,uni-app的request方法是不能带cookie的,解决方法有两种,一是引入axios,而是使用xhr来请求
- 在抖音里的头条小程序使用uniapp的弹窗api如果涉及蒙层,蒙层变成抖音logo。。解决方法是手写弹窗和蒙层
- uniapp获取节点信息uni.createSelectorQuery()的坑,支付宝和头条小程序是获取不准的,支付宝直接连节点信息为undefined了,头条获取到都是屏幕高度,最后使用了selectAll来解决
最后总结:
uni-app其实用起来是不难的,难就难在怎么兼容各端各平台的,为了兼容在代码加了不少#ifdef,还有一个难的点就是app打包了,由于前端不太熟悉安卓或者ios这些打包机制,只能按照uni-app的打包教程来配,但教程又写得很粗糙和不及时更新,像安卓开发工具androidStudio早就更新了,但是uniapp但教程还是没更新,只能靠自己摸索了,虽然这次项目我们有个ios的在旁边,但是还是遇到很多坑。然后我自己也摸了好久,终于打包出一个安卓的apk了(为了想学习和体验下这个app端),ios同学打包安卓出来的是14.5M,然后我打包出来的是18M,这就是专业和我这些不专业搞的差别了,不过我还是很满意了,毕竟第一次弄和接触安卓开发,后面我会发一个android的打包过程给大家。