记下uniapp开发一个次过程心得

记下uniapp开发一个次过程。

概念
开发环境
c端架构
s端设计
开发心得
参考资料

概念

Uniapp 从官方的意思是基于vue语法一套代码能编译出多端 h5 app端小程序端. 嗯看起来很美好但建议如果做什么产品就选定对应技术为好从官方代码那边只能通过#if #end 之类强制分离写个h5就用自家的脚手架小程序也有官方的demo 当然app的话 apicloud也用过 weex rn也体验过在众多hybird技术中也是一流的技术毕竟学习还是比较简单效果也不错打包也容易嘛

为了配合下面的安装环境理解这里还是要介绍下个人理解的uniapp 它其实大概就是公版的小程序(公版显卡) .

微信小程序支付宝小程序等等是基于公版加上自己独有的一些特性而变成的所以语法非常类似. 从app角度说就是一个支持小程序功能但没有什么任何页面显示的空的App (官方统称标准基座) 可以理解微信里只有小程序这一个功能我们做的所有页面功能都是让这个小程序越来越充实壮大换句话说做得好确实连微信也能模仿出来但用户角度是感知不到的还是感觉就是一个app

前面提到标准基座那是官方提供的官方也提供了测试证书供体验但官方可不会好到给每个app都配置不一样的基座所有一般新人开发看到的都是一样的app图标一样的启动界面只有里面页面才是开发者能修改的除此之外一些app核心如推送版本升级定位支付在官方送的版本上很难体验出来. 官方也提供了解决方案那就是自定义基座 . 在自己基座上就可以开展高级功能定制化功能. 相应的你必须拥有更多的开发条件比如ios 安卓证书 xcode模拟器安卓x86模拟器等等传送门

说了那么多大概就是如果你只是想看看uniapp性能之类的做个demo看下效果或者纯page页面开发用官方的足矣但是如果要真实上架的一定要用自定义基座基础上开发特别适合前端开发同学们对原生不是很懂的官方也提供了插件市场提供一些实用的插件可直接类似vue插件一样用不过有些要花钱

开发环境

基本

Hbuiler：打包工具。配置打包参数（这点我喜欢apicloud可以云打包这个有点太捆绑了...用他们家产品就要装他们家软件还要注册他们家的号）
真机最好iOS 安卓都有：插上去运行就可以跑了
ios发布证书: 最低个人688rmb 之前有免费证书但不能用了记得绑定uuid
安卓证书: 这个可以免费网上申请
Chrome: 在写页面布局时候大可不用真机

标准app (基本还是原生那一套该有的)

Xcode 主要用他的模拟器
as模拟器或者夜神模拟器 genymotion 之类的(官方的基座好像可以兼容所有内核但自定义不知道为什么x86就不能在as模拟器上跑起来)
ios开发证书: 自定义基座需要记得是开发证书不是发布
ios推送证书: 推送用
安卓证书: 这个可以免费网上申请
Charis fiddler抓包工具: 配合模拟器调试
各个对应尺寸的启动图启动logo
个推短信支付定位各个appid appsercet

技术栈 (偏向前端)

Vue全家桶 route Vuex 路由跳转事件存储分发 props slot emit 父子组件传递
EventBus 事件监听分发取消监听
Es6 知道import export this作用域 prototype promise 能写递归去重函数能封装自己util 如时间加解密
版本号概念 wgt升级(热更新) 和整包升级
最好了解小程序有全局的变量和局部变量的概念
有能编写中等项目的less scss维护文件的能力因为大部分ui还是自己画不能直接用第三方vue ui .也可以基于官方给的ui改造
Iconfont 图标集不用真的很浪费还是矢量的
Webview (知道原生和h5是如何交互信息的)
如果业务采用部分利用h5去实现必须掌握各种移动端ui和适配
了解一些基本app生命周期如onLaunch onShow onHide处理的事务也了解页面的push pop 堆栈
最好还是有个app前辈带一带能少很多坑

c端架构

C端大致主要都是由各个page(基本单位)组成也就是用户所以看到的界面元素。而编写page页面时候有3种方案

.vue 基本和h5的vue没有太大区别 div换成 view span换成text 多了些特殊钩子小程序写法支持绝大部分css3 内置plus+对象
.nvue 和.vue差不多但是渲染引擎是weex 所以更严谨比如不能用background 而是background-color css3伪类只能静态,绝对或弹性布局当然体验会更加接近原生内置plus+对象
webview里的h5 这个如字面意思和一般的html无任何差别需要手动plus+对象

什么是plus+对象简单来说就是类似wx-jsk一样必须要在页面注入对象后才能调用些特有的api 如plus.runtime.version 获取当前版本号 plus.storage 本地存储 plus.nativeUI原生界面等具体参考这里

Uniapp内置plus对象但在再此基础上有封装层uni开头的api接口是为了兼容小程序和app。所以底层还是一个东西

Webview
页面直接展示 url 或者本地页面的内容 . 可以通过plus对象和壳子通信如获取app的用户信息发起原生功能等

在uniapp里webview有些特性

App传递数据给h5 主要通过获取webview对象然后对象的 evalJS 方法如果想做事件驱动需要使用 EventBus
h5传递数据给App 主要通过获取webview标签里 @message 传递

默认采用官方标题栏(根据web里的title)+web页面在 pages.json 设置titleNView对象

