大家好，我是讯享网，很高兴认识大家。



 <p>完成 梦学谷在线教育学习平台，知识付费，博客社区，自定义视频播放器组件支持倍速播放，支持支付宝微信支付，安卓IOS微信小程序多端适配，手机验证码登录注册</p> <hr> 

讯享网

学习本套课程需要储备Vue.js全家桶知识，课程地址：

• https://item.taobao.com/item.htm?id=596790926911
• https://ke..com/course/

是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条//钉钉/淘宝）、快应用等多个平台。

公司拥有600万开发者用户，几十万应用案例、12亿手机端月活用户，数千款uni-app插件、70+微信/。

在手，做啥都不愁。即使不跨端，也是更好的小程序开发框架（详见）、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。

使用 vue 的语法 + 小程序的标签和 API 。

1. 什么是 HBuilderX

   ，H是HTML的首字母，Builder是构造者，X是HBuilder的下一代版本。我们也简称。 是轻如编辑器、强如IDE的合体版本，它是免费的。

   1. 轻巧

      仅10余M的绿色发行包(不含插件)

   2. 极速 不管是启动速度、大文档打开速度、编码提示，都极速响应 C++的架构性能远超Java或Electron架构
   3. vue开发强化 对vue做了大量优化投入，开发体验远超其他开发工具 详见 按下Alt+鼠标左键可直接打开网址
   4. 小程序支持 国外开发工具没有对中国的小程序开发优化，可新建或、等项目，为国人提供更高效工具
   5. markdown利器 是唯一一个新建文件默认类型是markdown的编辑器，也是对md支持最强的编辑器 为md强化了众多功能，请务必点击【菜单-帮助-markdown语法示例】，快速掌握md及的强化技巧！
   6. 清爽护眼 HX的界面比其他工具更清爽简洁，绿柔主题经过科学的脑疲劳测试，是最适合人眼长期观看的主题界面 详见
   7. 强大的语法提示 是中国唯一一家拥有自主IDE语法分析引擎的公司，对前端语言提供准确的代码提示和转到定义(Alt+鼠标左键)
   8. 高效极客工具 更强大的多光标、智能双击...让字处理的效率大幅提升 了解的极客技巧，详见，
   9. 更强的json支持 现代js开发中大量json结构的写法，提供了比其他工具更高效的操作 详见
   10. 丰富的快捷键

       如果你习惯了其他工具(如vscode或sublime)的快捷键，在方案中可以切换。

2. 下载 HBuilderX 开发工具

   最新版本下载：https://www.dcloud.io/hbuilderx.html

   HBuilderX历史版本下载地址： https://ask.dcloud.net.cn/article/37302

   我们从历史版本中下载 2.9.3 ，如下图: （ ==不要用2.9.7+以上，新版本对 vedio 自定义视频播放竖/横屏有问题==）

   
   讯享网
   
3. 下载好后，直接傻瓜式安装，安装后查看HuilderX版本，使用2.9.3.版本
4. 安装后，如果会弹出安装一个语法提示库插件，点击它进行安装（不弹就忽略它）。安装成功后，重启HuilderX

   

   

使用了scss/sass语法后需要编译为css。uni-app会自动编译或对文件右键-外部命令编译时使用。

1. 浏览器访问下面链接，点击右侧 > 弹出窗口点击 ：

   https://ext.dcloud.net.cn/plugin?name=compile-node-sass

   
2. 在 HuilderX 会弹出是否安装，点击
3. 安装成功后，在页面的style标签上使用 lang="scss" 后即可编写scss代码

   讯享网

1. 文件-新建-项目

2. 打开新建项目窗口后，项目名 , 具体如下操作，

HBuilder/HBuilderX真机运行、手机运行、真机联调常见问题 http://ask.dcloud.net.cn/article/97

新安装HBuilderX工具的要保证有App真机运行插件，有手机才会被HBuilder识别。

上面是预告，连接步骤：

