uniapp开发规范文档（uniapp案例源码）

今天给各位分享uniapp开发规范文档的知识，其中也会对uniapp案例源码进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、uniapp框架开发技巧
• 2、uni-app使用Vue.js
• 3、Uni-app之Nvue开发细节总结
• 4、混合开发之uni-app
• 5、uni-app从入门到精通
• 6、uniapp使用微信小程序云开发

uniapp框架开发技巧

//以下摘自官方文档

/*Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。例如，当你设置 vm.someData = 'new value'，该组件不会立即重新渲染。当刷新队列时，组件会在下一个事件循环“tick”中更新。多数情况我们不需要关心这个过程，但是如果你想基于更新后的 DOM 状态来做点什么，这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员使用“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们必须要这么做。为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。*/

//意思就是vue在更新视图层得数据时是异步得，可是有时候我们在代码中想要等待数据完全渲染上去dom节点之后再进行获取节点信息操作。比如使用selectorQuery.select(selector) 等相关api时，如果直接使用有时候会获取不到正确的数据，此时可以通过this.$nextTick(callback)的方式在回调函数里面进行操作dom节点

uni-app使用Vue.js

说明 ：uni-app基于 Vue 2.0 实现，开发者需注意Vue 1.0 - 2.0 的使用差异，详见 从 Vue 1.x 迁移 。

uni-app不仅支持应用生命周期和页面生命周期，还支持 vue 实例的如下生命周期函数：

注意 ：不要在选项属性或回调上使用箭头函数，比如 created: () = console.log(this.a) 或 vm.$watch('a', newValue = this.myMethod())。因为箭头函数是和父级上下文绑定在一起的，this 不会是如你做预期的 Vue 实例，且 this.a 或 this.myMethod 也会是未定义的。

几乎全支持 Vue官方文档：模板语法 ，下面讲下不支持的情况。

(1)不支持纯HTML

uni-app的非H5端里所有的 BOM／DOM 都不能用，也就是说 v-html 指令不能用，可以使用 rich-text组件 代替。或者使用三方组件wxparse，在hello uni-app中有示例。

(2)不支持部分复杂的 JavaScript 渲染表达式

非H5端无法支持复杂的 JavaScript 表达式。目前可以使用的有 + - * % ?: ! == === [] .，剩下的还待完善。

(3)不支持过滤器

编译到 App 和小程序平台时不支持使用过滤器，可以使用计算属性（computed）提前计算出数据（如果是数组类型，就提前计算整个数组），用以代替过滤器。

备注 ： 自HBuilderX 1.7.1起，在微信小程序平台支持使用过滤器。

data 必须声明为返回一个初始数据对象的函数；否则页面关闭时，数据不会自动销毁，再次打开该页面时，会显示上次数据。

注意 ：在微信小程序端，uni-app 将数据绑定功能委托给Vue，开发者需按Vue 2.0的写法实现数据绑定，不支持微信小程序的数据绑定写法，故如下写法不支持：

需修改为：

支持 Vue官方文档：计算属性 。

实现全局变量的方式需要遵循 Vue 单文件模式的开发规范。详细参考： uni-app全局变量的几种实现方式 。

非H5端不支持在 template 内使用 methods 中的函数。

备注 ： 自HBuilderX 1.7.1起，在微信小程序平台支持支持在 template 内使用 methods 中的函数。

为节约性能，我们将 Class 与 Style 的表达式通过 compiler 硬编码到 uni-app 中。

全支持 Vue官方文档：条件渲染 。

全支持vue列表渲染 Vue官方文档：列表渲染 。只是需要注意一点，嵌套列表渲染，必须指定不同的索引！需要填写 :key="xx" 。

注意 ：同级多个 v-for 时 key 的值是不允许重复的，key 的绑定是不支持表达式的，需要按照以下方式处理。

几乎全支持 Vue官方文档：事件处理器 。事件映射表如下所示：

注意 ：

(1)事件映射表中没有的原生事件也可以使用，例如map组件的regionchange 事件直接在组件上写成 @regionchange,同时这个事件也非常特殊，它的 event type 有 begin 和 end 两个，导致我们无法在handleProxy 中区分到底是什么事件，所以你在监听此类事件的时候同时监听事件名和事件类型既 map @regionchange="functionName" @end="functionName" @begin="functionName"map。

(2)为兼容各端，事件需使用 v-on 或 @ 的方式绑定，请勿使用小程序端的bind 和 catch 进行事件绑定。

(3)事件修饰符

(4)若需要禁止蒙版下的页面滚动，可使用 @touchmove.stop.prevent="moveHandle"，moveHandle 可以用来处理 touchmove 的事件，也可以是一个空函数。

(5)按键修饰符：uni-app运行在手机端，没有键盘事件，所以不支持按键修饰符。

支持 Vue官方文档：表单控件绑定 。建议开发过程中直接使用 uni-app：表单组件 。用法示例：

(1)H5 的select 标签用 picker 组件进行代替

(2)表单元素 radio 用 radio-group 组件进行代替

组件是整个 Vue.js 中最复杂的部分，支持 Vue官方文档：组件 。有且只能使用单文件组件（.vue 组件）的形式进行支持。其他的诸如：动态组件，自定义 render ，和 script type="text/x-template" 字符串模版等非H5端都不支持。详细的非H5端不支持列表：

(1)暂不支持在组件引用时，在组件上定义 click 等原生事件、v-show（可用 v-if 代替）和 class style 等样式属性(例：card class="d29054098c82556a class-name" /card 样式是不会生效的)。

Slot（scoped 暂时还没做支持）

(2)动态组件

(3)异步组件

(4)inline-template

(5)X-Templates

(6)keep-alive

(7)transition

(8)class

(9)style

(10)组件里使用 slot 嵌套的其他组件时不支持 v-for

