前端

uni-app跨端知识分享

【基础-11.1%-6m】uniapp家族生态和使用场景

.nvue和.vue

uni-app的 App 端内置了一个基于 weex 改进的原生渲染引擎，提供了原生渲染能力。

  1. 在 App 端，如果使用 vue 页面，则使用 webview 渲染；如果使用 nvue 页面(native vue 的缩写)，则使用原生渲染。一个 App 中可以同时使用两种页面，比如首页使用 nvue，二级页使用 vue 页面。
  2. 虽然 nvue 也可以多端编译，输出 H5 和小程序，但 nvue 的 css 写法受限，所以如果你不开发 App，那么不需要使用 nvue。

比如，原来APP上用.vue开发扫码功能，无法实现内嵌到界面上的扫码，只能调用扫码API，全屏扫码，但是用nvue开发的页面，可以内嵌扫码组件Barcode实现。

其余的还包括：

  1. 高性能的区域长列表或瀑布流滚动。整个页面都是uni-app的webview，是没有性能问题，但是页面的某个区域，做长列表滚动，使用nvue就比vue页面性能好得多。
  2. 复杂高性能的自定义下拉刷新。uni-app的pages.json里面只能配置雪花和圆圈两种下拉刷新样式，需要复杂的可以用nvue的refresh组件。
  3. 左右拖动的长列表。
  4. 将软键盘右下角按钮文字改为“发送”。
  5. 前端控件无法覆盖原生控件的层级问题。map、video、live-pusher等原生的组件，用前端写的view不能覆盖，用nvue可以解决。

uniappX

uniappX是下一代的uni-app，包括uts语言、uvue渲染引擎、uni的组件和API、以及扩展机制。纯原生跨平台。
uts是一门类ts的、跨平台的、新语言。
uts在iOS平台编译为swift、在Android平台编译为kotlin、在Web和小程序平台编译为js、在鸿蒙next平台上编译为ArkTS。

最重要的一点，uts可以直接调用原生的API

uniCloud

云服务平台，主要提供云函数，云对象这种serverless服务和数据库服务，以及短信、消息推送等服务解决方案。也可以提供前端的静态文件托管。

uniMPSdk

让原生的App可以运行基于uniapp开发的小程序，比如顺丰的App，可以让原生的APP变成小程序运行的平台，搭建自己的小程序。

5+Runtime或者h5+或者h5Plus

这三个叫法都是一个东西，就是增强版的手机浏览器引擎。可以基于这个引擎，开发h5Plus应用，在HBuilderX上可以创建这种类型的App，这种App可以通过扩展的JS API任意调用手机的原生能力，实现与原生App同样强大的功能和性能。
相关的API文档：https://www.html5plus.org/doc/zh_cn/accelerometer.html

另外，在用uni-app开发App的过程中，有时候，uni-app封装好的API不够用，也可以直接写h5Plus语法，调用方式都是plus.

什么场景比较适合使用uni-app

  1. 明确需要多端发布。到目前为止，已经支持十多个平台。
  2. 做的APP原生能力要求不是很高。对于复杂的原生功能，可能需要编写额外的原生代码。举个例子，做一个商城，首选uni-app，做一个IOT应用，需要重度使用诸如蓝牙、NFC、扫码，等能力，用原生就很有必要。
  3. 快速迭代上线，如果是App和uni-app混合开发，uniapp写的页面，后期迭代成本比原生低，
  4. Web前端开发资源居多，原生开发少。Vue的语法，微信小程序的API。Web前端开发者，语法学习的成本比较低。对于企业来说，不用承担额外的原生开发的成本。

先要了解想要的功能是什么，比如，我以前接到一个需求，做一个红包柜活动。其中抽奖活动页，城市选择，活动抽奖，领奖，中奖历史等等，还要求微信小程序、抖音小程序，支付宝小程序，APP同时都上。这些页面让uni-app来做，是最合适不过的。但是涉及到蓝牙离线开柜，持续定位，这种，肯定要原生来做，uni-app可以编译到h5端，嵌入原生的APP里面。同时，小程序端只作活动相关，领券，抽奖等，券的核销，使用都跳转到APP端。

