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

合集 - uni-app知识(14)
1.uni-app学习笔记（一）-官方文档的学习路线
2.uni-app学习笔记（二）-Vue组件学习3.uni-app学习笔记（三）-网络请求4.html标签和uni-app内置组件的映射表5.微信小程序转uni-app时常见的语法变化6.uni-app 不同平台使用不同的Vue组件7.uni-app判断运行的平台8.uni-app开发环境和生产环境的判断9.uni-app static目录的条件编译10.uni-app支持的css选择器11.vue与nvue的区别12.uni-app的upx与px、rpx的区别13.uni-app打包64位的安卓app14.uni-app、Vue组件的使用-引用子组件、传值
收起

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

　　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内置的常用样式变量
复制代码

 

二，使用到的工具

　　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>
复制代码

　　同样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>
复制代码

　　也支持内联样式写法：

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

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

 

四，Vue组件的引用

　　Vue支持引用Vue组件，使用一般分3步（创建、引用、注册、使用）。

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

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

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

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

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

复制代码
1 export default {
2   data () {
3     return {
4   　　　　　　
5     }
6   },
7   components: {cvue } 
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-全局引用（就是把上面写在父组件的<script></script>标签中的放到main.js中，写法还是有点不一样的）：

　　①参照上面创建子组件

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

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

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

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

补充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);
<!-- 相对路径 --> <image class="logo" src="../../static/logo.png"></image>
@import url('../../common/uni.css');
复制代码

注意

  • @开头的绝对路径以及相对路径会经过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>
复制代码
复制代码
<template>
    <view>
        <view class="toTop">
            <!-- 这里可以放一个向上箭头，它距离底部tabbar上浮10px-->
        </view>
    </view>
</template>    
<style>
    .toTop {
        bottom: calc(var(--window-bottom) + 10px)
    }
</style>
复制代码

　　　　示例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>
复制代码

　　　　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');
 }

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

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

　　②使用示例：

复制代码
 1 <template>
 2     <view>
 3         <view>
 4             <text class="test">&#xe600;</text>
 5             <text class="test">&#xe687;</text>
 6             <text class="test">&#xe60b;</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>
复制代码

　　4.补充：

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

　　　　②uniapp的upx与px、rpx的区别

 

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

　　1.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>
复制代码

　　2.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>
复制代码

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

 

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

posted @   ꧁执笔小白꧂  阅读(1322)  评论(0)  编辑  收藏  举报
编辑推荐：
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 记一次.NET内存居高不下排查解决与启示
历史上的今天：
2021-01-21 C#-printf的转义符\
点击右上角即可分享
微信分享提示