uni-app笔记

---

第1章 课程导学

---

第2章 倘想达到最高处，就要从低处开始 (uni-app 基础)

2-3 uni-app 核心知识点概览

1 条件编译

条件编译写法	说明
#ifdef APP-PLUS 需条件编译的代码 #endif	仅出现在 App 平台下的代码
#ifndef H5 需条件编译的代码 #endif	除了 H5 平台,其他平台均存在的代码
ifdef H5 || MP-WEIXIN 需条件编译的代码 #endif	在 H5 平台或微信小程序平台存在的代码(这里只有||, 不可能出现&&, 因为没有交集)

2 App 端的 Nvue 开发

3 HTML5+

2-4 搭建uni-app开发环境

1 安装并运行HbuiderX

2 使用 vue-cli 的方式运行项目

1. 检查 node.js 版本 node -v # v14.15.4
2. npm install -g cnpm --registry=https://registry.npm.taobao.org 设置镜像然后再 npm install -g @vue/cli 装到全局的环境中
3. 自己出现了报错的情况,需要先运行 sudo chown -R $USER /usr/local 之后再安装就好了.
4. 检查 vue-cli 是否安装 vue --version # 2.9.6
5. 进入目录 vue create -p dcloudio/uni-preset-vue test-uniapp

2-5 语法速通-模板语法与数据绑定

{ {title}} 绑定变量
v-bind:class="className" 绑定class,可以简写为 :class="className"
v-on:click="open" 绑定事件,可以简写为 @click="open"

动态数据绑定 this.title = "hello" 这个和小程序中不同. 小程序中是 this.setData({xx: 'XX'})

2-6 语法速通-条件判断

① v-if 条件判断, 为真的时候,才渲染. 为false则不渲染.

<view v-if="true">hello uni-appview>

② v-if 绑定变量, 为false和0的时候,不渲染

<view v-if="show">hello uni-appview>
...
data() {
	return {
		show: false
	}
},

③ v-if 中可以接表达式例如 v-if="show === 'hello'"

④ 三元表达式 { {show ? 'hello' : 'world'}}

⑤ v-if v-else-if v-else, 根据参数来识别,这2个view要紧挨着. v-else-if可以省略.

<view v-if="show === 1">uni-appview>
<view v-else-if="show === 2">vueview>
<view v-else>view>

2-7 语法速通-列表渲染

① v-for 通过一个数组来渲染我们的列表

<view v-for="(item,index) in arr" >{
    {item}}view>
...
<script>
	return {
      
		arr : ['uni-app', 'vue', 'html']
	}
script>

② v-for 加上索引项 index 写法如下

<view v-for="(item,index) in arr" >{
    {(index+1) + ' ' +item}}view>
...
<script>
	return {
      
		arr : ['uni-app', 'vue', 'html']
	}
script>

③ v-for 循环打印 对象

<view v-for="(key,value) in arr" >{
    {key + ' ' +value}}view>
...
<script>
	return {
      
		arr: {
      
			name: 'LiMing',
			age: 18,
			type: 'eat'
		}
	}
script>

2-8 语法速通-基础组件

view text image …

双向绑定 < input v-model="vlue" />

2-9 语法速通-自定义组件

① 在根目录中建立 components 文件夹, 再建立一个 /btn/btn.vue

btn.vue 源码如下,可以自己定义样式,行为.

<template>
	<view class="btn-box" @click="clickBox">
		点击
	view>
template>

<script>
	export default {
      
		methods: {
      
			clickBox() {
      
				console.log('click');
			}
		}
	}
script>

<style>
	.btn-box {
      
		width: 200px;
		height: 100px;
		text-align: center;
		line-height: 100px;
	}
style>

在需要的地方,进入,然后注册. components 注册组件,然后就可以直接使用了.

<template>
	<view class="content">
		<btn>btn>
	view>
template>

<script>
	import btn from '@/components/btn/btn.vue'
	export default {
      
		components: {
      
			btn
		},
	}
script>

② 给组件传值 关键词 props, 然后标注参数类型.

- index.vue 中
<btn color="red">btn>

- 组件中,用 

<template>
	<view class="btn-box" :style="{
        color: color}">
		点击
	view>
template>

<script>
	export default {
      
		props: {
      
			color: {
      
				type: String,
				default: '#000'
			}
		}
	}
script>

③ 页面上拿到组件中的返回值

1. index.vue 中注册监听事件

<btn color="red" @change="change">btn>
...
methods: {
	change(e) {
		console.log("我是页面的事件,我返回了" + e);
	}
}

2. 组件中,通过 $emit() 来返回. 接受2个参数, 第一个是 index.vue的监听函数,第二个是参数

methods: {
     
	clickBox() {
     
		console.log('click');
		this.$emit('change', this.color)
	}
}

3. 如上2步,组件中,通过 $emit 把 this.color 传给 index.vue 的change 事件. 而 change 中的 e 就是组件中返回来的 this.color

④ 组件插槽

1. 在 index.vue 中,使用 主页中的内容 这样的写法, 希望把文字也插入到组件中.
2. 在 组价中, 使用插槽 的方式来获取内容.

2-10 语法速通-api与条件编译

文档: https://uniapp.dcloud.io/api/README

① api的一个演示

<script>
	export default {
      
		onLoad() {
      
			console.log(11);
			uni.getSystemInfo({
      
				success(res) {
      
					console.log("success", res);
				},
				fail(err) {
      
					console.log("error", err);
				},
				complete(res) {
      
					console.log("不管成功失败都会返回: ", res);
				}
			})
		},
	}
script>

