uni-app学习笔记（一）-官方文档的学习路线

资料观看顺序（在比较中学习）：

　　1. 什么是uniapp（https://uniapp.dcloud.io/）

　　2. 如何学习uniapp（https://uniapp.dcloud.io/resource）

　　3. 快速上手（https://uniapp.dcloud.io/quickstart）

　　4. 白话uni-app【html、vue、小程序的区别】（https://ask.dcloud.net.cn/article/35657）与《 微信小程序转换uni-app详细指南》

　　5. VUE学习笔记（一）——开发环境安装与部署项目与 VUE学习笔记（二）——目录介绍

　　6. 条件编译-解决各端差异（https://uniapp.dcloud.io/platform）

　　7.观看 《uni-app官方教程》。

　　8.看完uniapp官网的《 框架介绍》、《 组件概述》（先看常用的）、《 API概述》（先大体了解）、《 生命周期》、《路由（ navigator 组件、 uni.navigateTo(OBJECT)API）》《 uniapp跨端开发注意》、《 案例》（包括案例页和HBuilderX中的模板项目）

　　9.然后就是刷几个 三方培训机构视频+Vue官网的视频。

　　10.现在就可以上手大部分项目了，边做项目边学完《 组件概述》、《 API概述》。

　　注意：uni-app 使用vue的语法+小程序的标签和API，HBuilder X创建项目中包含了大量可供学习或使用的模板框架。

 

一，uniapp目录结构

登录后复制

┌─uniCloud              云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb（详见uniCloud）
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                App端存放本地html文件的目录，详见
├─platforms             存放各平台专用页面的目录，详见
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此,static目录下的文件均会被完整打包进去，且不会编译（es6代码不要放这里了，css和less/scss等文件建议放到自建的common文件夹下）。非static目录下的文件（vue、js、css 等）只有被引用到才会被打包编译进去。
├─uni_modules           存放[uni_module](/uni_modules)规范的插件。
├─wxcomponents          存放小程序组件的目录，详见
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
├─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见
└─uni.scss              这里是uni-app内置的常用样式变量

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.

 

二，使用到的工具

　　 HBuilderX、 微信小程序开发工具（实时调试用，初步上手阶段比浏览器好用点）、 谷歌浏览器、手机模拟器（ 逍遥、 夜神、 蓝叠）。

 

三，.Vue文件介绍

　　一般包含 <template>、<script> 和 <style>,可以自定义标签和使用sass语法

　　<template>：html标签;vue标签与html标签是有区别的（h1,h2、div还是支持的），详细见：html标签和uni-app内置组件的映射表。

　　<script>：javascript，同html文件的用法;

　　<style>:样式，同html文件的用法;

登录后复制

1 <template>  /* 最多有一个template */
 2   <view class="example">{{ msg }}</view>
 3 </template>
 4 
 5 <script>    /* 最多有一个script*/
 6 export default {
 7   data () {
 8     return {
 9       msg: 'Hello world!'
10     }
11   }
12 }
13 </script>
14 
15 <style>     /* 可以有多个style */
16 .example {
17   color: red;
18 }
19 </style>
20 
21 <custom1>   /* 自定义标签 */
22   This could be e.g. documentation for the component.
23 </custom1>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.
• 21.
• 22.
• 23.

　　同样vue支持把资源放到外面，使用和html一样的相对路径引用（相对路径或者绝对路径）。

登录后复制

1 <template src="./template.html"></template>
2 <style src="./style.css"></style>
3 <script src="./script.js"></script>
或者css样式部分导入
<style>
 @import "../../common/uni.css";
.uni-card { box-shadow: none; }
</style>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.

　　也支持内联样式写法：

登录后复制

<view :style="{color:color}" />

• 1.

 　　补充：uni-app支持的css选择器

 

四，Vue组件的引用

创建、引用、注册、使用）。

1.创建子Vue组件(一般放在component目录中)，比如上面‘三’中的样子；

　　比如创建了父组件Fvue.vue和子组件Cvue.vue

2.引用，在父组件中使用import的方式引用子组件（<script></script>标签中），如下：

登录后复制

import cvue from './component/Cvue.vue'

• 1.