1. 确认手机已通过数据线连接电脑
2. 电脑下载iTunes，确认iTunes能正常连接手机

   (爱思官方可下：http://url.i4.cn/UjuIbiaa)

   
3. 如手机屏幕弹出需信任本计算机的询问，请同意该授权
4. 连接成功，在Hbuilder菜单栏上点击 运行 ，如下图就可以查看到手机型号，运行项目到手机上

   

   如果显示未检测到设备，就是Hbuilder没有识别到，连接失败，参见官方说明 http://ask.dcloud.net.cn/article/97

5. 运行后，查看控制台到如下日志，说明APP已经安装到手机，
6. 打开手机，查看桌面上已经有一个 的APP后，当前点击app还打不开，
7. 然后如下操作后就可以打开APP了，步骤：

   "设置"---》"通用"---》"设备管理" (或"描述文件"。这步app安装成功后才找得到）--- 》找到 Digital Heaven 开头的证书 》 信任

   

1. 关于本机(指==Mac系统的关于本机==，非手机) --> 系统报告 -> usb -> 你所连接的device --> 厂商ID或者供应商ID(Vendor ID)

   

   
2. 在终端执行如下命令：echo xxxxxx >> ~/.android/adb_usb.ini （“xxxxxx”为厂商ID或者供应商ID(Vendor ID)，有些系统下echo命令并不能正确写入文件，可在~/.android/目录下修改或新建adb_usb.ini添加xxxxxx）

3. 重启HBuilderX。
4. 如重启HBuilderX仍然不行，请使用命令行(终端.app)，切换到HBuilderX自带的adb目录。
5. HBuilderX正式版的adb目录位置：tools/adbs目录（MAC下为HBuilderX.app/Contents/tools/adbs目录）
6. HBuilderX Alpha版的adb目录位置：plugins/launcher/tools/adbs目录（MAC下为目录）
7. 在adbs目录下运行重试。
8. 重启电脑重试。

。

如果手机连接没有任何反应或提示驱动问题，可通过以下方式解决：

1. 装驱动比较好的方式是使用各种手机助手，比如，如果有问题，尝试升级助手的版本。
2. 打开手机开发者模式，（不同机型打开方式不一样，自行百度）一般是找到机器版本号。如打开开发者模式：关于手机》设备停止》版本号 （多点击它几下，会提示已打开开发者模式）
3. 找下手机是否有个 usb调试，打开它

1. 确认手机已通过数据线连接电脑
2. 确认已安装iTunes，若未安装点击itunes历史版本下载地址, 请下载12.9.4.102之前的版本

   win7安装itunes失败说明：https://baijiahao.baidu.com/s?id=&wfr=spider&for=pc

   itunes历史版本下载地址（ 请下载12.9.4.102之前的版本）：https://mydown.yesky.com/pcsoft//versions/

   • 12.9.4.102 版本会出现以下情况，所以不使用这个版本：

   

   • 12.11.0.26版本itunes连接上，但是HBuilder识别不到；或者itunes连接不上手机

     ==如果出现上面情况，安装 工具，然后手机usb连接电脑，打开 itools 工具，它会自动修复驱动，需要等待10分钟左右。等itools识别到了后，将 HBuilderX重启，就可以识别到了。==

     

   • 如果重新安装itunes 识别不到iphone，没有卸载干净，按下面网站卸载

     https://zhidao.baidu.com/question/1731993899251396907.html

     apple官网提示（我测试无效）：https://discussionschinese.apple.com/thread/79226

3. 确认iTunes能正常连接手机
4. 如手机屏幕弹出需信任本计算机的询问，请同意该授权

   如果不小心点了不信任，可请前往“设置”>“通用”>“还原”>“还原位置与隐私”

5. 如果是第一次安装完itunes，建议重新启动HBuilderX
6. 如果以上方案都无法解决，有可能是因为本地库与iTunes带的库冲突了，一般是iTunes库目录（32位系统目录为：C:Program FilesCommon FilesAppleApple Application Support，64位系统目录为：C:Program Files (x86)Common FilesAppleApple Application Support）下的dll文件和系统库目录（32位系统目录为：C:WINDOWSsystem32，64位系统目录为：C:WindowsSysWOW64）下的dll重名，可将iTunes库目录下的同名dll文件拷贝到系统库目录下，或者将系统目录下的同名dll文件重命名或删除，然后再重启HBuilder或者重试真机运行
7. 有可能是iTunes安装时依赖库丢失，尝试重装iTunes解决问题
8. iTools提供了一个修复驱动的工具和教程，可以参考http://bbs.itools.cn/thread-129390-1-1.html

1. 下载微信小程序开发工具稳定版： https://developers.weixin..com/miniprogram/dev/devtools/download.html
2. 安装微信小程序开发者工具
3. 运行到微信小程序，如下
4. 如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功。如下图，需在输入框输入微信开发者工具的安装路径。 若HBuilderX不能正常启动微信开发者工具，需要开发者手动启动，然后将uni-app生成小程序工程的路径拷贝到微信开发者工具里面，在HBuilderX里面开发，在微信开发者工具里面就可看到实时的效果。

   

1. 访问 https://mp.weixin..com/ 注册微信小程序个人帐号，注册后，再登录如下操作查看AppID
2. 打开HBuilderX工具中，项目的 文件，点击微信小程序 将AppID粘贴进入就可以了，
3. 打开工具，点击右上角 详情 》基本信息》会有一个AppID框，将上面复制的AppID粘贴即可。

   

   

4. 点击菜单栏的 预览》自动预览》编译并预览，你打开小程序绑定的微信号，它就会自动运行打开小程序

   

报错： Cannot read property 'forceUpdate' of undefined

解决：

uni，读 ，是统一的意思。

不需要专门去学习小程序的语法，uni-app使用的是vue的语法，不是小程序自定义的语法。

学习本套课程需要储备Vue.js全家桶知识，课程地址：

• https://item.taobao.com/item.htm?id=596790926911
• https://ke..com/course/

uni-app 官方文档内容说明，根据官方导航栏模块查找知识：

• 搜索框：有疑问直接搜索框输入，BUG直接复制错误提示粘贴上去搜索。
• 介绍：先看这个页面，就知道uniapp大体知识，覆盖了哪些内容，如何进行开发。
• 框架：pages.json 配置项、生命周期、页面通讯、日志打印、定时器。
• API： 为开发APP、小程序、H5等提供的内置函数。
• uniCloud: 简化服务端开发，不用自己开发服务端代码。

1. 一个uni-app项目，默认包含如下目录及文件：

讯享网

注意

• 编译到任意平台时， 目录下的文件均会被打包进去，非 目录下的文件（vue、js、css 等）被引用到才会被包含进去。
• 目录下的 文件不会被编译，如果里面有 的代码，不经过转换直接运行，在手机设备上会报错。
• 、 等资源同样不要放在 目录下，建议这些公用的资源放在 目录下。

总结

• ==static 目录放图片、视频资源。common目录放 、 、 等资源，components 目录放可复用vue组件==

说明

• 内引入静态资源，如、等标签的属性时，可以使用相对路径或者绝对路径，形式如下

注意

• 开头的绝对路径以及相对路径会经过base64转换规则校验
• 引入的静态资源在非h5平台，均不转为base64。
• H5平台，小于4kb的资源会被转换成base64，其余不转。
• 支付宝小程序组件内 image 标签不可使用相对路径

==总结==

• 因为支付宝小程序使用 image 时不可使用相对路径，所以项目中==全部使用绝对路径，推荐以 @ 开头，==原因看下面js文件。

说明

• 文件或标签内（包括renderjs等）引入文件时，可以使用相对路径和绝对路径，形式如下

  讯享网

注意

• js文件不支持使用开头的方式引入

==总结==

• 模板中的标签属性在引入图片、视频资源时，使用以 开头的绝对路径；

  而引入js文件时不能使用开头的方式，所以项目中==全部使用绝对路径，推荐以 @ 开头==

说明

• 文件或内引入文件时（scss、less文件同理），可以使用相对路径或绝对路径

注意

• 自起支持绝对路径引入静态资源，旧版本不支持此方式

说明

• 文件或内引用的图片路径可以使用相对路径也可以使用绝对路径，
• 需要注意的是，有些小程序端css文件不允许引用本地文件（请看注意事项）。

讯享网

注意

• 引入字体图标请参考，字体图标
• 开头的绝对路径以及相对路径会经过base64转换规则校验
• 不支持本地图片的平台，小于40kb，一定会转base64。（共四个平台mp-weixin, mp-, mp-toutiao, app v2）
• h5平台，小于4kb会转base64，超出4kb时不转。其余平台不会转base64

总结

• 推荐项目中==全部使用绝对路径，推荐以 @ 开头==，原因见上面2节总结。

• ==在项目开发时，引用任意类型资源文件，全部使用以 开头的绝对路径方式引入。原因见上面3节==

  注意：引入字体图标文件时，使用 开头，如

1. 进入阿里巴巴矢量图标库https://www.iconfont.cn/，添加图标到项目，然后下载至本地

   

2. 下载解压后的本地文件如下：

3. 把 iconfont.css 和 iconfont.ttf 文件拷贝到 /static/icon/ 目录下

4. 修改 iconfont.css （Hbuilder 工具取消自动换行（视图》自动换行），不管多长都在一行显示）

   修改后如下图，注意 src 最后加上个分号

   

方式一：Unicode 引用步骤

Unicode 是字体在网页端最原始的应用方式，特点是：

• 兼容性最好，支持 IE6+，及所有现代浏览器。
• 支持按字体的方式去动态调整图标大小，颜色等等。
• 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
• 多色有需求建议使用 symbol 的引用方式

1. 在 App.vue 文件的 标签下完成 引用 .ttf 字体文件 和 定义 iconfont 的样式

   字体文件的引用路径推荐使用以 ==~@== 开头的绝对路径。

   网络路径必须加协议头 。

   阿里 在线图标链接复制如下（一定不要忘记加 ==https://==）：

   
2. 挑选相应图标并获取字体编码，应用于页面

   注意：类名是 ，字体编码开头 结尾

   讯享网

方式二：Font-class 类名引用步骤(推荐方式)

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

与 Unicode 使用方式相比，具有如下特点：

• 兼容性良好，支持 IE8+，及所有现代浏览器。
• 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
• 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
• 不过因为本质上还是使用的字体，所以多色图标还是不支持的。

1. 在 App.vue 文件的 标签下使用 import 导入 字体文件

   把上面方式一的代码注释掉，避免相互影响

   注意：font-class类名方式，微信小程序开发工具上不支持网络链接，只支持本地方式；打包上线时，只支持在线方式

   阿里 在线图标链接复制如下（一定不要忘记加 ==https://==）微信小程序不支持网络链接，只支持本地方式：

   
2. 挑选相应图标并获取类名，应用于 .vue 页面

   注意： 和 是 文件声明的， 是具体的图标类名

   讯享网

   当前使用 font-class 方式引入字体图标后，也可以采用Unicode字符编码方式使用图标。

说明

• nvue 要使用 Unicode 引用。
• 文件中不可直接使用css的方式引入字体文件，需要在每个nvue文件中使用js的方式引入。无法App.vue全局引入。
• 内不支持本地路径引入字体，请==使用网络链接或者形式。==

步骤

1. 比如在 video.nvue 文件要使用字体图标，那在此组件的 生命钩子加载 文件。

   注意：== 属性的的括号内一定要使用将链接地址引起来。==

   讯享网

2. 在 中声明 引用上面加载的字体文件，定义图标大小和颜色。

   注意：==下面 的值对应上面 js 中的 值。==

3. 挑选相应图标并获取字体编码，应用于 .nvue 页面

   注意：类名是 ，字体编码开头 结尾

   讯享网

1. 进入阿里巴巴矢量图标库https://www.iconfont.cn/，添加图标到项目，然后下载至本地

   

   解压后的本地文件如下，核心的是 iconfont.eot 文件。

   
2. 打开电脑命令行，执行以下命令，全局安装 iconfont-tools 转换工具

3. 执行cd命令进入第1步解压后的文件夹后，再执行如命令，然后回车

   讯享网

   回车后，根据提示输入对应的值，与下图保持一致，后面需要使用：

   

4. 执行完后，就会多出来一个 的文件夹

   

   
5. 进入 文件夹，将其中的 复制到项目的 目录下

   

6. 然后在 App.vue 引入该文件

7. 使用：其中 开头是必须的

   讯享网

8. 彩色图标当前对 vue文件有效，控制台会关于 backgroud 的相关警告，可忽略它

关于字体图标大总结：

1. vue 文件中使用Font-class类名方式，统一在中引入iconfont.css图标文件，

   特别强调：目前微信小程序开发工具不支持网络链接，只支持本地方式;打包上线时，只支持在线方式

   模板中使用：

   讯享网

2. nvue 文件使用Unicode字符编码方式，在每个要使用图标的 文件中分别引入iconfont.ttf图标文件，
   • 引入方式具体参见上面
   • 模板中使用：

参考：https://uniapp.dcloud.io/collocation/pages

文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

用于设置应用的状态栏、导航条、标题、窗口背景色等。下面配置项默认应用于每个页面。

==注意：更改 pages.json 里面的配置信息后，最好是重新运行项目，并且手机上的app也要退出重新打开；不然有时候不生效。==

注意

• 支付宝小程序使用时必须使用的图片链接地址，需要真机调试才能看到效果，支付宝开发者工具内无效果
• 中设置的也会覆盖掉->内的设置文字标题

参考配置如下：

讯享网

平台差异官方未更新，老师测试了下面是黄色部分也是可以的

参考配置如下：

主要用于下拉刷新数据，上拉触底查询下一页数据。一般针对需要使用的页面进行配置，而不会全局配置。

参考：https://uniapp.dcloud.net.cn/collocation/pages?id=pages

通过 pages 节点配置应用由哪些页面组成，pages 节点接收一个数组，数组每个项都是一个对象，其属性值如下：

Tips：

• pages节点的第一项为应用入口页（即首页）
• 应用中新增/减少页面，都需要对 pages 数组进行修改
• 文件名不需要写后缀，框架会自动寻找路径下的页面资源

代码示例：

讯享网

参考：https://uniapp.dcloud.net.cn/collocation/pages?id=tabbar

代码示例

页面路由为框架统一管理，开发者需要在pages.json里配置每个路由页面的路径及页面样式。所以 的路由用法与 不同，如仍希望采用 方式管理路由，可在插件市场搜索 Vue-Router。

有两种页面路由跳转方式：调用API跳转、navigator组件跳转。

参考：https://uniapp.dcloud.io/api/router?id=navigateto

• : 保留当前页面，跳转到应用内的某个页面，使用可以返回到原页面。

  注意：

  • 跳转到 tabBar 页面只能使用 switchTab 跳转

  讯享网

• : 重定向页面，关闭当前页面，跳转到应用内的某个页面，返回不到原页面。

  注意：

  • 跳转到 tabBar 页面只能使用 switchTab 跳转

  讯享网

  测试：从 index.vue 进 login.vue ，再重定向到 order.vue 页面，然后点击 order.vue 导航栏后退按钮，回到了 index.vue 页面。

• ：关闭所有页面，打开到应用内的某个页面。==导航<后退按钮，无法后退。==

• ：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

  讯享网

• ：关闭当前页面，返回上一页面或多级页面。

动画注意：

• 窗口的显示/关闭动画效果仅App支持，可作用在：
  • API （animationTyp参数）
  • navigator 组件（animation-type属性），但是测试 animation-type="slide-in-bottom" 并无动画效果，bug
  • pages.json (animationType) 中配置，
  • 优先级为：。

  动画取值：

  显示动画 关闭动画 显示动画描述（==关闭动画与之相反==） slide-in-right slide-out-right 新窗体从右侧进入 slide-in-left slide-out-left 新窗体从左侧进入 slide-in-top slide-out-top 新窗体从顶部进入 slide-in-bottom slide-out-bottom 新窗体从底部进入 pop-in pop-out 新窗体从左侧进入，且老窗体被挤压而出 fade-in fade-out 新窗体从透明到不透明逐渐显示 zoom-out zoom-in 新窗体从小到大缩放显示 zoom-fade-out zoom-fade-in 新窗体从小到大逐渐放大并且从透明到不透明逐渐显示 none none 无动画

参考：https://uniapp.dcloud.net.cn/component/navigator

使用 组件类似HTML中的组件，但只能跳转本地页面。目标页面必须在pages.json中注册。

示例代码

注意动画效果可能无效

讯享网

在 uni-app 中包含了 应用生命周期、页面生命周期、和组件生命周期（ Vue.js的）函数。

参考：https://uniapp.dcloud.io/collocation/frame/lifecycle

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

注意：==应用生命周期仅可在中监听，在其它页面监听无效。==

示例代码

讯享网

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

• 在 pages.json中配置的页面才有以下函数，子组件中没有这些函数
  函数名 说明 平台差异说明 最低版本 onLoad 监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例 onShow 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面 onReady 监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发 onHide 监听页面隐藏

组件支持的生命周期，与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期：

==注意：一般在子组件使用，当然页面中也是可以使用的。==

参考：https://uniapp.dcloud.net.cn/frame?id=运行环境判断

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

• 在 HBuilderX 中，点击“运行”编译出来的代码是开发环境，点击“发行”编译出来的代码是生产环境

uni-app 已将常用的组件、JS API 封装到框架中，开发者按照 uni-app 规范开发即可保证多平台兼容，大部分业务均可直接满足。

但每个平台有自己的一些特性，因此会存在一些无法跨平台的情况。

• 大量写 if else，会造成代码执行性能低下和管理混乱。
• 编译到不同的工程后二次修改，会让后续升级变的很麻烦。

在 C 语言中，通过 #ifdef、#ifndef 的方式，为 windows、mac 等不同 os 编译不同的代码。 参考这个思路，为 提供了条件编译手段，在一个工程里优雅的完成了平台个性化实现。

平台判断有2种场景，一种是在编译期判断（条件编译），一种是在运行期判断。

• 条件编译：是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。
• 写法：==以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。==
  • ：if defined 仅在某平台存在
  • ：if not defined 除了某平台均存在
  • %PLATFORM%：平台名称，可取值如下：
  值 平台 APP-PLUS App APP-PLUS-NVUE或APP-NVUE App nvue H5 H5 MP-WEIXIN 微信小程序 MP-ALIPAY 支付宝小程序 MP-BAIDU 百度小程序 MP-TOUTIAO 字节跳动小程序 MP- 小程序 MP-360 360小程序 MP 微信小程序/支付宝小程序/百度小程序/字节跳动小程序/小程序/360小程序 QUICKAPP-WEBVIEW 快应用通用(包含联盟、华为) QUICKAPP-WEBVIEW-UNION 快应用联盟 QUICKAPP-WEBVIEW-HUAWEI 快应用华为
• 示例说明
  条件编译写法 说明 #ifdef APP-PLUS 需条件编译的代码 #endif 仅出现在 App 平台下的代码 #ifndef H5 需条件编译的代码 #endif 除了 H5 平台，其它平台均存在的代码 #ifdef H5 || MP-WEIXIN 需条件编译的代码 #endif 在 H5 平台或微信小程序平台存在的代码（这里只有||，不可能出现&&，因为没有交集）
• 支持的文件
  • .vue
  • .js
  • .css
  • pages.json
  • 各预编译语言文件，如：.scss、.less、.stylus、.ts、.pug
• 注意：
  • 条件编译是利用注释实现的，在不同语法里注释写法不一样，js使用 、==css 使用 ==、vue/nvue 模板里使用
  • 条件编译 APP-PLUS 包含 APP-NVUE 和 APP-VUE，APP-PLUS-NVUE和APP-NVUE没什么区别，为了简写后面出了APP-NVUE ；

讯享网

示例：

讯享网

示例:

讯享网

注意： 样式的条件编译，==无论是 css 还是 sass/scss/less/stylus 等预编译语言中，必须使用 的写法。==

正确写法：

==错误写法：==

讯享网

下面的页面，只有运行至 App 时才会编译进去。

不同平台下的特有功能，以及小程序平台的分包，都可以通过 pages.json 的条件编译来更好地实现。这样，就不会在其它平台产生多余的资源，进而减小包体积。

在不同平台，引用的静态资源可能也存在差异，通过 static 的的条件编译可以解决此问题，static 目录下新建不同平台的专有目录（目录名称同 值域,但字母均为小写），专有目录下的静态资源只有在特定平台才会编译进去。

如以下目录结构， 只有在微信小程序平台才会编译进去， 在所有平台都会被编译。

Android 和 iOS 平台不支持通过条件编译来区分，如果需要区分 Android、iOS 平台，请通过调用 uni.getSystemInfo 来获取平台信息。

• 运行期判断 运行期判断是指代码已经打入包中，仍然需要在运行期判断平台，此时可使用 判断客户端环境是 Android、iOS 还是小程序开发工具（在百度小程序开发工具、微信小程序开发工具、支付宝小程序开发工具中使用 返回值均为 devtools）。

  讯享网

  如有必要，也可以在条件编译里自己定义一个变量，赋不同值。在后续运行代码中动态判断环境。

• 判断是否为： IOS 平台的APP端

参考：https://uniapp.dcloud.net.cn/frame?id=页面样式与布局

支持的通用 css 单位包括 px、rpx

• px 即屏幕像素
• rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大。但在 App 端和 H5 端屏幕宽度达到 960px 时，默认将按照 375px 的屏幕宽度进行计算，具体配置参考：rpx计算配置
• 可以使用 将 rpx 大小转为 px 大小。

下面对 详细说明：

设计师在提供设计图时，一般只提供一个分辨率的图。

严格按设计图标注的 px 做开发，在不同宽度的手机上界面很容易变形。

而且主要是宽度变形。高度一般因为有滚动条，不容易出问题。由此，引发了较强的动态宽度单位需求。

微信小程序设计了 rpx 解决这个问题。 在 App 端、H5 端都支持了 ，并且可以配置不同屏幕宽度的计算方式，具体参考：rpx计算配置。

rpx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。 规定屏幕基准宽度 750rpx。

开发者可以通过设计稿基准宽度计算页面元素 rpx 值，设计稿 1px 与框架样式 1rpx 转换公式如下：

讯享网

换言之，页面元素宽度在 中的宽度计算公式：

举例说明：

1. 若设计稿宽度为 750px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 里面的宽度应该设为：，结果为：100rpx。
2. 若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 里面的宽度应该设为：，结果为：117rpx。
3. 若设计稿宽度为 375px，元素 B 在设计稿上的宽度为 200px，那么元素 B 在 里面的宽度应该设为：，结果为：400rpx。

定义在 App.vue 中的样式为全局样式，作用于每一个页面。

在 pages 目录下 的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。

注意：

• App.vue 中通过 语句可以导入外联样式文件，一样作用于每一个页面。

  讯享网

uni-app 提供内置 CSS 变量

注意：

• 此变量在微信小程序环境为固定 ，在 App 里为手机实际状态栏高度。
• 当设置 取消原生导航栏后，由于窗体为沉浸式，占据了状态栏位置。此时可以使用一个高度为 的 view 放在页面顶部，避免页面内容出现在状态栏。
• 由于在H5端，不存在原生导航栏和tabbar，也是前端div模拟。如果设置了一个固定位置的居底view，在小程序和App端是在tabbar上方，但在H5端会与tabbar重叠。此时可使用，不管在哪个端，都是固定在tabbar上方。
• 目前 nvue 在App端，还不支持 变量，替代方案是在页面onLoad时通过uni.getSystemInfoSync().statusBarHeight获取状态栏高度，然后通过style绑定方式给占位view设定高度。下方提供了示例代码

中以下组件的高度是固定的，不可修改：

各小程序平台，包括同小程序平台的iOS和Android的高度也不一样。

参考：https://uniapp.dcloud.net.cn/frame?id=template-block

支持在 template 模板中嵌套 和 ，用来进行 列表渲染 和 条件渲染。

和 并不是一个组件，它们仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

在不同的平台表现存在一定差异，==推荐统一使用 ==。

代码示例

讯享网

为兼容多端跨平台运行，建议使用flex布局进行开发，关于Flex布局可以参考外部文档A Complete Guide to Flexbox、阮一峰的flex教程等。

参见：https://uniapp.dcloud.net.cn/nvue-outline

nvue是属于 weex 编写范畴，作用是增强uniapp对原生渲染支持

nvue的组件和API写法与vue页面一致，其内置组件还比vue页面内置组件增加了更多，详见。

基于原生引擎的渲染，虽然还是前端技术栈，但和web开发肯定是有区别的。

1. nvue 页面控制显隐只可以使用不可以使用
2. nvue 页面只能使用布局，不支持其他布局方式。页面开发前，首先想清楚这个页面的纵向内容有什么，哪些是要滚动的，然后每个纵向内容的横轴排布有什么，按 flex 布局设计好界面。
3. nvue 页面的布局排列方向默认为竖排（），如需改变布局方向，可以在 -> -> -> 节点下修改，仅在 uni-app 模式下生效。详情。
4. nvue页面编译为H5、小程序时，会做一件css默认值对齐的工作。因为weex渲染引擎只支持flex，并且默认flex方向是垂直。而H5和小程序端，使用web渲染，默认不是flex，并且设置后，它的flex方向默认是水平而不是垂直的。所以nvue编译为H5、小程序时，会自动把页面默认布局设为flex、方向为垂直。当然开发者手动设置后会覆盖默认设置。
5. 文字内容，必须、只能在组件下。不能在、的区域里直接写文字。否则即使渲染了，也无法绑定js里的变量。
6. 只有标签可以设置字体大小，字体颜色。
7. 布局不能使用百分比、没有媒体查询。
8. nvue 切换横竖屏时可能导致样式出现问题，建议有 nvue 的页面锁定手机方向。
9. 支持的css有限，不过并不影响布局出你需要的界面，还是非常强大的。详见
10. 不支持背景图。但可以使用组件和层级来实现类似web中的背景效果。因为原生开发本身也没有web这种背景图概念
11. css选择器支持的比较少，只能使用 class 选择器。详见
12. nvue 的各组件在安卓端默认是透明的，如果不设置，可能会导致出现重影的问题。
13. 进行绑定时只支持数组语法。
14. Android端在一个页面内使用大量圆角边框会造成性能问题，尤其是多个角的样式还不一样的话更耗费性能。应避免这类使用。
15. nvue页面没有回弹效果，只有几个列表组件有效果，包括 、、。
16. 原生开发没有页面滚动的概念，页面内容高过屏幕高度并不会自动滚动，只有部分组件可滚动（、、），要滚得内容需要套在可滚动组件下。这不符合前端开发的习惯，所以在 nvue 编译为 uni-app模式时，给页面外层自动套了一个 ，页面内容过高会自动滚动。（组件不会套，页面有时也不会套）。后续会提供配置，可以设置不自动套。
17. 在 App.vue 中定义的全局js变量不会在 nvue 页面生效。和是生效的。
18. App.vue 中定义的全局css，对nvue和vue页面同时生效。如果全局css中有些css在nvue下不支持，编译时控制台会报警，建议把这些不支持的css包裹在条件编译里，
19. 不能在 中引入字体文件，nvue 中字体图标的使用参考：加载自定义字体。如果是本地字体，可以用的API转换路径。
20. 目前不支持在 nvue 页面使用 。
21. nvue 页面关闭原生导航栏时，想要模拟状态栏，可以参考文章。但是，仍然强烈建议在nvue页面使用原生导航栏。nvue的渲染速度再快，也没有原生导航栏快。原生排版引擎解析绘制原生导航栏耗时很少，而解析nvue的js绘制整个页面的耗时要大的多，尤其在新页面进入动画期间，对于复杂页面，没有原生导航栏会在动画期间产生整个屏幕的白屏或闪屏。

• nvue的css仅支持flex布局，是webview的css语法的子集。这是因为操作系统原生排版不支持非flex之外的web布局。当然flex足以排布出各种页面，只是写法需要适应。
• 在选择器方面支持的较少，只支持简单的。
• class 进行绑定时只支持数组语法。
• 不支持媒体查询
• 不支持复合样式，不支持简写
• 不能在 style 中引入字体文件
• 布局不能使用百分比，如；
• 有些web的css属性在nvue里无法支持，比如背景图。但可以使用image组件和层级来实现类似web中的背景效果。因为原生开发本身也没有web这种背景图概念
• nvue 的各组件在安卓端默认是透明的，如果不设置，可能会导致出现重影的问题
• 文字内容，必须只能在组件下，组件不能换行写内容，否则会出现无法去除的周边空白
• 只有标签可以设置字体大小，字体颜色

https://uniapp.dcloud.io/collocation/frame/communication

触发全局的自定事件。附加参数都会传给监听器回调。

代码示例

监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。

代码示例

讯享网

监听全局的自定义事件。事件可以由 uni.$emit 触发，但是只触发一次，在第一次触发之后移除监听器。

代码示例

移除全局自定义事件监听器。在 un

代码示例

讯享网

Tips

• 如果没有提供参数，则移除所有的事件监听器；
• 如果只提供了事件，则移除该事件所有的监听器；
• 如果同时提供了事件与回调，则只移除这个回调的监听器；
• 提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器；

参考：https://uniapp.dcloud.net.cn/component/README

它类似于传统html中的div，用于包裹各种元素内容。

如果使用nvue，则需注意，包裹文字应该使用text组件 。

属性说明

可滚动视图区域。用于区域滚动。针对一个区域左右、上下滑动

使用竖向滚动时，需要给 一个固定高度，通过 css 设置 height。

滑块视图容器。 是多个区域左右、上下切换。比如banner轮播图。

注意滑动切换和滚动的区别，滑动切换是一屏一屏的切换。swiper下的每个swiper-item是一个滑动切换区域，不能停留在2个滑动区域之间。

讯享网

media query 匹配检测节点。自适应屏幕大小显示和隐藏某区域

类似于网页开发中使用媒体查询来适配大屏小屏，match-media是一个可适配不同屏幕的基本视图组件。可以指定一组 media query 媒体查询规则，满足查询条件时，这个组件才会被展示。

例如：在match-media组件中放置一个侧边栏，媒体查询规则设置为宽屏才显示，就可以实现在PC宽屏显示该侧边栏，而在手机窄屏中不显示侧边栏的效果。

平台兼容性

注意：支付宝小程序、小程序、百度小程序、字节小程序，暂不支持监听屏幕动态改变，即只执行一次媒体查询。

属性说明

示例代码

和 组件组合使用，实现可拖动区域组件。由于app和小程序的架构是逻辑层与视图层分离。

指代可拖动的范围，在其中内嵌组件用于指示可拖动的区域。其中必须在组件中，并且必须是直接子节点，否则不能移动。

即手指/鼠标按住拖动或双指缩放，但拖不出规定的范围。

当然也可以不拖动，而使用代码来触发在里的移动缩放。

平台差异说明

注意：

• movable-area 和 movable-view 都必须设置 width 和 height 属性，不设置默认为 10px
• movable-area app-nvue平台 暂不支持手势缩放，并且和滚动冲突。
• movable-view 默认为绝对定位，top和left属性为0px
• 当 movable-view 小于movable-area 时，movable-view的移动范围是在movable-area内；当movable-view大于movable-area时，movable-view的移动范围必须包含movable-area（x轴方向和y轴方向分开考虑）

cover-view

覆盖在原生组件上的文本视图。

app-vue和小程序框架，渲染引擎是webview的。但为了优化体验，部分组件如map、video、textarea、canvas通过原生控件实现，原生组件层级高于前端组件（类似flash层级高于div）。为了能正常覆盖原生组件，设计了cover-view。

• app-nvue所有组件均为原生渲染，不存在前端组件无法覆盖原生组件的问题。但为了保持多端兼容，nvue里也实现了，作用于普通一样。
• 微信小程序部分原生组件实现了同层渲染，在指定的基础库版本上，某些原生组件可无需使用覆盖，详见
• 字节跳动小程序不需要，因其原生组件均实现了同层渲染。
• 360小程序不存在原生组件，无此概念

示例代码

将 /pages/question/question.==vue== 文件改为 question.==nvue==

讯享网

cover-image

覆盖在原生组件上的图片视图。可覆盖的原生组件同，支持嵌套在里。与 组件使用方式一样。

其他组件使用方式参见文档，后面用的时间会讲。

参考：https://uniapp.dcloud.net.cn/api/storage/storage?id=setstorage

注意

uni-app的Storage在不同端的实现不同：

• H5端为localStorage，浏览器限制5M大小，是缓存概念，可能会被清理
• App端为原生的plus.storage，无大小限制，不是缓存，是持久化的
• 各个小程序端为其自带的storage api，数据存储生命周期跟小程序本身一致，即除用户主动删除或超过一定时间被自动清理，否则数据都一直可用。
• 微信小程序单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。
• 支付宝小程序单条数据转换成字符串后，字符串长度最大200*1024。同一个支付宝用户，同一个小程序缓存总上限为10MB。
• 百度、字节跳动小程序文档未说明大小限制

除此之外，其他数据存储方案：

• H5端还支持websql、indexedDB、sessionStorage
• App端还支持SQLite、IO文件等本地存储方案。

相关API

• 将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。

• 将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。

  讯享网

• 从本地缓存中异步获取指定 key 对应的内容。

• 从本地缓存中同步获取指定 key 对应的内容。

  讯享网

• 从本地缓存中异步移除指定 key。

• 从本地缓存中同步移除指定 key。

  讯享网

• 和 都是清理本地数据缓存。