ITPub博客

DCloud有470万开发者，uni统计手机端月活8.4亿。是开发者数量和案例最丰富的多端开发框架。欢迎知名开发商提交案例或接入uni统计，项目案例征集项目案例征集提交。新冠抗疫专区案例uni-app助力数百家单位快速上线抗疫系统，开源众多项目，详见专题：xinguan2020.dcloud.net.cn xinguan2020.dcloud.net.cn官方示例Hello uni-ap

uni-app和原生App混合开发问题：首先务必确认uni-app和原生代码，谁是主谁是从的问题。如果你的应用是uni-app开发的，需要扩展一些原生能力，那么请参考插件市场右上角的原生插件开发教程。如果你的App是原生开发的，部分功能栏目想通过uni-app实现，有2种方式在原生App里集成uni小程序sdk，参考如果不想集成原生sdk，那就把uni-app代码发布成H5方式，在原生App里通过

uni-app可以多端输出，也欢迎各平台之前的老项目向uni-app转换迁移。vue h5项目转换uni-app指南： vue h5转换uni-app指南（vue转uni、h5转uni）微信小程序转换uni-app指南及转换器： 微信小程序转换uni-app详细指南、小程序转uni-app转换器、wepy转uni-appwepy转uni-app转换器：github &

uni-app 积极拥抱社区，创建了开放、兼容的生态系统。uni-app插件市场，有数千款插件，支持前端组件、js sdk、页面模板、项目模板、原生插件等多种类型。在生态建设上远远领先于竞品。兼容 微信小程序 JS SDK 丰富的小程序生态内容可直接引入uni-app，并且在App侧通用。以前的跨平台开发框架普遍缺少三方SDK，由于大量SDK厂商均原厂维护小程序SDK，使得uni-app

运行原理逻辑层和视图层分离，且非H5端通信有折损uni-app 在非H5端运行时，从架构上分为逻辑层和视图层两个部分。逻辑层负责执行业务逻辑，也就是运行js代码，视图层负责页面渲染。虽然开发者在一个vue页面里写js和css，但其实，编译时就已经将它们拆分了。逻辑层详解逻辑层是运行在一个独立的jscore里的，它不依赖于本机的webview，所以一方面它没有浏览器兼容问题，可以在Andr

使用代码块直接创建组件模板为提升开发效率，HBuilderX将 uni-app 常用代码封装成了以 u 开头的代码块，如在 template 标签内输入 ulist 回车，会自动生成如下代码：<view class="uni-list">    

H5正常但App异常的可能性css异常：不支持的选择器 非H5端不支持*选择器；body的元素选择器请改为page，同样，div和ul和li等改为view、span和font改为text、a改为navigator、img改为image...webview浏览器兼容性vue页面在App端，默认是被系统的webview渲染的（不是手机自带浏览器，是rom的webview），在较老的手机上，比如Andr

跨端兼容uni-app 已将常用的组件、JS API 封装到框架中，开发者按照 uni-app 规范开发即可保证多平台兼容，大部分业务均可直接满足。但每个平台有自己的一些特性，因此会存在一些无法跨平台的情况。大量写 if else，会造成代码执行性能低下和管理混乱。编译到不同的工程后二次修改，会让后续升级变的很麻烦。在 C 语言中，通过 #ifdef、#ifndef 的方式，为 windows、m

uni-app App 端内置 HTML5+ 引擎，让 js 可以直接调用丰富的原生能力。条件编译调用 HTML5+小程序及 H5 等平台是没有 HTML5+ 扩展规范的，因此在 uni-app 调用 HTML5+ 的扩展规范时，需要注意使用条件编译。否则运行到h5、小程序等平台会出现 plus is not defined错误。//&n

介绍uni-app App端内置了一个基于 weex 改进的原生渲染引擎，提供了原生渲染能力。在App端，如果使用vue页面，则使用webview渲染；如果使用nvue页面(native vue的缩写)，则使用原生渲染。一个App中可以同时使用两种页面，比如首页使用nvue，二级页使用vue页面，hello uni-app示例就是如此。虽然nvue也可以多端编译，输出

全局配置Vue 全局配置H5App端旧版App端V3微信小程序说明Vue.config.silent支持支持支持支持-Vue.config.optionMergeStrategies支持支持支持支持-Vue.config.devtools支持不支持不支持不支持只在Web环境下支持Vue.config.errorHandler支持支持支持支持-Vue.config.warnHandler支持支持支持

组件Vue 组件组件是 vue 技术中非常重要的部分，组件使得与ui相关的轮子可以方便的制造和共享，进而使得vue使用者的开发效率大幅提升。uni-app搭建了组件的插件市场，可大幅提升开发者的效率。DCloud插件市场在项目的/component目录下存放组件，在要显示组件的页面中则分为3步：导入、注册和使用。可以这个评分组件的使用为例，了解vue组件的使用方式。<te

uni-app 在发布到H5时支持所有vue的语法；发布到App和小程序时，由于平台限制，无法实现全部vue语法，但uni-app仍是是对vue语法支持度最高的跨端框架。本文将详细讲解差异。相比Web平台， Vue.js 在 uni-app 中使用差异主要集中在两个方面：新增：uni-app除了支持Vue实例的生命周期，还支持应用启动、页面显示等生

页面样式与布局

路由uni-app页面路由为框架统一管理，开发者需要在pages.json里配置每个路由页面的路径和页面样式。类似的小程序在app.json中配置页面路由相同。所以uni-app的路由用法与Vue Router不同，如仍希望采用Vue Router方式管理路由，可在插件市场搜索Vue-Router。路由路由uni-app有两种页面路由重定向方式：使用导航器组件扩展，调用API重定向。页面栈框架以栈

生命周期应用生命周期uni-app 支持如下应用生命周期函数：函数名说明onLaunch当uni-app初始化完成时触发（局部只触发一次）onOpen当uni-app启动，或从后台进入前台显示onHide当uni-app从前台进入后台onError当uni-app报错时触发onUniNViewMessage对nvue页面发送的数据进行监听，可参考 nvue 向 vue 通讯onUnhan

uni-app 使用 vue 的语法 + 小程序的标签和 API。开发规范为了实现多端兼容，综合考虑编译速度，运行性能等因素，uni-app 约定了如下开发规范：页面文件向导 组件标签靠近小程序规范，详见 uni-app 组件规范互连能力（JS API）靠近微信小程序规范，但需要将 wx替换为 uni，详见 uni-app 接口规范数据绑定及事件处理同 Vue.js

1.通过HBuilderX可视化界面可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs。开始之前，开发者需先下载安装如下工具：    HBuilderX：https://www.dcloud.io/hbuilderx.html HBuilderX是通用的前端开发工具，但为uni-app制成特别强化。下载App开发版，可开箱即用