uniApp 小程序项目总结-10-23

总括：

由于公司战略改变，uniApp 小程序项目暂时告于段落。这段时间开发uniApp小程序项目经历了很多内容，因此进行一些总结。
总体来说，使用uniApp 进行小程序开发的选择还是很不错的。使用vue语法的uniApp开发灵活度有很大的提升；条件编译也使跨平台开发有了不错的体验；当然开发过程中也遇到不少坑点，有些搞定了，有些放弃了。

具体来说

使用vue语法的uniApp开发灵活度有很大的提升；

vue的特性导致了它在小程序开发中极大的减少了开发难度。基本语法的方便就不过多说了，主要提到两点store和vue.mixin:

store: 刚开始使用全局变量，全局方法的使用的是小程序的getApp() 和globalData，但是发现使用store也可以实现全局之后，很多地方都同时使用了两种方式。但是后来到了要将项目同时支持小程序版本和做成插件版本时，由于插件版本的限制，getApp() 和globalData不可用了，这样store 的优点就突出出来了。后来干脆就直接使用了store 替换了项目中所有的getApp() 和globalData。

vue.mixin:但是此时store的使用依然有一些麻烦，很多地方需要各种引入和打点调用。最近才发现vue.mixin真是强大，通过它可以将很多内容混入到所有vue对象中。因此就可以将store中的全局内容直接混入到页面和组件的data中，页面和组件就可以直接进行调用，极大的简化了代码。当然vue.mixin还可以实现很多内容，比如所有小程序页面添加右上角分享功能等。

当然vue是基于js的，小程序也是基于js的，js的强大就不用多说。另外很多内容都可以抽成js单独整理使代码看的更整洁。还有一点就是js的弱语言特点可以使它极大的帮助开发过程中问题的处理，比如开发插件或者其它内容时会遇到需要全局处理内容此时有一种技巧思路是直接给uni/wx/my等这些对象添加属性内容，直接在main.js或其它地方使用uni.xxx = xxx的方式给uni添加属性或者方法，由于uni是个系统全局对象，因此就使得小程序中很多无法实现的功能得到实现，比如插件调主程序方法的实现或者全局内容等。

条件编译也使跨平台开发有了不错的体验；

uniApp有一个很不错的特点就是条件编译，主要是实现不同平台编译成不同代码，以便在各个平台运行。
但是随着项目的深入，项目可能要发布多个版本、适配多个平台（微信、支付宝、企业微信、淘宝等）、开发成插件等，这样的话在来回切换时系统的条件编译可能就满足不了业务需要了。这个时候往往需要一些新的自定义条件编译方式。
起初刚开始是要开发插件，就学习到了uniapp2wxpack这个uniApp开发工具，其实通过研究后发现它也vue的内容。它实现了uniApp编译成小程序插件的功能。通过它， 我们了解到了自定义条件编译的方式，其实就是通过命令编译各个文件，然后进行处理留下需要的去掉不需要的。
由此就想到了可以通过js遍历全部项目文件，然后再根据特定标识去删除或保留各个文件的每行代码的方式去实现自定义条件编译。目前阶段是基本实现了可以自己定义编译条件的方式去进行项目编译，通过这样极大减少了各种切换的处理。但是目前只做到了当前内容，其实再做一些界面操作或者和IDE结合的一些内容从而更加简化操作。

当然开发过程中也遇到不少坑点，有些搞定了，有些放弃了。

uniApp 开发的时间不长，但是遇到坑点也不少，有些解决了，有些没解决或放弃了。
首先uniApp开发微信小程序和支付宝小程序的感觉其实很奇妙。微信貌似兼容的更多一些，导致很多css写的不规范或者不好的点，在微信运行依然很不错。而支付宝貌似更规范一点，就导致很多css写的不好在支付宝上运行就显示不对了。所以总体感觉每次要适配支付宝小程序时总有一种改bug的感觉，支付宝适配好之后，微信都基本还没问题。
坑点：

• 微信授权登录是两个接口，授权需要绑定按钮事件（open-type="getUserInfo" @getuserinfo="getuserinfo”），支付宝授权登录是一个接口。微信授权信息需要解密，支付宝是明文
• echarts uniApp使用时环形图ios交互没问题，安卓交互有问题
• 分享给好友微信需要按钮绑定open-type="share”事件
• 系统tabbar无法自定义，只能修改文字和图标，无法修改地址
• canvas画布层级高，到这需要用到弹框的地方不能用canvas，否则canvas会遮挡弹框
• background-image不支持本地动态图片地址
• props为单向数据流，无法实现双向绑定，需要子组件中使用watch监听，而且使用自组件是使用了某个属性则不会使用默认值，必须传值
• 富文本数据中图片需要手动代码替换解决图片适配大小问题
• data中生命对象类型变量，需要将对象中进行键值对进行初始化，如果想动态对象内容，则需要data中不声明为对象，再之后再进行对象值替换
• 微信小程序无法判断开发环境、生产环境最后使用ext解决
• 淘宝小程序需要手动加"navigationBarForceEnable":true，否则没有二级导航栏
• uniApp 中可以通过page 设置css变量，但是由于没有document概念，因此无法修改css变量
• uniApp 可以通过/deep/ 穿透实现插件样式修改
• 全局通讯使用off$once ,注意使用off释放监听
• creat中处理页面script中对组件prop赋值数据时需要使用setTimeout，否则可能获取不到数据
• onlaunch 不可以重定向加载页面