uni-app框架需求调研

时间 2019-11-29

原文原文链接

HBuilderX 版本 2.0.3 +
uni-app 版本 2.2.3 +
可快速浏览每小节结论部分

1、热更新（热修复策略）

环境 HBuilderX 1.6.5 +
流程

更新版本号在 manifest.json 中 1.0.0 => 1.0.1
打包在菜单发行中原生App-制做一动App资源升级包
存放资源包将 %appid%.wgt 文件存放在服务器的 static 目录下，即 www.example.com/static/UNI8…
服务端接口 www.example.com/update/ 传入

参数名	类型	默认值	说明
name	String	''	客户端读取到的应用名称，定义这个参数能够方便多个应用复用接口。
version	String	''	客户端读取到的版本号信息

返回html

参数名	类型	默认值	说明
update	Boolean	false	是否有更新
wgtUrl	String	''	wgt 包的下载地址，用于 wgt 方式更新。
pkgUrl	String	''	apk/ipa 包的下载地址或 AppStore 地址，用于整包升级的方式。

前端检测前端

// #ifdef APP-PLUS 
plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {  
    uni.request({  
        url: 'http://www.example.com/update/',  
        data: {  
            version: widgetInfo.version,  
            name: widgetInfo.name  
        },  
        success: (result) => {  
            var data = result.data;  
            if (data.update && data.wgtUrl) {  
                uni.downloadFile({  
                    url: data.wgtUrl,  
                    success: (downloadResult) => {  
                        if (downloadResult.statusCode === 200) {  
                            plus.runtime.install(downloadResult.tempFilePath, {  
                                force: false  
                            }, function() {  
                                console.log('install success...');  
                                plus.runtime.restart();  
                            }, function(e) {  
                                console.error('install fail...');  
                            });  
                        }  
                    }  
                });  
            }  
        }  
    });  
});  
// #endif
复制代码

不支持状况

SDK 部分有调整，好比新增了 Maps 模块等，不可经过此方式升级，必须经过整包的方式升级。
若是是老的非自定义组件编译模式，以前没有 nvue 文件，但更新中新增了 nvue 文件，不能使用此方式。由于非自定义组件编译模式若是没有nvue文件是不会打包weex引擎进去的，原生引擎没法动态添加。自定义组件模式默认就含着weex引擎，无论工程下有没有nvue文件。
原生插件的增改，一样不能使用此方式。

注意事项

plus.runtime.version 或者 uni.getSystemInfo() 读取到的是 apk/ipa 包的版本号，而非 manifest.json 资源中的版本信息，因此这里用 plus.runtime.getProperty() 来获取相关信息。
条件编译，仅在 App 平台执行此升级逻辑。
appid 以及版本信息等，在 HBuilderX 真机运行开发期间，均为 HBuilder 这个应用的信息，所以须要打包自定义基座或正式包测试升级功能。
安装 wgt 资源包成功后，必须执行 plus.runtime.restart()，不然新的内容并不会生效。
若是App的原生引擎不升级，只升级wgt包时须要注意测试wgt资源和原生基座的兼容性。平台默认会对不匹配的版本进行提醒，若是自测没问题，能够在manifest中配置忽略提示，详见https://ask.dcloud.net.cn/article/35627
www.example.com 是一个仅用作示例说明的地址，实际应用中应该是真实的 IP 或有效域名，请勿直接复制粘贴使用。
上架审核期间不要弹出热更新提示
热更新内容使用https下载，避免被三方网络劫持
不要更新违法内容、不要经过热更新破坏应用市场的利益，好比iOS的虚拟支付要老老实实给Apple分钱

参考地址参考文献1 参考文献2 参考文献3 整包升级

热更新结论

uni-app中提供了热更新解决方案，HBuilderX 1.6.5以上版本可打升级包
须要先后端配合，在代码中实现便可
热更新须要https下载更为安全
ios的支付官方建议老老实实给apple分钱，以防意外

2、socket

解决方案

用Hello mui的im示例的前端代码，后台本身用socket.io搭一个服务器。
用Hello mui的im示例的前端代码，与leancloud的服务器配合使用，含有个推推送。这里有示例包和源码：ask.dcloud.net.cn/article/381
使用环信环信的web sdk
使用融云的web sdk，这里有示例
使用5+sdk的方式，封装一个环信或融云等im厂商的原生sdk到js层，给本身的js用。社区里有人发了本身集成后的代码，你们也能够验证下。文档参考
直接调起手机qq，进入qq群或企业qq作交流或客服

websocket注意

uni-app版本 2.2.6 + App平台，2.2.6+起支持多个socket连接，数量没有限制。但一个页面仍是应该保持一个链接。小程序端链接个数查阅官网
链接断开问题一段时间后自动断开；先后台切换断开；离开页面断开；

socket结论

