全平台小程序开发框架Uni-app重点概览

1. 通过vue-cli命令行创建Uni-app

全局安装vue-cli

npminstall -g @vue/cli

创建uni-app

vue create -p dcloudio/uni-preset-vue my-project

运行、发布uni-app

npm run dev:%PLATFORM%npm run build:%PLATFORM%

%PLATFORM% 可取值如下：

• 目前使用npm run build:app-plus会在/dist/build/app-plus下生成app打包资源。如需制作wgt包，将app-plus中的文件压缩成zip（注意：不要包含app-plus目录），再重命名为${appid}.wgt， appid为manifest.json文件中的appid。
• dev 模式编译出的各平台代码存放于根目录下的 /dist/dev/目录，打开各平台开发工具选择对应平台目录即可进行预览（h5 平台不会在此目录，存在于缓存中）；
• build 模式编译出的各平台代码存放于根目录下的 /dist/build/ 目录，发布时选择此目录进行发布；
• dev 和 build 模式的区别：

1. dev 模式有 SourceMap 可以方便的进行断点调试；
2. build 模式会将代码进行压缩，体积更小更适合发布为正式版应用；
3. 进行 环境判断 时，dev 模式 process.env.NODE_ENV 的值为 development，build 模式 process.env.NODE_ENV 的值为 production。

2. 使用cli创建项目和使用HBuilderX可视化界面创建项目的区别

编译器的区别

• cli 创建的项目，编译器安装在项目下。并且不会跟随HBuilderX升级。如需升级编译器，执行 npm update，或者手动修改 package.json 中的 uni 相关依赖版本后执行 npm install。更新后可能会有新增的依赖并不会自动安装，手动安装缺少的依赖即可。
• HBuilderX可视化界面创建的项目，编译器在HBuilderX的安装目录下的plugin目录，随着HBuilderX的升级会自动升级编译器。
• 已经使用cli创建的项目，如果想继续在HBuilderX里使用，可以把工程拖到HBuilderX中。注意如果是把整个项目拖入HBuilderX，则编译时走的是项目下的编译器。如果是把src目录拖入到HBuilderX中，则走的是HBuilderX安装目录下plugin目录下的编译器。
• cli版如果想安装less、scss、ts等编译器，需自己手动npm安装。在HBuilderX的插件管理界面安装无效，那个只作用于HBuilderX创建的项目。

开发工具的区别

• cli创建的项目，内置了d.ts，同其他常规npm库一样，可在vscode、webstorm等支持d.ts的开发工具里正常开发并有语法提示。
• 使用HBuilderX创建的项目不带d.ts，HBuilderX内置了uni-app语法提示库。如需把HBuilderX创建的项目在其他编辑器打开并且补充d.ts，可以在项目下先执行 npm init，然后npm i @types/uni-app -D，来补充d.ts。
• 但vscode等其他开发工具，在vue或uni-app领域，开发效率比不过HBuilderX。详见：https://ask.dcloud.net.cn/article/35451
• 发布App时，仍然需要使用HBuilderX。其他开发工具无法发布App，但可以发布H5、各种小程序。如需开发App，可以先在HBuilderX里运行起来，然后在其他编辑器里修改保存代码，代码修改后会自动同步到手机基座。
• 如果使用cli创建项目，那下载HBuilderX时只需下载10M的标准版即可。因为编译器已经安装到项目下了。

3. 生命周期

应用生命周期

uni-app 支持如下应用生命周期函数：

注意：

• 应用生命周期仅可在App.vue中监听，在其它页面监听无效。
• onlaunch里进行页面跳转，如遇白屏报错，请参考https://ask.dcloud.net.cn/article/35942

页面生命周期

uni-app 支持如下页面生命周期函数：

4. 页面栈

框架以栈的形式管理当前所有页面， 当发生路由切换的时候，页面栈的表现如下：

5. 运行环境判断

uni-app 可通过process.env.NODE_ENV 判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生产服务器的动态切换。

• 在HBuilderX 中，点击“运行”编译出来的代码是开发环境，点击“发行”编译出来的代码是生产环境。
• cli模式下，是通行的编译环境处理方式。

if(process.env.NODE_ENV==='development'){
    console.log('开发环境')}else{
    console.log('生产环境')}

6. Uni-app中使用nvue

介绍

