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

---

学习本套课程需要储备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=1602604904242895792&wfr=spider&for=pc

   itunes历史版本下载地址（ 请下载12.9.4.102之前的版本）：https://mydown.yesky.com/pcsoft/33491427/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/466900

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 页面。

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

• ：跳转到 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。

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

今天的文章 字体图标就是将图标字体化,字体是什么（字体图标什么意思）分享到此就结束了，感谢您的阅读。