uni-app中一样使用websocket实现socket功能，链接的断开重连控制可能会比较麻烦
第三方环信提供免费的即时通讯，可是并发、链接数大的可能须要企业版的应该要收费

3、http通信方式（是否经过原生中转）

uni.request应该也是调用原生请求vue

4、app更新

整包升级html5

5、推送

官方使用指南
App端 uni push 的API请使用 H5+API
UniPush推送服务必须从新向DCloud申请开通帐户
注意 unipush是推送成功率更高的解决方案，个推仅为老项目兼容使用，BUT vivo目前仅对个别头部开发者开放，有可能不支持 Uni-app 使用5+API注意事项

manifest.json->App 模块权限配置->Push manifest.json->App SDK 配置->推送 java

推送结论

uni-app提供兼容大多手机型号的一站式解决方案
vivo品牌只对头部开发者开放了，有可能不能支持

6、数据分析埋点（友盟等）

uni-app版本 2.2.3+ 支持
只需按官方文档加入自定义事件便可
可登录uni统计后台查看统计数据
其余小程序各端分别有本身的统计后台及api

结论

uni-app提供了完善的统计分析接口及后台，按文档接入便可android

7、本地储存

uni-app的Storage各端实现

H5端为localStorage，浏览器限制5M大小，是缓存概念，可能会被清理
App端为原生的plus.storage，无大小限制，不是缓存，持久化
各个小程序端查看官方文档

对vuex支持

uni-app内置了vuex ，在app里的使用，可参考hello-uniapp store/index.js
vuex方式更加适合处理全局的而且值会发生变化的状况，查看更全的全局变量管理方案
.vue 和 .nvue 并非一个规范，所以一些在 .vue 中适用的方案并不适用于 .nvue。
Vue 上挂载属性，不能在 .nvue 中使用。
.nvue 不支持 vuex
若是但愿 .vue 和 .nvue 复用一些方法的话，须要采用公用模块的方案，分别在 .vue 和 .nvue 文件中引入。

缓存结论

uni-app提供storage实现，并包含同步异步方法
对vuex全面支持，但与nvue通讯比较麻烦，若是不涉及原生渲染优化可不采用nvue
大量数据存储可参考H5+API的SQLite及IO文件操做

8、上线打包流程

所需资源

appid 由 DCloud 云端分配
Android包名--自定义
Andriod证书及密钥，可用DCloud公用证书
ios证书及证书密钥
广告、换量等是否须要加入
应用图标 1024 * 1024
启动图 .9.png优化
manifest.json中的版本号、sdk等设置

流程

确认设置manifest.json 应用图标、启动图、权限配置（Push、Payment、Shar、Statistic）等等
菜单-发行-原生app-云打包，填写相应资源打包便可
注意云打包不能打超过40M的包

离线打包离线打包说明 ios离线打包 andriod离线打包 andriod打包指南
启动图分辨率要求

Android 另需转.9.png

分辨率	型号/版本	备注
480 * 762
720 * 1242
1080 * 1882

Iphone

分辨率	型号/版本	备注
1242 * 2688	iphone XS Max、ios12+	/
2688 * 1242	iphone XS Max、ios12+	横屏
828 * 1792	XR、ios12+	/
1792 * 828	XR、ios12+	横屏
1125 * 2436	X/XS、	/
2436 * 1125	X/XS、	横屏
1242 * 2208	6/7/8Plus	/
2208 * 1242	6/7/8Plus	横屏
750 * 1334	6/7/8	/
1334 * 750	6/7/8	横屏
640 * 1136	5/5s	/
1136 * 640	5/5s	横屏
640 * 960	4/4s	/

结论

在HBuild中进行云打包很容易，目前项目较小，云打包便可知足要求
40M以上建议离线打包，须要相应的sdk，比较复杂
启动图须要ui配合，各个分辨率分别出图

9、app前台日志记录

目前还没发现有好的解决方案 fundebugios

利用统计事件，定义error事件存储
写入本地文件，要加入缓存清理、发送错误报告等功能
本身集成搭建日志收集服务，成本和消耗较大
fundebug日志服务，需付费

10、支付流程（微信支付宝）

uni.requestPayment是一个统一各平台的客户端支付API，不论是在某家小程序仍是在App中，客户端均使用本API调用。
各端支付demo可参看hello uni-app

app支付具体流程

流程：支付平台功能申请 -> manifest.json 里配置支付参数 -> uni-app 里调用 API 进行支付

支付宝App支付功能申请登陆支付宝帐号，建立应用接入支付宝App支付能力，包括如下步骤：

建立应用（获取appid）
开通App支付功能
配置密钥（获取公钥、私钥）官方文档

微信App支付功能申请