uni-app App端内置了一个基于 weex 改进的原生渲染引擎，提供了原生渲染能力。
在App端，如果使用vue页面，则使用webview渲染；如果使用nvue页面(native vue的缩写)，则使用原生渲染。一个App中可以同时使用两种页面，比如首页使用nvue，二级页使用vue页面，hello uni-app示例就是如此。
虽然nvue也可以多端编译，输出H5和小程序，但nvue的css写法受限，所以如果你不开发App，那么不需要使用nvue。
以往的 weex ，有个很大的问题是它只是一个高性能的渲染器，没有足够的API能力（比如各种push sdk集成、蓝牙等能力调用），使得开发时非常依赖原生工程师协作，开发者本来想节约成本，结果需要前端、iOS、Android 3拨人开发，适得其反。 nvue 解决了这个问题，让前端工程师可以直接开发完整 App，并提供丰富的插件生态和云打包。这些组合方案，帮助开发者切实的提高效率、降低成本。
同时uni-app扩展了weex原生渲染引擎的很多排版能力，修复了很多bug。比如：

• Android端良好支持边框阴影
• iOS端支持高斯模糊，详情
• 可实现区域滚动长列表+左右拖动列表+吸顶的复杂排版效果
• 优化圆角边框绘制性能

适用场景

nvue的组件和API写法与vue页面一致，其内置组件还比vue页面内置组件增加了更多，详见。但nvue在css的写法限制较多，具体如下：

• nvue的css仅支持flex布局，是webview的css语法的子集。这是因为操作系统原生排版不支持非flex之外的web布局。当然flex足以排布出各种页面，只是写法需要适应。
• nvue的css，在选择器方面支持的较少，只支持简单的class=“classA”。
• class 进行绑定时只支持数组语法。
• 有些web的css属性在nvue里无法支持，比如背景图。但可以使用image组件和层级来实现类似web中的背景效果。因为原生开发本身也没有web这种背景图概念

如果你熟悉 weex或react native 开发，那么 nvue 是你的更优选择，能切实提升你的开发效率，降低成本。
如果你是web前端，不熟悉原生排版，那么建议你仍然以使用vue页面为主，在App端某些vue页面表现不佳的场景下使用 nvue 作为强化补充。这些场景如下：

• 需要高性能的区域长列表或瀑布流滚动。webview的页面级长列表滚动时没有性能问题的（就是滚动条覆盖webview整体高度），但页面中某个区域做长列表滚动，则需要使用nvue的list、recycle-list、waterfall等组件。这些组件的性能要高于vue页面里的区域滚动组件scroll-view。
• 复杂高性能的自定义下拉刷新。uni-app的pages.json里可以配置原生下拉刷新，但引擎内置的下拉刷新样式只有雪花和circle圈2种样式。如果你需要自己做复杂的下拉刷新，推荐使用nvue的refresh组件。当然插件市场里也有很多vue下的自定义下拉刷新插件，只要是基于renderjs或wxs的，性能也可以商用，只是没有nvue的refresh组件更极致。
• 左右拖动的长列表。在webview里，通过swiper+scroll-view实现左右拖动的长列表，前端模拟下拉刷新，这套方案的性能不好。此时推荐使用nvue，比如新建uni-app项目时的新闻示例模板，就采用了nvue，切换很流畅。
• 实现区域滚动长列表+左右拖动列表+吸顶的复杂排版效果，效果可参考hello uni-app模板里的swiper-list
• 如需要将软键盘右下角按钮文字改为“发送”，则需要使用nvue。比如聊天场景，除了软键盘右下角的按钮文字处理外，还涉及聊天记录区域长列表滚动，适合nvue来做。
• 解决前端控件无法覆盖原生控件的层级问题。当你使用map、video、live-pusher等原生组件时，会发现前端写的view等组件无法覆盖原生组件，层级问题处理比较麻烦，此时使用nvue更好。或者在vue页面上也可以覆盖一个subnvue（一种非全屏的nvue页面覆盖在webview上），以解决App上的原生控件层级问题。
• 如深度使用map组件，建议使用nvue。除了层级问题，App端nvue文件的map功能更完善，和小程序拉齐度更高，多端一致性更好。
• 如深度使用video，建议使用nvue。比如如下2个场景：video内嵌到swiper中，以实现抖音式视频滑动切换，例子见插件市场；nvue的视频全屏后，通过cover-view实现内容覆盖，比如增加文字标题、分享按钮。
• 直播推流：nvue下有live-pusher组件，和小程序对齐，功能更完善，也没有层级问题。
• 对App启动速度要求极致化。App端v3编译器模式下，如果首页使用nvue且在manifest里配置fast模式，那么App的启动速度可以控制在1秒左右。而使用vue页面的话，App的启动速度一般是3秒起，取决于你的代码性能和体积。