② 条件编译 用 #ifdef 平台标识符 来让代码在规定的平台里面编译.可以加上 || (或者).

<template>
	<view class="content">
		
		<button>我是一个按钮button>
		
	view>
template>

#ifndef 加了一个 n 表示在后面的平台上面,不显示.

条件编译写法	说明
#ifdef APP-PLUS 需条件编译的代码 #endif	仅出现在 App 平台下的代码
#ifndef H5 需条件编译的代码 #endif	除了 H5 平台,其他平台均存在的代码
ifdef H5 || MP-WEIXIN 需条件编译的代码 #endif	在 H5 平台或微信小程序平台存在的代码(这里只有||, 不可能出现&&, 因为没有交集)

文档 https://uniapp.dcloud.io/platform?id=%e8%b7%a8%e7%ab%af%e5%85%bc%e5%ae%b9

③ 在style中使用 条件编译

<style>
	/* #ifdef H5 */
	...
	/* #endif */
style>

④ 在 style 中, page 表示这个页面

⑤ 尺寸单位 px % rpx rem vh vw

⑥ 引入外部 css 文件 @import '@/static/index.css'

2-11 生命周期概述

文档: https://uniapp.dcloud.io/collocation/frame/lifecycle

① 生命周期的分类

1. 应用生命周期, 在 App.vue 文件中

   onLaunch 应用初始化完成触发一次, 全局只触发一次
onShow 应用启动的时候, 或者从后台进入前台会触发
   onHide 应用从前台进入后台触发

2. 页面生命周期

   onLoad 监听页面加载
   onShow 监听页面显示,每次切换到这个页面,都会执行
   onReady 监听页面初次渲染完成 (如果渲染速度快, 会在页面进入动画完成前触发)
   onHide 监听页面隐藏
   onUnload 监听页面卸载,页面关闭

3. 组件生命周期

   beforeCreate 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用
   created 实例创建完成之后立即调用, 挂载阶段还没有开始
   mounted 挂载到实例上去之后调用
   destroyed vue 实例销毁后调用

4. 大概顺序 App Launch > App Show > component beforeCreate > component created > page onload > page onshow > component mounted > page onready

---

第3章 千里之行，始于足下 （基础配置）

3-1 uni-app 项目配置

① 微信小程序

微信小程序 -> 设置 -> 安全设置 -> 服务端口 -> 开启

HBuilderX -> 配置 -> 运行配置 -> 把微信开发者工具路径 配置 起来

② app真机,模拟器

连接安卓设备

• 打开usb调试

连接ios设备

• 运行 -> 选择 ios 设备

ios 模拟器

• 打开 xcode
• 偏好配置 -> 上面倒数第三个 Components -> 选择版本(例如 IOS 12.4 Simulator) 下载 -> 右下角 安装
• 重启 HBuilderX
• 运行 -> 模拟器

③ h5, 如果直接运行到浏览器失效的话,可以按照下面操作

• 设置 -> 运行配置 -> 浏览器运行配置 把相关浏览器路径配置好

3-2 目录结构概述

• components 自定义组件的目录,自己创建的
• pages 页面存放目录
• static 静态文件资源目录
• unpackage 编译后的文件存放目录
• utils 公用的工具类,自己创建的
• common 公用的文件, 自己创建的
• App.vue 项目启动页
• main.js 应用入口,绑定全局变量,引用一些第三方库等
• manifest.json 项目配置
• page.json 页面配置,页面地址,页面名称等 文档: https://uniapp.dcloud.io/collocation/pages
• uni.scss scss配置

3-3 配置项目底部选项卡 - tabbar 配置

• pages.json 中的 globalStyle 中的配置,是所有页面的通用配置.
• pages.json 中的 pages 下面的配置,可以配置 单独终端(例如 微信小程序,h5,app等)的配置, 如下

{
     
	"pages": [ 
		{
     
			"path": "pages/index/index",
			"style": {
     
				"navigationBarTitleText": "uni-app",
				"app-plus":{
     
					
				},
				"mp-weixin":{
     
					
				},
				"h5":{
     
					
				}
			}
		}
	],
	"globalStyle": {
     
		...
	}
}

• tabbar 文档 https://uniapp.dcloud.io/collocation/pages?id=tabbar, 写法如下,注意图片的路径写法.

{
     
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		...
	],
	"globalStyle": {
     
		...
	},
	"tabBar": {
     
		"color": "#666",
		"selectedColor": "#ff5a5f",
		"borderStyle": "black",
		"list": [{
     
			"pagePath": "pages/index/index",
			"text": "首页",
			// 本地图片, 大小 40kb, 尺寸建议 81*81px
			"iconPath": "static/home.png",
			"selectedIconPath": "static/home-active.png"
		}, {
     
			"pagePath": "pages/about/about",
			"text": "关于",
			// 本地图片, 大小 40kb, 尺寸建议 81*81px
			"iconPath": "static/follow.png",
			"selectedIconPath": "static/follow-active.png"
		}, {
     
			"pagePath": "pages/my/my",
			"text": "首页",
			// 本地图片, 大小 40kb, 尺寸建议 81*81px
			"iconPath": "static/my.png",
			"selectedIconPath": "static/my-active.png"
		}]
	}
}

• tabbar 会缓存每个页面,所以 onLoad 只会隐藏,不会重新加载.
• tabbar 中有一个新的生命周期 onTabItemTap(e) , tabbar 点击就会触发, 这个e 返回例如 {index: 0, text: "首页", pagePath: "pages/index/index"}

3-4 在uni-app中如何使用sass

• 如果第一次使用,需要安装sass插件 scss/sass编译
• sass 写法