uniapp个人体会

什么是uniapp

Uniapp 从官方的意思是基于vue语法一套代码能编译出多端 h5 app端小程序端. 嗯看起来很美好但建议如果做什么产品就选定对应技术为好从官方代码那边只能通过#if #end 之类强制分离写个h5就用自家的脚手架小程序也有官方的demo

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

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

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

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

开发环境

基本

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

技术栈 (偏向前端)

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 堆栈

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特性和一些插件编写优质方法类提高用户体验

心得体会

onLaunch 只在App.vue 声明其他页面用onShow onLoad 其中 onLoad只触发一次 onShow能无限
插件市场的原生插件只针对自定义基座如打开office文件并且插件和包名绑定要注意确定证书是不是有效
如页面布局接口对接可以用chrome模式搞定 sdk功能测试用模拟器调试开发完后在用真机去跑可以提高效率
布局前先考虑他们家的uni-uiuni-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开方便升级
打包时候有可能黑边问题请准备好对应尺寸的启动图
版本检测时候要分被动和主动有些场景就是要强制让用户更新
图标统一建议用矢量图标质量高方便 h5 uniapp都可以用毕竟每个图标路径很麻烦
有效利用 plus.storage 和 plus.sqlite本地存储分清楚用什么存比较好如详情冷数据历史数据当然做得好可以在每次关键提交服务器份使app更友好提高用户体验
uniapp是个大技术栈绝对不要学官方多合一至少如果做App就app 小程序要么换一个要么就针对小程序一开始是很简陋的版本但经过迭代作出市面级app 绝对没问题前提是要精各类api sdk
官方也推荐wap2app 实际效果还过得去但这个还不如自己用webview实现

什么是uniapp

开发环境

基本

C端架构

心得体会

猜你喜欢