但注意，在某些场景下，nvue不如vue页面，如下：

• canvas。nvue的canvas性能不高，尤其是Android App平台，所以这个组件干脆没有内置，而是需要单独引入。操作canvas动画，最高性能的方式是使用vue页面的renderjs技术，在hello uni-app里的canvas示例就是如此。
• 动态横竖屏。nvue页面的css不支持媒体查询，所以横竖屏动态切换、动态适配屏幕是很困难的。

纯原生渲染模式

uni-app在App端，支持vue页面和nvue页面混搭、互相跳转。也支持纯nvue原生渲染。
启用纯原生渲染模式，可以减少App端的包体积、减少使用时的内存占用。因为webview渲染模式的相关模块将被移除。
在manifest.json源码视图的"app-plus"下配置"renderer":“native”，即代表App端启用纯原生渲染模式。此时pages.json注册的vue页面将被忽略，vue组件也将被原生渲染引擎来渲染。
如果不指定该值，默认是不启动纯原生渲染的。

// manifest.json{// .../* App平台特有配置 */"app-plus":{"renderer":"native",//App端纯原生渲染模式}}

weex编译模式和uni-app编译模式

weex的组件和jsapi，与uni-app不同。uni-app与微信小程序相同。
考虑到weex用户的迁移，uni-app 也支持weex的代码写法。在manifest.json中可以配置使用weex编译模式或uni-app编译模式。选择weex编译模式时将不支持uni-app的组件和jsapi，需要开发者参考weex官方文档的写法来写代码。 比如 weex 编译模式用<div>。uni-app 编译模式则使用<view>。
一般情况建议使用uni-app模式，除非历史weex代码较多，需要逐步过渡。同时注意weex编译模式的切换是项目级的，不支持同项目下某个nvue页面使用weex模式，另一个nvue页面使用uni-app模式。

在 manifest.json 中修改2种编译模式，manifest.json -> app-plus -> nvueCompiler 切换编译模式。
nvueCompiler 有两个值：

• weex
• uni-app

// manifest.json{// .../* App平台特有配置 */"app-plus":{"nvueCompiler":"uni-app"//是否启用 uni-app 模式}}

• 如果没有在manifest里明确配置，默认是weex模式。这是为了向下兼容。
• weex 编译模式不支持 onNavigationBarButtonTap 生命周期函数的写法。在 nvue 中监听原生标题栏按钮点击事件，详见：uni.onNavigationBarButtonTap。
• weex编译模式不支持onShow生命周期，但熟悉5+的话，可利用监听webview的addEventListener show事件实现onShow效果。
• weex 编译模式不支持vuex。
• nvue 的页面跳转，与 weex 不同，仍然遵循 uni-app 的路由模型。vue 页面和 nvue 页面之间不管怎么跳转，都遵循这个模型。包括 nvue 页面跳向 nvue 页面。每个页面都需要在 pages.json 中注册，调用 uni-app 的 路由 API 进行跳转。
• 原生开发没有页面滚动的概念，页面内容高过屏幕高度并不会自动滚动，只有部分组件可滚动（list、waterfall、scroll-view/scroller），要滚得内容需要套在可滚动组件下。这不符合前端开发的习惯，所以在 nvue 编译为 uni-app模式时，给页面外层自动套了一个 scroller，页面内容过高会自动滚动。（组件不会套，页面有recycle-list时也不会套）。 可以设置不自动套。