uni-app对手机版本的支持，如果明确要求对某一个版本需要，可以先看下uni-app是否支持，主要是App：

  • Web端：uni-app没有限制，同vue2和vue3自身能支持的浏览器版本
  • 小程序端：uni-app没有限制，同该小程序自身能支持的最低平台。
  • App端：
    Vue2: Android4.4+、iOS9+。Android4.4已经是2013年发布的手机了。
    Vue3: 支持的范围是：Android >=5 （使用nvue和vue有区别。某些老国产Android5的rom无法动态升级Android system webview，此时如果使用vue页面需搭配x5内核） , iOS >= 10

【基础-13%-8m】uniapp开发小程序的步骤

项目创建

HBuilderX创建

  1. 项目创建

  1. 配置AppID，这个AppId在微信小程序后台可以拿到

  1. 小程序开发者工具打开端口

默认的第一次安装的开发者小程序，这两块是关闭的。

  1. HBuilderX设置这里，添加微信开发者工具的安装路径。第一次安装HBuilderX需要配置。

  1. HBuilderX点击运行到小程序模拟器。

Cli创建

创建步骤看文档，不再赘述：https://uniapp.dcloud.net.cn/quickstart-cli.html

运行的时候，上述第3步骤，也要开启。然后，根据不同的平台，从package.json中可以看到启动运行的对应命令，如npm run dev:mp-weixin，就是运行到微信开发者工具中。

调试

  1. 修改了uniapp代码，工程热更新之后，微信开发者工具里面的代码也会自动更新，不需要做任何其他操作。
  2. 本地调试通常接口的域名是后端或者一个IP的时候，把不校验域名勾选上。发布上线之前，有了正式的域名可以打开测试一下，这里只是本地，发布到线上，是必须https的。

  1. 如果发现，这几个按钮是灰色的，那就是右侧AppID，没有配置，不要在微信开发者工具内配置，去HBuilderX配置，或者如果是Cli创建的项目，去manifest.json文件配置。

版本发布和更新

直接点击上传，填写好版本号，上传即可。

如果只是内部测试，只需要在版本管理里面，设为体验版即可。测试完成的版本，点击提交审核。

过审之前，先对比这篇文档，排查一下常见的拒绝情况：https://developers.weixin.qq.com/miniprogram/product/reject.html

【基础-13%-8m】uniapp开发APP的流程

环境搭建

需要准备：

  1. HBuilderX，安装好真机运行的插件。

  1. 安卓手机、苹果手机，设置中开启USB调试，苹果手机开启开发者模式。
  2. 数据连接线，不是充电线。连接好调试用的机器。
  3. 爱思助手，官网：https://www.i4.cn/。先确保用爱思助手可以正常连接，助手连不上，HBuilderX大概率运行的时候，也找不到设备。
  4. 运行到APP基座。

关于真机运行常见的问题，可以查看：https://uniapp.dcloud.net.cn/tutorial/run/run-app-faq.html

自定义基座和标准基座：

基座，顾名思义，可以理解为一个运行的基础环境，壳子。可以用来同步最新的代码，是一个最基础的APP，修改了代码，直接会同步到基座里面，进行热加载。

  1. 如果只是想要看看，样式有没有问题，页面运行在真机上的效果，可以直接运行标准基座，标准基座是uni-app提供的基座，里面有一些配置和key都是官方内置好的。标准基座使用的证书都是uni-app官方的。
  2. 但是如果想要测试支付、推送、使用自己的key开发地图，就需要使用自定义基座，使用之前，要生成自己的证书，走打包流程，制作一个自定义基座。

