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():
在这里插入图片描述
好,下篇再见 (*^__^*) 嘻嘻……

发布了59 篇原创文章 · 获赞 23 · 访问量 5万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览