uniApp的踩坑之旅

项目背景：

因为公司领导想要寻找一个能一套代码开发多端程序的框架，在团队开了一顿“肯得鸡”会议后，决定要用uni-app来搞，目标是用uni-app重构线上微信小程序“皆电社区”，生成各端小程序、h五、安卓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小程序和微信小程序是比较少的异样

1. 百度小程序里面遇到的坑有canvas画图功能，canvasToTempFilePath的方法画出来的图保存报错，报"解析失败，须要检查调起协议是否合法"，
2. 百度小程序中request接口返回的数据是已经parse的了，后端接口返回的对象是值是对象字符串都会自动帮你格式成对象
3. 支付宝端的坑是若是后端设了两个cookie，只能拿到最后一个cookie，向支付宝反映后，支付宝这边说会在11月底fix
4. ios端使用navback是会触发上级页面的onshow生命周期，其余端是不会触发的
5. uniapp中h5端的cookie问题，uni-app的request方法是不能带cookie的，解决方法有两种，一是引入axios，而是使用xhr来请求
6. 在抖音里的头条小程序使用uniapp的弹窗api若是涉及蒙层，蒙层变成抖音logo。。解决方法是手写弹窗和蒙层
7. uniapp获取节点信息uni.createSelectorQuery()的坑，支付宝和头条小程序是获取不许的，支付宝直接连节点信息为undefined了，头条获取到都是屏幕高度，最后使用了selectAll来解决

最后总结：

    uni-app其实用起来是不难的，难就难在怎么兼容各端各平台的，为了兼容在代码加了很多#ifdef，还有一个难的点就是app打包了，因为前端不太熟悉安卓或者ios这些打包机制，只能按照uni-app的打包教程来配，但教程又写得很粗糙和不及时更新，像安卓开发工具androidStudio早就更新了，可是uniapp但教程仍是没更新，只能靠本身摸索了，虽然此次项目咱们有个ios的在旁边，可是仍是遇到不少坑。而后我本身也摸了很久，终于打包出一个安卓的apk了(为了想学习和体验下这个app端)，ios同窗打包安卓出来的是14.5M，而后我打包出来的是18M，这就是专业和我这些不专业搞的差异了，不过我仍是很满意了，毕竟第一次弄和接触安卓开发，后面我会发一个android的打包过程给你们。