自定义运行基座可以所有配置生效（主要是manifest.json的配置），包括：
（1）App名称、图标、封面splash、包名、证书
（2）App模块配置、三方sdk配置（如微信、推送、地图、语音识别等三方sdk配置）
（3）App权限配置
（4）uni原生插件
（5）其他manifest.json文档提到的需打包生效的配置

  1. 同时要注意，制作完的自定义基座，不能用于正式的发布，只能调试使用。正式发布要走正式的打包流程。
  2. 关于制作安卓和ios证书，制作自定义基座，

App开发调试的建议：

一般来说，开发的App的步骤可以这样开展：

  1. 切页面的时候，可以先在H5上写，写完一个页面，再运行到APP上真机查看效果即可，这样需要调整的也不多。
  2. 开发诸如推送、支付这种功能，需要先用最基础的页面，调试整个流程是否通常，比如唤起支付宝、微信，支付完成的回调，等，可以先不管页面样式。

云打包和本地打包

代码可以本地打包，也可以云打包。
使用云打包时有两种模式：

（1）安心打包 安心打包不会上传开发者的证书、代码，
（2）传统云打包 传统云打包仅适合没有mac电脑但需要打iOS包的开发者。在这种情况下，代码和证书会上传到DCloud的mac打包服务器，但打包后立即删除，DCloud不会持久化保存。

安卓打包：

  1. HBuilder 运行→运行到手机或模拟器→制作自定义调试基座

  1. 快速生成证书方法：点击生成证书，填写基本信息，会下载证书文件，方可使用。

  1. 等待打包结束，会在控制台提示打包成功
  2. 选择菜单运行→运行到手机或模拟器→运行基座选择→自定义调试基座 后再次运行项目，即可通过自定义调试基座查看日志，成功后会在手机上安装项目包。
  3. 如果是正式包，选择发行→原生APP云打包，打包成功后会在控制台生成下载链接。

ios打包：

如果要发布测试包，需要先拿到测试人员的机器UUID，制作开发者证书，才可以安装使用；
如果要发布应用市场包，制作应用市场发布的证书，才可以上传到应用市场进行发布。

ios的证书申请

  1. 方法一：iOS证书(.p12)和描述文件(.mobileprovision)申请
  2. 方法二：使用软件，App Uploader

应用市场发布

前置工作：

  1. 隐私合规检查，检查代码没有过渡获取用户权限的地方，应用启动运行时，需要弹出隐私政策协议。有获取的地方都在配置文件里面配置说明。隐私合规也有付费检测服务，￥150一次。
  2. 用户注册协议
  3. 如果使用了三方的原生插件，需要查看是否有涉及到隐私权限获取的地方，都要在隐私协议里面加以补充。
  4. 准备应用市场上架需要填写的资料和文件，包括不同尺寸的封面图海报，图标，名称描述，更新日志，等。
  5. 去掉测试数据。
  1. 安卓应用市场

  1. AppStore
    (1) App 审核指南

【常用-14.8%-8m】项目到手，使用uniapp开发，应该考虑哪些问题

工作量评估的注意事项

