uniapp 入行（一）

一、开始

（一） 下载hbuilder编译器；

（二） 创建默认模板项目；

（三） 运行到各三方编译器，需设置编译器所在本地路径（可以直接打开第三方编译器）；

注： 第三方编译器需要开启访问权限，方可访问。如下图中提示：去开启服务器端口

二、项目结构

默认包含如下目录及文件：

┌─components            uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                存放本地网页的目录【详见：https://uniapp.dcloud.io/component/web-view】
├─platforms             存放各平台专用页面的目录【详见：https://uniapp.dcloud.io/platform?id=整体目录条件编译】
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─wxcomponents          存放小程序组件的目录【详见：https://uniapp.dcloud.io/frame?id=小程序组件支持】
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 【应用生命周期：https://uniapp.dcloud.io/frame?id=应用生命周期】
├─manifest.json         配置应用名称、appid、logo、版本等打包信息【详见：https://uniapp.dcloud.io/collocation/manifest】
└─pages.json            配置页面路由、导航条、选项卡等页面类信息【详见：https://uniapp.dcloud.io/collocation/pages】

注：

• static 目录下的 js 文件不会被编译，如果里面有 es6 的代码，不经过转换直接运行，在手机设备上会报错。
• css、less/scss 等资源同样不要放在 static 目录下，建议这些公用的资源放在 common 目录下。
• HbuilderX 1.9.0+ 支持在根目录创建 ext.json sitemap.json 文件。

（一） uni.css — 全局样式【无需引用即可全局使用】；

（二） pages.json — app的初始化设置，注册页面【设置页面路由等】，导航条，选项卡等页面类信息

在此内可设置tabBar：
位置： 官网 – 框架 – 配置 – pages.json – tabBar （代码示例）

（三） manifest.json — 项目常用基础配置

示例： 小程序配置，在manifest.json中的设置会影响到微信小程序中的相对设置，如下：
设置前：
设置后：

（四） main.js — 项目入口文件

. 例： 如果新建一个js文件，但没有在main.js中引入，他是不会执行的。

（五） App.vue — 应用配置，用来配置App全局样式以及监听应用的生命周期

应用生命周期：

（六） static — 存放应用引用静态资源的目录（如图片、视频等）

注意：静态资源只能存放于此

（七） pages — 业务页面文件存放的目录

（八） components — uni-app组件目录

示例：

1、 创建组件

2、 编写组件内容，将组件引入所需页面

（1）父子组件通信

1. 绑定组件属性

组件代码：

<template>
	<view>
		<!-- 此处将testMsg直接作为变量使用 -->
		<text>我是一个test组件 {{testMsg}}</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		props: ["testMsg"]   //用props接收变量值
	}
</script>

<style lang="scss">

</style>

所需页面代码：

<template>
	<view class="content">
		<test :testMsg="testMsg"></test>
	</view>
</template>
<script>
	import test from '../../components/test.vue' // 引入组件
	
	export default {
		components:{
			test   //在当前页面注册组件。局部注册
		},
		data() {
			return {
				testMsg: 'testMsgText' //设置组件中变量
			}
		},
	}
</script>

页面效果：

2.绑定组件方法

组件代码：

<template>
	<view>
		<!-- 此处将testMsg直接作为变量使用 -->
		<text>我是一个test组件 {{testMsg}}</text>
		<!-- 此处点击事件调用本组件中methods中的对应事件 -->
		<button type="primary" @click="clickHandle">点我</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		props: ["testMsg"],   //用props接收变量值
		methods: {
			clickHandle(){
				// 通过$emit()接收调用组件页面调用
				this.$emit('cliakHandler',{text: '点了我'})
			}
		}
	}
</script>

<style lang="scss">

</style>

所需页面代码：

<template>
	<view class="content">
		<test :testMsg="testMsg" @cliakHandler="showVal"></test>
	</view>
</template>
<script>
	import test from '../../components/test.vue' // 引入组件
	
	export default {
		components:{
			test   //在当前页面注册组件。局部注册
		},
		data() {
			return {
				testMsg: 'testMsgText' //设置组件中变量
			}
		},
		methods: {
			showVal(val){
			// val 为接收组件通过$emit()中的传参
				console.log(val)   //输出结果：{text: "点了我"}
			}
		}
	}
</script>

页面效果：

（2）兄弟组件通信

兄弟组件通信可用由uniapp的api提供的方法：

• uni.$emit(eventName,OBJECT) 【触发事件】
• uni.$on(eventName,callback) 【注册事件调用多次】
• uni.$once(eventName,callback) 【注册事件调用一次】

uni.$emit(eventName,OBJECT)
触发全局的自定事件。附加参数都会传给监听器回调。
    uni.$emit('update',{msg:'页面更新'})

uni.$on(eventName,callback) 
监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。
    uni.$on('update',function(data){
        console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
    })

uni.$once(eventName,callback) 
监听全局的自定义事件。事件可以由 uni.$emit 触发，但是只触发一次，在第一次触发之后移除监听器。
    uni.$once('update',function(data){
        console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
    })

例：
在某页面onLoad函数中，用 uni.$on() 在全局注册了一个事件
在组件中，可以用uni.$emit()调用此事件

注册全局事件页面代码：

<script>
	import test from '../../components/test.vue' // 引入组件
	
	export default {
		components:{
			test   //在当前页面注册组件。局部注册
		},
		data() {
			return {
				testMsg: 'testMsgText' //设置组件中变量
			}
		},
		onLoad() {
		// 分别对应下面两张效果图，注释一方一一测试
		// 全局注册可多次调用事件
			uni.$on('testEmit',(val)=>{
				console.log(val)  //输出由调用事件处传回的参数
			})
			
		// 全局注册可多次调用事件
			/* uni.$once('testEmit',(val)=>{
				console.log(val)  //输出由调用事件处传回的参数
			}) */
		}
	}
</script>

调用全局事件页面代码：

<template>
	<view>
		<!-- 此处将testMsg直接作为变量使用 -->
		<text>我是一个test组件 {{testMsg}}</text>
		<button type="primary" @click="clickHandle">点我</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		props: ["testMsg"],
		methods: {
			clickHandle(){
				uni.$emit('testEmit',{text: '点了我,测试$on'})
			}
		}
	}
</script>

页面效果：
uni.$on()：

uni.$once()：

好，下篇再见 (*^__^*) 嘻嘻……