3.注册，在父组件的<script></script>标签内的 data 代码块后面加上 components: { cvue }

登录后复制

1 export default {
2   data () {
3     return {
4   　　　　　　
5     }
6   },
7   components: {cvue } 
8 }

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.

4.使用，通过上面的步骤就可以在父组件中直接使用cvue标签了：

登录后复制

1 <template>
2   <view id="app">
3     <image src="@/static/logo.png">
4     <text>{{ title }}</text>
5     <cvue></cvue>
6   </view>
7 </template>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.

补充1-全局引用（就是把上面写在父组件的<script></script>标签中的放到main.js中，写法还是有点不一样的）：

　　①参照上面创建子组件

　　②在工程根目录的main.js中添加代码（引用、注册），如下：

登录后复制

import ffvue './components/FFvue.vue'
　　Vue.component('f-fvue',ffvue)

• 1.
• 2.

　　③使用，在该项目任何vue组件中都可以通过<f-fvue/>标签引用

登录后复制

<template>
    <view>
        <f-fvue></f-fvue>
    </view>
</template>

• 1.
• 2.
• 3.
• 4.
• 5.

补充2-传值：

　　见：uniapp、Vue组件的使用-引用子组件、传值。

 

五，资源的那些事

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

登录后复制

<!-- 绝对路径，/static指根目录下的static目录，在cli项目中/static指src目录下的static目录 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
background-image: url(/static/logo.png);

• 1.
• 2.
• 3.
• 4.

登录后复制

<!-- 相对路径 --> <image class="logo" src="../../static/logo.png"></image>
@import url('../../common/uni.css');

• 1.
• 2.

注意

• @开头的绝对路径以及相对路径会经过base64转换规则校验
• 引入的静态资源在非h5平台，均不转为base64。
• H5平台，小于4kb的资源会被转换成base64，其余不转。
• 不支持本地图片的平台，小于40kb，一定会转base64。（共四个平台mp-weixin, mp-qq, mp-toutiao, app v2）
• App平台自HBuilderX 2.6.9起template节点中引用静态资源文件时（如：图片），调整查找策略为【基于当前文件的路径搜索】，与其他平台保持一致。
• 支付宝小程序组件内 image 标签不可使用相对路径。
• js文件不支持使用/开头的方式引入

补充：①uni-app static目录的条件编译（专有目录下的静态资源只有在特定平台才会编译进去）

　　　②uni-app 不同平台使用不同的Vue组件（存放适用于特定平台的Vue组件目录，也是条件编译，见uni-app判断运行的平台 ）

 

六，生命周期

　　生命周期包含应用生命周期和页面生命周期、组件生命周期。

1.应用生命周期：

　　①onLaunch：当uni-app 初始化完成时触发（全局只触发一次）

　　②onShow：当 uni-app 启动，或从后台进入前台显示

　　③onHide：当 uni-app 从前台进入后台

　　④onError：当 uni-app 报错时触发

　　⑤onUniNViewMessage：对 nvue 页面发送的数据进行监听，可参考  nvue 向 vue 通讯

　　⑥onUnhandledRejection：对未处理的 Promise 拒绝事件监听函数（2.8.1+）

　　⑦onPageNotFound：页面不存在监听函数（页面实际上已经打开了（比如通过分享卡片、小程序码）且发现页面不存在，才会触发，api 跳转不存在的页面不会触发，如 uni.navigateTo）

　　⑧onThemeChange：监听系统主题变化

2.页面生命周期：

　　①onInit：百度小程序特有的，监听页面初始化时；

　　②onLoad：监听页面加载时；

　　③onShow：监听页面显示时；

　　④onReady：监听页面初次渲染完成；

　　⑤onHide:监听页面隐藏；

　　⑥onUnload:监听页面卸载；

　　⑦onResize:App、微信小程序监听页面尺寸变化；

　　⑧onPullDownRefresh:页面下拉（刷新）事件；

　　⑨onReachBottom:页面上滑触底事件；

　　⑩onTabltemTap:点击 tab 时触发的事件，微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App；

　　⑪onShareAppMessage：用户点击右上角分享，微信小程序、QQ小程序、支付宝小程序、字节小程序、飞书小程序、快手小程序；