【1】先确定需要适配哪些端
【2】微信小程序、APP、抖音小程序、钉钉小程序、支付宝小程序，一般样式单独处理的时候不太多，每多一端，多预留页面搭建时间的 1/4 端数
【3】是否有特殊的平台能力，是否需要推送、支付、小程序的分享，分享逻辑和样式，是否需要企业微信群分享。确定好哪些能做，哪些实现不了。
【4】是否需要对外发布，或者上架应用市场，需要提前准备的工作，催促运营或者项目经理提起完成的工作（备案、隐私政策、用户协议，还有法务的工作；证书，手机号一键登录，额度够不够，哪些是需要考虑额度的，或者提前申请的权限，比如定位，手机号登录，尤其是抖音，需要先申请再使用，或者需要达到运营等级之后，才有对应的能力申请，否则申请也不能申请。粉丝群分享，挂载短视频入口，等等）
【5】如果需要应用市场发布，是不是有苹果开发者账号，各个应用市场的账号，是不是都做了备案，小程序备案
【6】发布的日期，是否节前，能否加急审核
【7】是否有性能要求，用户量大概多少，是否需要做部分地区灰度发布
【8】协作者有多少个，全部开通权限，添加体验者账号
【9】测试的方式，如果小程序，扫体验码的方式还是直接开发者工具
【10】提前做好分包设计，即主功能和最常用的功能，放到主包里面，其他功能放置到子包里面，这样可以保证加载页面比较顺畅
【11】有没有特殊的交互要求，高级的动画或者交互效果，需要评估是否能实现，制作动画时，能用css不用js，js制作的动画，会导致渲染层和逻辑层频繁通信，造成卡顿。
【12】APP，是不是有开屏动画、APP图标提前单独制作，证书提前制作。
【13】有多少原生组件的使用，方案要确定。比如map、video、webview

最后，建议开发之前，阅读一遍跨端注意。

【常用-14.8%-8m】多端统一开发的有效实践

  1. uni-app写代码很简单，但是很多人在跨平台开发的过程中，感觉到较难受和急躁的点，其实在于如何去适应每个平台的规则限制，在这些规则之下进行开发，比如：
  • H5的浏览器端有跨域限制
  • 各种小程序会强制要求https链接，并且所有联网的服务器域名要配置到各家管理平台的白名单中。
  • ios对隐私控制和虚拟支付控制比较严格
  • Android中各种国产的rom兼容性比较差，效果不同，因为谷歌被屏蔽，导致消息推送，定位等开发混乱。
    等等。
  1. 更多的跨端注意事项，可以参看官方的这篇文章，跨端注意事项：https://zh.uniapp.dcloud.io/matter.html

条件编译：

【场景1】三方框架是基于微信原生进行的二次封装，开发者此时常会有个疑问：小程序在不断的迭代升级，如果某项业务依赖于最新的小程序API，但uni-app尚未封装，该怎么办？
【场景2】我跨的平台多了，比如，我想编译到微信小程序，也想编译到抖音小程序，但是我的某一个组件，或者某一个功能，只想在一个平台使用。产品经理和运营，对单独的某个平台有特殊的功能需求，比如，我想要加一个引导关注企业号的弹窗和按钮，只有抖音需要。

这些场景就需要条件编译。

  1. 平台原生的组件和API，可以继续在uni-app里面这么写，但是，要用条件编译代码块包裹起来
  2. 在编译器将uni-app统一代码编译生成每个平台支持的特有代码的时候，会特殊处理；如在小程序平台，编译器将.vue文件拆分生成wxml、wxss、js等代码。

使用方法：
以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

#ifdef：if defined 仅在某平台存在

#ifndef：if not defined 除了某平台均存在
%PLATFORM%：平台名称

比如：下面的这段代码，只会在APP端出现

下面的这块代码，则代表，不会在H5端出现，除此之外的其他端都会出现。

或者也可以设置两种平台都出现

条件编译支持的文件：

  1. .vue/.nvue/.uvue
  2. .js/.uts
  3. .css
  4. pages.json
  5. 各预编译语言文件，如：.scss、.less、.stylus、.ts、.pug

除此之外，静态文件static文件也支持条件编译，方式就是在static目录下，新建不同平台的专有目录，目录名称均为 小写。

这样打包的时候，只有专有目录下的静态资源只有在特定平台才会编译进去。

【注意】Android 和 iOS 平台不支持通过条件编译来区分，如果需要区分 Android、iOS 平台，要调用 uni.getSystemInfo 来获取平台信息，然后加以区分。

样式统一

尺寸单位：

uni-app 支持的通用 css 单位包括 rpx
rpx以 750 宽的屏幕为基准，750rpx 恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大。