到微信开放平台申请移动应用并开通支付功能，申请应用后能够获取 AppID 和 AppSecret 值
应用接入微信商户平台，选择 App 支付
开通支付功能后可获取支付业务服务器配置数据：PARTNER（财付通商户号）、PARTNER_KEY（财付通密钥）、PAYSIGNKEY（支付签名密钥）
须要将从微信开放平台申请的appid，填回到 manifest-App SDK配置-支付-微信支付中。打包后生效。官方文档

微信App支付功能申请使用苹果开发者帐号登陆 App Store Connect，在应用的功能选项卡页面，添加 App 内购项目。注意：

内购项目的各信息须要填写完整，而后保存，此时内购项目的状态应该是准备提交，当提交应用经过审核后，状态则变为已批准
测试时，建议使用测试证书打一个自定义的 iOS 基座进行测试
在应用 TestFight 的选项卡添加 App Store Connect 用户，测试支付时可使用此用户账号进行测试
orderInfo 的 productid 是本身填写的产品 ID
调用 uni.requestPayment 前必须先使用 5+Plus 的方法调用 requestOrder 获取订单信息，不然会致使没法支付
更多可参考

manifest.json里配置相关参数配置相关参数，并开发代码前端参考Hello uni-app
注意数字类产品（好比购买会员等不须要配送实物的商品），Apple规定必须使用苹果IAP应用内支付，给Apple分红30%。打包的时候不要勾选微信或支付宝等其余支付方式。若是你提交的包里包含了微信支付宝等支付的sdk，即便没使用，Appstore也会认为你有隐藏方式，之后会绕过iap，不给Apple分红，所以拒绝你的App上线。云打包时，manifest里选上支付模块，但sdk配置里去掉微信支付和支付宝支付。不少开发者的Android版是包含微信和支付宝支付的，此时注意分开判断。

支付结论

H5普通浏览器平台的支付，仍然是常规web作法。uni-app未封装。
前端用官方统一支付接口，服务器开发，仍然须要看各个平台自己的支付文档
ios应用内可能没法绕开苹果分红

11、音视频支持程度

ios android通用格式 m4a/wav/mp3/aac
使用方法官方api

12、字体支持程度 & 字体图标等

官方文档git

字体

注意事项

动态加载网络字体。文件地址需为下载类型。
引入中文字体，体积过大时会发生错误，建议抽离出部分中文，减小体积，或者用图片替代
字体连接必须是https
仅App端、微信小程序端支持
字体资源的地址，建议格式为 TTF 和 WOFF，WOFF2 在低版本的iOS上会不兼容
字体连接必须是同源下的，或开启了cors支持，微信小程序的域名是servicewechat.com
canvas等原生组件不支持使用接口添加的字体
工具里提示 Faild to load font能够忽略

字体图标

uni-app 支持使用字体图标，使用方式与普通 web 项目相同github

注意

支持 base64 格式字体图标。
支持网络路径字体图标。
网络路径必须加协议头 https
从 www.iconfont.cn 上拷贝的代码，默认是没加协议头的。

uni-app 本地路径图标字体支持状况

字体文件小于 40kb，uni-app 会自动将其转化为 base64 格式；
字体文件大于等于 40kb，需开发者本身转换，不然使用将不生效；

@font-face {
     font-family: test1-icon;
     src: url('~@/static/iconfont.ttf');
 }
复制代码

结论

字体文件与字体图标都支持，但据以往开发经验不必定好使，须要验证
引用地址须要https

十3、canvas及chart

canvas

uni-app中封装了canvasApi
目前大多属性头条小程序不支持
图表、二维码、海报（包含生成图片保存）等均可以基于canvas制做，并有相应插件可用，但作的不是很好，可能须要定制化开发

chart

推荐使用基于canvas的uCharts插件，uni-app插件大赛一等奖

为何不用echarts

相比Echarts及F2的复杂的设置，本插件几乎等于傻瓜式的配置。
Echarts在跨端使用更复杂，本插件只须要简单的两个canvas标签轻松区别搞定，代码整洁易维护。
Echarts在IOS端图表显示错位，只能引用网页解决。
本插件打包后的体积相比Echarts小不少不少，因此性能更好。
若是您是uni-app初学者，那么强烈建议您使用uCharts，而且目前能够跨全端通用，减小工做量，加强一致性体验。
图表样式都可自定义，懂js的均可以读懂插件源码，直接修改u-charts.js源码便可。
本插件通过大量测试，反复论证并加以改造而成，请各位放心使用。

结论

uni-app中较好的集成了canvas模块，建议海报、二维码、echart等功能须要多端兼容的，利用canvas实现
须要的知识储备和初期实现成本稍高
知识储备 uCharts改造 h5canvas学习

其余说明

关于vue 与 nvue 若是你是web前端，不熟悉 weex，那么建议你仍然以使用 vue 为主，在App端某些 vue 表现不佳的场景下使用 nvue 做为强化补充