　　⑫onPageScroll：监听页面滚动，nvue暂不支持；

　　⑬onNavigationBarButtonTap：监听原生标题栏按钮点击事件，App、H5；

　　⑭onBackPress：监听页面返回，app、H5、支付宝小程序，支付宝小程序有点特殊使用见官网文档；

　　⑮onNavigationBarSearchInputChanged：监听原生标题栏搜索输入框输入内容变化事件；App、H5

　　⑯onNavigationBarSearchInputConfirmed：监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发，App、H5

　　⑰onNavigationBarSearchInputClicked：监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发），App、H5；

　　⑱onShareTimeline：监听用户点击右上角转发到朋友圈，微信小程序；

　　⑲onAddToFavorites：监听用户点击右上角收藏，微信小程序；

3.组件（控件）生命周期：

　　①beforeCreate：在实例化完成前

　　②created：在实例化完成后

　　③beforeMount：在挂载开始前

　　④mounted：在挂载完成后

　　⑤beforeUpdate：数据更新时的虚拟Dom渲染和打补丁之前

　　⑥updated：数据更新时虚拟Dom渲染和打补丁之后

　　⑦beforeDestroy：Vue组件示例销毁前

　　⑧destroyed：Vue组件示例销毁后

七，路由

1.路由跳转（看navigator和uni.navigatorTo()两种方法的介绍）

 navigator、 API跳转，也可以通过在插件市场安装Vue Router插件来实现Vue Router跳转。

2.页面栈（常用的路由方法）

路由方式	页面栈表现	触发时机
初始化	新页面入栈	uni-app 打开的第一个页面
打开新页面	新页面入栈	调用 API    uni.navigateTo  、使用组件   <navigator open-type="navigate"/>
页面重定向	当前页面出栈，新页面入栈	调用 API    uni.redirectTo  、使用组件   <navigator open-type="redirectTo"/>
页面返回	页面不断出栈，直到目标返回页	调用 API   uni.navigateBack   、使用组件  <navigator open-type="navigateBack"/> 、用户按左上角返回按钮、安卓用户点击物理back按键
Tab 切换	页面全部出栈，只留下新的 Tab 页面	调用 API   uni.switchTab  、使用组件   <navigator open-type="switchTab"/>  、用户切换 Tab
重加载	页面全部出栈，只留下新的页面	调用 API   uni.reLaunch  、使用组件   <navigator open-type="reLaunch"/>

 

八、条件编译

　　见：uni-app开发环境和生产环境的判断

 

九、判断运行平台

　　见：uni-app判断运行的平台

 

十，页面样式与布局

　　1.全局css样式：

　　　　定义在 App.vue 中的样式为全局样式，作用于每个页面，各个页面可重写该样式对其覆盖。

　　注：nvue页面暂不支持全局样式

　　2.uni-app的内置CSS变量（状态栏、导航栏、底部选项卡的一些样式改变用到的变量）

CSS变量	描述	App	小程序	H5
--status-bar-height	系统状态栏高度	系统状态栏高度、nvue注意见下	25px	0
--window-top	内容区域距离顶部的距离	0	0	NavigationBar 的高度
--window-bottom	内容区域距离底部的距离	0	0	TabBar 的高度

　　①注意：

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

　　②下面是提供的示例代码

　　　　快速书写css变量的方法是：在css中敲hei，在候选助手中即可看到3个css变量。（HBuilderX 1.9.6以上支持）

　　　　示例1 - 普通页面使用css变量：

登录后复制

<template>
    <!-- HBuilderX 2.6.3+ 新增 page-meta, 详情：https://uniapp.dcloud.io/component/page-meta -->
    <page-meta>
        <navigation-bar />
    </page-meta>
    <view>
        <view class="status_bar">
            <!-- 这里是状态栏 -->
        </view>
        <view> 状态栏下的文字 </view>
    </view>
</template>    
<style>
    .status_bar {
        height: var(--status-bar-height);
        width: 100%;
    }
</style>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.

登录后复制

<template>
    <view>
        <view class="toTop">
            <!-- 这里可以放一个向上箭头，它距离底部tabbar上浮10px-->
        </view>
    </view>