要写的rpx = 元素在设计稿中的宽度 * ( 750 / 设计稿基准宽度（375）)

设计稿不是750px，那换算单位可头疼了。HBuilderX编辑器提供了智能提示：

使用flex布局

使用三方库：比如uview-ui
三方的UI库，做了一些样式的统一工作，原生的按钮，在微信小程序上，和支付宝小程序上，

【注意】有些样式是不可能统一的。比如钉钉小程序不支持自定义tabbar，小程序特有的右上角胶囊按钮，这些不可能和APP一样。

机型兼容

主要体现在Android和ios，以及不同的操作系统版本的差异。比如以下：

  1. 页面滚动与回弹效果
    在某些移动设备或平台上，页面滚动可能存在回弹效果不一致、滚动条样式不兼容等问题。
    (1) 使用 uniApp 提供的 scroll-view 组件替代原生滚动。
    (2) 通过 CSS 或组件属性关闭回弹效果，如设置 bounce: false。小程序自带的橡皮筋回弹效果，想要禁用，还要在page.json中，设置disableScroll:true加上。同时设置css为overscroll-behavior: none。
    有些华为手机拉动页面也有一个回弹效果，可以这样设置页面。

(3) 对于特定平台（如微信小程序）的滚动条样式问题，可以查阅相关平台文档，使用平台特有的样式覆盖方法进行定制。

  1. 日期时间格式兼容性，使用第三方日期库处理。

除此之外，还有很多，比如：打包的app在ios中横屏不生效、华为手机自带浏览器音频不能自动播放，没有特别好的办法，只能多积累。搜索解决方案的时候，带上机型，如果是浏览器问题，如果是使用的uniapp的API，优先去社区找答案。

【常用-9.3%-5m】特定开发场景介绍

小程序分包

要做的主要以下几步：

  1. 修改文件夹，主包用pages，其余的包在同级目录下，创建新的目录，放置分包的页面和静态文件
  2. 修改pages.json，配置节点。
    subPackages 节点接收一个数组，数组每一项都是应用的子包，其属性值如下：

  1. 全局搜索代码文件，所以影响到的跳转路径都要修改掉。
  2. 注意事项

自定义tabbar

uni-app开发APP之开发规范和一些注意事项

自定义导航栏

【扩展-11.1%-6m】APP开发，如何对接添加原生插件

在APP开发中，有些能力不能满足，比如自定义相机界面、VR，等。

一、获取本地原生插件

  1. 插件市场下载免费uni-app原生插件
    （1）登录uni原生插件市场，在免费的插件详情页中点击“下载for离线打包”下载原生插件（zip格式），解压到HBuilderX的uni-app项目下的“nativeplugins”目录（如不存在则创建）

  2. 开发自己开发uni-app原生插件，原生插件开发完成后按指定格式压缩为zip包，参考uni-app原生插件格式说明文档。 按上图的格式配置到uni-app项目下的“nativeplugins”目录。

二、配置本地原生插件

在manifest.json -> App原生插件配置 -> 选择本地插件 -> 选择需要打包生效的插件 -> 保存后提交云端打包生效。

三、开发调试本地原生插件

在vue页面或nvue页面引入这个原生插件。使用uni.requireNativePlugin的api，参数为插件的id。

1
const dcRichAlert = uni.requireNativePlugin('DCloud-RichAlert')

【扩展-7.4%-4m】埋点，异常监控，APP包自动更新

埋点

  1. 三方平台，比如友盟统计。需要付费。
  2. uni-app自己的统计，无需集成其他相关sdk，只需在manifest.json中勾选uni统计配置即可注：必须打包之后才能够进行上报，上报结果可能第二天才会生效，具体上报规则可以查看uni-app官网解释）

  1. 自己实现，大概思路如下：
    (1) 需要上报哪些指标？页面停留时长、触发事件（比如点击，滑动）
    (2) 事件上报可以自定义指令实现，把数据存储在storage中，定时上报，减轻服务器压力
    (3) app.vue的onLaunch开始监听，onHide移出监听
    (4) 使用插件市场的路由守卫插件，可以实现路由拦截。