{"path":"","style":{"disableScroll":true// 不嵌套 scroller}}

weex 编译模式下支持使用 weex ui ，例子见：https://ext.dcloud.net.cn/plugin?id=442。但相比uni-app插件市场及官方uni ui而言，weex语法的组件生态还是比较欠缺的。

快速上手

1. 新建 nvue 页面

在HBuilderX的 uni-app 项目中，新建页面，弹出界面右上角可以选择是建立vue页面还是nvue页面，或者2个同时建。
不管是vue页面还是nvue页面，都需要在pages.json中注册。如果在HBuilderX中新建页面是会自动注册的，如果使用其他编辑器，则需要自行在pages.json里注册。
如果一个页面路由下同时有vue页面和nvue页面，即出现同名的vue和nvue文件。那么在App端，会仅使用nvue页面，同名的vue文件将不会被编译到App端。而在非App端，会优先使用vue页面。
如果不同名，只有nvue页面，则在非app端，只有uni-app编译模式的nvue文件才会编译。

2. 开发 nvue 页面

nvue 页面结构同 vue, 由 template、style、script 构成。

• template： 模板写法、数据绑定同 vue。组件支持2种模式，1、 weex 组件，同weex写法，参考：weex 内置组件；2、uni-app组件，同uni-app写法。
• style：由于采用原生渲染，并非所有浏览器的 css 均支持，布局模型只支持 flex 布局，虽然不会造成某些界面布局无法实现，但写法要注意。详见：weex 样式
• script：写法同 vue，并支持3种API：

1. weex API ：仅支持App端，uni-app编译模式也可使用。使用前需先引入对应模块，参考：weex 模块引入
2. uni API：https://uniapp.dcloud.io/api/README
3. plus API：仅支持App端。http://www.html5plus.org/doc/h5p.html

3. 调试 nvue 页面

HBuilderX内置了weex调试工具的强化版，包括审查界面元素、看log、debug打断点

nvue 和 vue 相互通讯

在 uni-app 中，nvue 和 vue 页面可以混搭使用。
推荐使用uni.

o

n

,

u

n

i

.

on,uni.on,uni.emit的方式进行页面通讯，旧的通讯方式（uni.postMessage及plus.webview.postMessageToUniNView）不再推荐使用。

通讯实现方式

// 接收信息的页面// $on(eventName, callback)
uni.$on('page-popup',(data)=>{  
    console.log('标题：'+ data.title)
    console.log('内容：'+ data.content)})// 发送信息的页面// $emit(eventName, data)
uni.$emit('page-popup',{  
    title:'我是title',  
    content:'我是content'});

使用此页面通讯时注意事项：要在页面卸载前，使用 uni.$off 移除事件监听器。

nvue 向 vue 通讯（已过期，推荐使用上面的uni.$on、uni.$emit）

步骤：

1. 在 nvue 使用 uni.postMessage(data) 发送数据通讯，data 为 JSON 格式（键值对的值仅支持String）。
2. 在 App.vue 里使用 onUniNViewMessage 进行监听。

代码示例：

//test.nvue<template><div@click="test"><text>点击页面发送数据</text></div></template><script>exportdefault{
        methods:{test(e){
                uni.postMessage({test:"数据",value:"数据"});}}}</script>
//App.vue<script>exportdefault{
        onUniNViewMessage:function(e){
          console.log("App.vue收到数据")
          console.log(JSON.stringify(e.data))},
        onLaunch:function(){
            console.log('App Launch');}}</script>

vue 向 nvue 通讯（已过期，推荐使用上面的uni.$on、uni.$emit）

步骤：

1. 在 vue 里使用 plus.webview.postMessageToUniNView(data,nvueId) 发送消息，data 为 JSON 格式（键值对的值仅支持String），nvueId 为 nvue 所在 webview 的 id，webview的 id 获取方式参考：$getAppWebview()。
2. 在 nvue 里引用 globalEvent 模块监听 plusMessage 事件，如下：