uni-app提供了丰富的 UI组件 ，比如： picker , map 等，需要注意的是原生组件上的事件绑定，需要以 vue 的事件绑定语法来绑定，如 bindchange="eventName" 事件，需要写成 @change="eventName" 。如:

uni-app 支持配置全局组件，需在 main.js 里进行全局注册，注册后就可在所有页面里使用该组件。 注意 ：Vue.component 的第一个参数必须是静态的字符串。示例：

(1)main.js 里进行全局注册

(2)index.vue 里可直接使用组件

在 uni-app 中以下这些作为保留关键字，不可作为组件名。

备注 ：除以上列表中的名称外，标准的 HTML 及 SVG 标签名也不能作为组件名。

(1) 如何获取上个页面传递的数据

在 onLoad 里得到，onLoad 的参数是其他页面打开当前页面所传递的数据。

(2) 如何设置全局的数据和全局的方法

uni-app内置了 vuex ，在app里的使用，可参考 hello-uniapp 的 store/index.js 。

(3)如何捕获 app 的 onError

由于 onError 并不是完整意义的生命周期，所以只提供一个捕获错误的方法，在 app 的根组件上添加名为 onError 的回调函数即可。如下：

(4)组件属性设置不生效解决办法

当重复设置某些属性为相同的值时，不会同步到view层。 例如：每次将scroll-view组件的scroll-top属性值设置为0，只有第一次能顺利返回顶部。 这和props的单向数据流特性有关，组件内部scroll-top的实际值改动后，其绑定的属性并不会一同变化。解决办法有两种（以scroll-view组件为例）：

备注 ：第二种解决方式在某些组件可能造成抖动，推荐第一种解决方式。

Uni-app之Nvue开发细节总结

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

其他：待补充

混合开发之uni-app

uni-app App端内置weex渲染引擎，提供原生渲染能力

然而， Weex并不是一个前端框架 。实际上，前端框架仅仅是 Weex 的语法层或称之为 DSL (Domain-specific Language)，它们与原生渲染引擎是分离的。换句话说，Weex 并不依赖于特定的前端框架，随着前端技术的发展，Weex 也可以集成更多广泛使用的前端框架。

以往的 weex ，有个很大的问题是它只是一个高性能的渲染器，没有足够的API能力，使得开发时非常依赖原生工程师协作，开发者本来想节约成本，结果需要前端、iOS、Android 3拨人开发，适得其反。而 nvue 解决了这个大问题，让前端工程师可以直接开发完整 App，并提供原生插件的市场交易和云打包。这些组合方案，开发者切实的提高效率、降低成本。

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

uni-app App 端内置 HTML5+ 引擎，让 js 可以直接调用丰富的原生能力。

小程序及 H5 等平台是没有 HTML5+ 扩展规范的，因此在 uni-app 调用 HTML5+ 的扩展规范时，需要注意使用条件编译。否则运行到h5、小程序等平台会出现 plus is not defined错误。

在普通的 H5+ 项目中，需要使用 document.addEventListener 监听原生扩展的事件。

uni-app 中，没有 document。可以使用 plus.globalEvent.addEventListener 来实现（注意manifest中需开启新编译器，即自定义组件模式"usingComponents":true）。

同理，在 uni-app 中使用 Native.js 时，一些 Native.js 中对于原生事件的监听同样需要按照上面的方法去实现。

注意：旧编译器（非自定义组件模式）不支持 plus.globalEvent 这个对象。

uni-app从入门到精通

第1讲 : 创建项目、部署 VUE 、入口页面布局

第2讲,快速开始第一个项目

第3讲 : uni-app 开发规范及目录结构

第4讲 : uni-app 页面样式与布局

第5讲 : uni-app 配置文件 - pages.json

第6讲 : 配置文件 - manifest.json

第7讲 : uni-app 页面生命周期

第8讲 : uni-app 模板语法 - 数据绑定

第9讲Class 与 Style 绑定 （动态菜单激活示例）

第10讲 : uni-app 事件处理、事件绑定、事件传参

第11讲 : uni-app 组件 - 基础组件

第12讲 : uni-app 组件 - 表单组件

第13讲 : uni-app 组件 - navigator（导航）及页

第14讲 : uni-app 组件 - 媒体组件

第15讲 : uni-app 组件 - 地图组件

第16讲 : uni-app 接口 - 网络请求

第17讲 : uni-app 接口 - 从本地相册选择图片或使

第18讲 : uni-app 上传（图片上传实战）

第19讲 : uni-app 接口 - 数据缓存

第20讲 : uni-app 设备相关

第21讲 : uni-app 交互反馈

第22讲 : uni-app 设置导航条

第23讲 : uni-app 导航（页面流转）

第24讲 : uni-app 下拉刷新

第25讲 : uni-app 上拉加载更多

第26讲 : uni-app 第三方登录（小程序篇）

第27讲 : uni-app 登录（h5+ app 篇）

第28讲 : 自定义组件创建及使用

uniapp使用微信小程序云开发

步骤

1、veu.config.js 中推荐安装copy-webpack-plugin 5.0.0 版本。uniapp 框架文档有说明 vue-config

打开终端运行 npm 安装版本

npm install copy-webpack-plugin@5.0.0

需要5.0版本，高版本Uniapp不支持

2、创建你自己云函数目录文件。我设置的：

wxcloud/cloudfunctions

3、修改manifest.json

在uni-app根目录下，修改manifest.json中的微信小程序项，结构如下

3、vue-config-js 中配置 编译copy文件到build目录。注意 空目录可能不会拷贝（后续你可用创建函数文件就会拷贝了）。

uniapp开发规范文档的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于uniapp案例源码、uniapp开发规范文档的信息别忘了在本站进行查找喔。