梦学谷在线教育平台，知识付费，博客社区，倍速视频播放，支付宝微信支付，多端适配

注意：导入此插件需要使用2.9+以上版本的HBuilderX

本站所有收费插件均支持免费试用，切勿私下交易或购买不可正常试用的插件，而造成不必要的纠纷。

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

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

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

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

上面是预告，连接步骤：

确认已安装Android手机驱动。

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

报错：Cannotreadproperty'forceUpdate'ofundefined

解决：

uni，读youni，是统一的意思。

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

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

总结

说明

注意

==总结==

/*绝对路径*/background-image:url(/static/logo.png);background-image:url(@/static/logo.png);/*相对路径*/background-image:url(../../static/logo.png);注意

方式一：Unicode引用步骤

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

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

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

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

步骤

关于字体图标大总结：

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

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

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

参考配置如下：

"globalStyle":{//状态栏与导航栏背景色"navigationBarBackgroundColor":"#FFFFFF",//状态栏与导航栏字体颜色，仅支持black/white(默认)"navigationBarTextStyle":"black",//导航栏标题文字"navigationBarTitleText":"梦学谷",//导航栏图片地址（替换导航栏标题文字）"titleImage":"/static/logo.png",//导航栏整体透明（always一直透明/auto滑动自适应/none不透明）"transparentTitle":"auto"//导航栏样式，仅支持default/custom,custom不显示原生导航栏，状态栏也不占位//"navigationStyle":"default"}bounce下拉下拉回弹平台差异官方未更新，老师测试了下面是黄色部分也是可以的

"globalStyle":{//...//上拉下拉回弹背景色（ios和真机微小程序）"backgroundColor":"#e42863",//下拉顶部回弹背景色（ios和真机微小程序）"backgroundColorTop":"#000",//上拉底部回弹背景色（ios和真机微小程序）"backgroundColorBottom":"#345DC2"}下拉刷新和上拉触底主要用于下拉刷新数据，上拉触底查询下一页数据。一般针对需要使用的页面进行配置，而不会全局配置。

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

Tips：

代码示例：

代码示例

动画注意：

动画取值：

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

示例代码

注意动画效果可能无效

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

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

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

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

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

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

if(process.env.NODE_ENV==='development'){console.log('开发环境')}else{console.log('生产环境')}跨端兼容uni-app已将常用的组件、JSAPI封装到框架中，开发者按照uni-app规范开发即可保证多平台兼容，大部分业务均可直接满足。

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

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

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

平台特有的组件示例：

样式（style）的条件编译/*#ifdef%PLATFORM%*/平台特有样式/*#endif*/注意：样式的条件编译，==无论是css还是sass/scss/less/stylus等预编译语言中，必须使用/*注释*/的写法。==

正确写法：

.content{/*#ifdefMP*/color:red;/*#endif*/}==错误写法：==

.content{//#ifdefMP错误的写法，不能用//，而是用/**/color:red;//#endif}pages.json的条件编译下面的页面，只有运行至App时才会编译进去。

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

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

┌─static│├─mp-weixin││└─a.png│└─b.png├─main.js├─App.vue├─manifest.json└─pages.json运行期判断IOS/Android平台Android和iOS平台不支持通过条件编译来区分，如果需要区分Android、iOS平台，请通过调用uni.getSystemInfo来获取平台信息。

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

下面对rpx详细说明：

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

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

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

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

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

设计稿1px/设计稿基准宽度=框架样式1rpx/750rpx换言之，页面元素宽度在uni-app中的宽度计算公式：

750*元素在设计稿中的宽度/设计稿基准宽度举例说明：

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

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

注意：

uni-app提供内置CSS变量

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

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