const globalEvent= weex.requireModule('globalEvent');
globalEvent.addEventListener("plusMessage", e=>{
  console.log(e.data);//得到数据});

代码示例：

// index.nvue<template><div@click="test"><text>点击页面发送数据{{num}}</text></div></template><script>
    const globalEvent = weex.requireModule('globalEvent');
    export default {
        data() {
            return {
                num: "0"
            }
        },
        created() {
            globalEvent.addEventListener("plusMessage", e => {
                console.log(e.data);
                if (e.data.num) { //存在num时才赋值，在nvue里调用uni的API也会触发plusMessage事件，所以需要判断需要的数据是否存在
                    this.num = e.data.num
                }
            });
        },
        methods: {
            test(e) {
                uni.navigateTo({
                    url: '../test/test'
                })
            }
        }
    }

// test.vue<template><view><buttontype="primary"@click="test">点击改变nvue的数据</button></view></template><script>exportdefault{
        methods:{test(){var pages=getCurrentPages();var page= pages[pages.length-2];var currentWebview= page.$getAppWebview();
                plus.webview.postMessageToUniNView({
                    num:"123"}, currentWebview.id);
                uni.navigateBack()}}}</script>

vue 和 nvue 共享的变量和数据

除了通信事件，vue 和 nvue 页面之间还可以共享变量和存储。 uni-app提供的共享变量和数据的方案如下：

1. vuex:

自HBuilderX 2.2.5起，nvue支持vuex。这是vue官方的状态管理工具。
注意：

• 不支持直接引入store使用，可以使用mapState、mapGetters、mapMutations等辅助方法或者使用this.$store

2. uni.storage:

vue和nvue页面可以使用相同的uni.storage存储。这个存储是持久化的。 比如登陆状态可以保存在这里。
App端还支持plus.sqlite，也是共享通用的。

3. globalData:

小程序有globalData机制，这套机制在uni-app里也可以使用，全端通用。 在App.vue文件里定义globalData，如下：

<script>exportdefault{  
        globalData:{  
            text:'text'},  
        onLaunch:function(){  
            console.log('App Launch')},  
        onShow:function(){  
            console.log('App Show')},  
        onHide:function(){  
            console.log('App Hide')}}</script>

js中操作globalData的方式如下：getApp().globalData.text = 'test'
如果需要把globalData的数据绑定到页面上，可在页面的onShow声明周期里进行变量重赋值。

nvue 里使用 BindingX

uni-app是逻辑层和视图层分离的。此时会产生两层通信成本。比如拖动视图层的元素，如果在逻辑层不停接收事件，因为通信损耗会产生不顺滑的体验。
BindingX是weex提供的一种预描述交互语法。由原生解析BindingX规则，按此规则处理视图层的交互和动效。不再实时去js逻辑层运行和通信。
BindingX类似一种强化版的css，运行性能高，但没有js那样足够强的编程灵活性。
uni-app 内置了 BindingX，可在 nvue 中使用 BindingX 完成复杂的动画效果。

• 从HBuilderX 2.3.4起，uni-app 编译模式可直接引用uni.requireNativePlugin('bindingx')模块，weex 模式还需使用 npm 方式引用。
• BindingX demo示例可参考 BindingX 示例 里 vue 的相关示例，将实验田里的 vue 代码拷贝到 nvue 文件里即可。

代码示例：

<template><divclass="container"><divref="b1"class="btn"style="background-color:#6A1B9A"@click="clickBtn"><textclass="text">A</text></div><divref="b2"class="btn"style="background-color:#0277BD"@click="clickBtn"><textclass="text">B</text></div><divref="b3"class="btn"style="background-color:#FF9800"@click="clickBtn"><textclass="text">C</text></div><divref="main_btn"class="btn"@click="clickBtn"><imageclass="image"ref="main_image"src="https://www.shouzhuanya.com/wp-content/uploads/2022/07/1657620773-20220712101253-62cd4925bb5a0.png"/></div></div></template><script>const Binding= uni.requireNativePlugin('bindingx');
    module.exports={
        data:{
            isExpanded:false},
        methods:{
            getEl:function(el){if(typeof el==='string'||typeof el==='number')return el;if(WXEnvironment){return el.ref;}else{return elinstanceofHTMLElement? el: el.$el;}},
            collapse:function(){let main_btn=this.getEl(this.$refs.main_btn);let main_image=this.getEl(this.$refs.main_image);let b1=this.getEl(this.$refs.b1);let b2=this.getEl(this.$refs.b2);let b3=this.getEl(this.$refs.b3);let main_binding= Binding.bind({
                    eventType:'timing',
                    exitExpression:'t>800',
                    props:[{
                        element: main_image,
                        property:'transform.rotateZ',
                        expression:'easeOutQuint(t,45,0-45,800)'},{
                        element: main_btn,
                        property:'background-color',
                        expression:"evaluateColor('#607D8B','#ff0000',min(t,800)/800)"}]},function(res){if(res.state==='exit'){
                        Binding.unbind({
                            token: main_binding.token,
                          eventType:'timing'})}});let btn_binding= Binding.bind({
                    eventType:'timing',
                    exitExpression:'t>800',
                    props:[{
                        element: b1,
                        property:'transform.translateY',
                        expression:"easeOutQuint(t,-150,150,800)"},{
                        element: b2,
                        property:'transform.translateY',
                        expression:"t<=100?0:e

手赚鸭会员

打赏 收藏 海报 链接