</template>    
<style>
    .toTop {
        bottom: calc(var(--window-bottom) + 10px)
    }
</style>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.

　　　　示例2 - nvue页面获取状态栏高度：

登录后复制

<template>
    <view class="content">
        <view :style="{ height: iStatusBarHeight + 'px'}"></view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                iStatusBarHeight:0
            }
        },
        onLoad() {
            this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight
        }
    }
</script>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.

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

组件	描述	App	H5
NavigationBar	导航栏	44px	44px
TabBar	底部选项卡	HBuilderX 2.3.4之前为56px，2.3.4起和H5调为一致，统一为 50px。但可以自主更改高度）	50px

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

　　3.字体图标：

• 支持 base64 格式字体图标。
• 支持网络路径字体图标。
• 小程序不支持在css中使用本地文件，包括本地的背景图和字体文件。需以base64方式方可使用。
• 网络路径必须加协议头 https。
• 从  http://www.iconfont.cn 上拷贝的代码，默认是没加协议头的。
• 从  http://www.iconfont.cn 上下载的字体文件，都是同名字体（字体名都叫iconfont，安装字体文件时可以看到），在nvue内使用时需要注意，此字体名重复可能会显示不正常，可以使用工具修改。
• 使用本地路径图标字体需注意：

1. 为方便开发者，在字体文件小于 40kb 时，uni-app 会自动将其转化为 base64 格式；
2. 字体文件大于等于 40kb，仍转换为 base64 方式使用的话可能有性能问题，如开发者必须使用，则需自己将其转换为 base64 格式使用，或将其挪到服务器上，从网络地址引用；
3. 字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。

登录后复制

@font-face {
     font-family: test1-icon;
     src: url('~@/static/iconfont.ttf');
 }

• 1.
• 2.
• 3.
• 4.

　　①nvue中不可直接使用css的方式引入字体文件，需要使用以下方式在js内引入。nvue内不支持本地路径引入字体，请使用网络链接或者base64形式。src字段的url的括号内一定要使用单引号。

登录后复制

var domModule = weex.requireModule('dom');
domModule.addRule('fontFace', {
  'fontFamily': "fontFamilyName",
  'src': "url('https://...')"
})

• 1.
• 2.
• 3.
• 4.
• 5.

　　②使用示例：

登录后复制

1 <template>
 2     <view>
 3         <view>
 4             <text class="test"></text>
 5             <text class="test"></text>
 6             <text class="test"></text>
 7         </view>
 8     </view>
 9 </template>
10 <style>
11     @font-face {
12         font-family: 'iconfont';
13         src: url('https://at.alicdn.com/t/font_865816_17gjspmmrkti.ttf') format('truetype');
14     }
15     .test {
16         font-family: iconfont;
17         margin-left: 20rpx;
18     }
19 </style>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.

　　4.补充：

　　　　①Flexbox用法： Flexbox——uni-app， 还有Flex布局教程——阮一峰。

　　　　②uniapp的upx与px、rpx的区别

 

十一、页面渲染控制——template和 block

template示例：

登录后复制

1 <template>
 2     <view>
 3         <template v-if="test">
 4             <view>test 为 true 时显示</view>
 5         </template>
 6         <template v-else>
 7             <view>test 为 false 时显示</view>
 8         </template>
 9     </view>
10 </template>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

block示例

登录后复制

1 <template>
2     <view>
3         <block v-for="(item,index) in list" :key="index">
4             <view>{{item}} - {{index}}</view>
5         </block>
6     </view>
7 </template>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.

　　注：<block/> 在不同的平台表现存在一定差异，推荐统一使用 <template/>

 

　　引用：该文章为本人的学习笔记，可供大家学习参考，与uni-app官网教程如有出入请以官方教程为主。uniapp是一个很好的前端框架，学习成本不高值得大家学习（uniapp、小程序、uView等好多框架都是在Vue基础上演变的，学好一门+Vue语法，再去学其他的就简单了。）

作者：꧁执笔小白꧂

原创作者: 2806933146zbxb 转载于: https://blog.51cto.com/2806933146zbxb/11618658