如需自定义标题栏设置"navigationStyle": "custom", 然后获取webview对象手动设置wv.setStyle({titleNView:{"titleText": "自定义标题,})
App的storage和h5的plus的storage 互通

那么大致了解了基本单位和特性就开始要想下如果要开发一款app 有多少页面用原生vue写多少页面用webview去写当然也可以采用100%原生vue去写.但如果维护迭代很麻烦 (以后部分业务需要添加新页面就要更新版本) 或者100% webview页面(wap2App 体验不好) 多多少少会影响用户体验

为了达到一个很好的APP体验就要在初期合理分配比如一级页面Tabbar 冷数据页面等用原生vue.h5去承担热数据活动或着某块业务但要保证服务器h5页面不能访问时 App也能友好的访问另外App 版本升级推送登录最好原生处理具体还是看App属于什么行业业务需求

建议工程项目最好分成2个 1个uniapp 1个h5 可以通过技术手段如一个scss类一个request.js 让开发体验一致化.最好再封装一个native.js工具类通过plus对象和原生进行交互比如在h5里发起一个扫码直接调用 app.scan(callback) 方法即可对于新手来说专注功能开发就行对于老手可以进一步提升利用uniapp特性和一些插件编写优质方法类提高用户体验

s端设计

因为毕竟是前端而且业务都在服务端这里就简单说下后台设计思路因为真实项目坐下来和后台交流也蛮多
首先就是用户信息获取数据安全方面采用的是App统一登录 rsa加密敏感信息获取 token 然后本地缓存token 注入plus对象并且h5如果发起请求直接从plus取对第三方工具打开h5网页因为没有plus对象的token 则直接提示非法进入这套即简单又实用如果后台想设计token合法有效性用户唯一性可以继续扩展

本地缓存因为uniapp也提供db模块如果一些次要信息如历史记录文件图片位置信息可不必麻烦后台存储但要注意用户换手机后一定不能影响用户使用不然还是云端

版本检测升级 uniApp升级有2种整包和热补丁. 不管哪种都不提供检测升级方法需自己实现一般类似拿 plus.runtime.version 和服务端发布的version做比对如果需要升级就返回下载url 这里要注意升级有强制升级和非强制升级在我的真实项目犯了个错做升级的时候因为疏忽了跳版本升级问题导致部分用户无法正常更新所以简单点一个master主分支就是不存在热补丁升级强制换包升级做得好点就是版本里面还分版本可以存在多个分支但该版本只能获取自己版本的热补丁如果要跨版本就要强制升级在设计接口时候一定要注意最好分4位版本号并且和前端说好逻辑

消息推送这里主要讲的是透传因为有些页面没有固定的url 建议后端只返回业务code+id code 如 {code:'10001',id:'1'} 让前端去解析业务code 假设 10001代表的是跳转商品详情 id是商品id 那么用户点击消息就会自动跳转该商品不用管这个页面是app页面还是h5页面

后台统计 uniapp的话自带统计后台来统计用户日常的统计信息和app崩溃日志当然也可以埋点去做或者第三方友盟_cmzz.push 去做自己的业务统计一定要去异步实现不要影响App体验

开发心得

onLaunch 只在App.vue 声明其他页面用onShow onLoad 其中 onLoad只触发一次 onShow能无限
插件市场的原生插件只针对自定义基座如打开office文件并且插件和包名绑定要注意确定证书是不是有效
如页面布局接口对接可以用chrome模式搞定 sdk功能测试用模拟器调试开发完后在用真机去跑可以提高效率
布局前先考虑他们家的 uni-ui
mescroll 是个很好的上拉滚动下拉刷新插件建议不要手动在写了个了
webvieiw setStyle时候要setTimeout 一会并且在h5里要document.addEventListener('plusready',plusReady,false);

因为初始化要点时间在部分安卓机里可能找不到plus对象而报错
还是初始化问题建立在onLaunch开个隐藏webvieiw打开h5 已达到预加载效果如果还慢需要做loading
在web-view页面里通过 webviews = this.$scope.$getAppWebview() 获取webview集合然后再通过 wv = currentWebview.children()[0]获取当前webview
如果想实现web-view自定义头部按钮比如点击右上角按钮跳转页面使用 wv.setStyle({titleNView: {buttons:[btn1,btn2,...}) buttons配置

不过在安卓机里 button的 onclick好像只能接受 string 类型所以要做个类似兼容处理

                                          //$h5 首先你需要定一个挂在对象 把EventBus挂在进去

	                                 if (plus.os.name=="Android"){
	                  			return "javascript:window.$h5.EventBus.dispatch('"+cbName+"','haha');"
					}else{
						return function(){
							var jsString='window.$h5.EventBus.dispatch("'+cbName+'","haha");'
							wv.evalJS(jsString);
						}
					}

uniapp是支持spa 单页面应用的但push pop这种动画你要自己处理
尽量用原生vue+h5模式搭建项目将比例大概 3-4 7-6开方便升级
打包时候有可能黑边问题请准备好对应尺寸的启动图
版本检测时候要分被动和主动有些场景就是要强制让用户更新
图标统一建议用 iconfont 矢量图标质量高方便 h5 uniapp都可以用毕竟每个图标路径很麻烦
有效利用 plus.storage 和 plus.sqlite 本地存储分清楚用什么存比较好如详情冷数据历史数据当然做得好可以在每次关键提交服务器份使app更友好提高用户体验
uniapp是个大技术栈绝对不要学官方多合一至少如果做App就app 小程序要么换一个要么就针对小程序一开始是很简陋的版本但经过迭代作出市面级app 绝对没问题前提是要精各类api sdk
官方也推荐wap2app 实际效果还过得去但这个还不如自己用webview实现亲测
待定...

参考资料

html5+
uniApp文档
 uniApp插件市场
 EventBus