异常监控

  1. 小程序自己的后台监控
  2. sentry + vue的方式
    (1) 像普通vue一样，创建一个sentry应用，
    (2) 引入“@sentry/vue”和“@sentry/tracing”，在main.js里面，注册

把soucemap上传到sentry，再根目录下建一个vue.config.js

App包的自动更新

  1. 整包更新和wgt资源包更新
    (1) 整包更新：下载完整的安装包
    (2) wgt资源包更新：只更新变动的功能代码
    (3) 如果修改了App的模块配置，权限配置等这些mainifest.json里面的东西，那就需要整包更新。如果只修改了代码里面某个地方的bug，只需要更新应用资源包就够了。
    整包更新：https://ask.dcloud.net.cn/article/34972

  2. 使用官方的APP升级中心，https://doc.dcloud.net.cn/uniCloud/upgrade-center.html

  3. 自建
    (1) ios，一般iOS Appstore的安装包，无法直接更新。App启动后检查有新版本，只能调整到Appstore，然后用户在Appstore的详情页点击更新按钮。
    (2) Android App，可以直接下载新的apk，只要包名和证书不变，就可以覆盖安装。
    ① 接口约定：请求数据，携带appid和version，接口返回：status （是否需要升级），更新内容，更新包下载地址
    ② APP实现：
    1) App启动时，向服务端上报当前版本号，服务端判断是否提示升级。
    2) 在App.vue的onLaunch中，发起升级检测请求
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
onLaunch: function () {  
	    //#ifdef APP-PLUS  
	    var server = "https://www.example.com/update"; //检查更新地址  
	    var req = { //升级检测数据  
	        "appid": plus.runtime.appid,  
	        "version": plus.runtime.version  
	    };  
	    uni.request({  
	        url: server,  
	        data: req,  
	        success: (res) => {  
	            if (res.statusCode == 200 && res.data.status === 1) {  
	                uni.showModal({ //提醒用户更新  
	                    title: "更新提示",  
	                    content: res.data.note,  
	                    success: (res) => {  
	                        if (res.confirm) {  
	                            plus.runtime.openURL(res.data.url);  
	                        }  
	                    }  
	                })  
	            }  
	        }  
	    })  
	    //#endif  
	}

打开应用市场：

1
2
3
4
5
if (plus.os.name=="Android") {  
    appurl = "market://details?id=io.dcloud.hellouniapp"; //这个是通用应用市场，如果想指定某个应用商店，需要单独查这个应用商店的包名或scheme及参数  
}  else{  
    appurl = "itms-apps://itunes.apple.com/cn/app/hello-uni-app/id1417078253";  
}

服务端：根据app上报的版本号，比对服务端最新版本号，决定是否需要升级，若需升级则返回升级信息。

其他

APP发布应用市场
Android、ios证书生成
https://www.applicationloader.net/doc/questions.html
https://blog.csdn.net/yichensheng/article/details/130622006

社区支持

开发过程中，不可避免的会遇到各种各样的问题，以下寻求解决的途径，按照优先级，我推荐以下的方式进行：

  1. 站内文档搜索
  2. 常见问题搜索：FAQ
  3. 论坛发帖，@官方人员。问答社区

提问时，有几个注意事项，可以提高被回答的优先级

  1. 问题的主题描述简明扼要
  2. 问题的内容，描述清楚问题产生的场景，比如，编译平台，程序运行的平台，提供代码片段或者demo等。

  1. 发起的问题，可以邀请官方人员回答，DCloud开始的昵称，都是官方人员。
  2. QQ群
  3. 提工单

unicloud相关的问题，紧急情况下，可以选择提交紧急工单，会优先拉群解决。

推荐文章