uniapp集成原生安卓RFID uniapp生成app原理

前言

一个 uni-app 工程，就是一个 Vue 项目

一、目录结构

直接看官网介绍

一个uni-app工程，默认包含如下目录及文件

注意：
编译到任意平台时，static 目录下的文件均会被完整打包进去，且不会编译。非 static 目录下的文件（vue、js、css 等）只有被引用到才会被打包编译进去
static 目录下的 js 文件不会被编译，如果里面有 es6 的代码，不经过转换直接运行，在手机设备上会报错
css、less/scss 等资源不要放在 static 目录下，建议这些公用的资源放在自建的 common 目录下

二、页面

1、什么是页面？

一个页面就是一个.vue文件或.nvue文件
不需要太了解这两者的不同，简单来说，如果熟悉web端，就继续使用vue，如果熟悉原生界面，就使用nvue

2、新建页面

跟微信小程序类似，每次新建页面，均需在pages.json中配置pages列表，而在HBuilderX中创建页面会自行在pages.json中注册

以下用官方模板举例

在HBuilderX上新建模板直接在左侧的pages文件上点击右键新建页面即可

自行填写相关内容，也可以选择官方模板方便开发，但如果选择模板要记得好好看代码，看懂再继续下手

3、删除页面

需要做两件事

删除.vue文件或.nvue文件
删除pages.json -> pages列表项中的配置

4、生命周期

同其他前端框架类似，都是监听页面初始化、加载、渲染、事件等，这个在需要的时候了解即可

还有uni-app在不同平台小程序的生命周期可能有所不同，具体差异看官网介绍

5、页面调用接口

1. getApp()

getApp() 函数用于获取当前应用实例，一般用于获取globalData

const app = getApp()
console.log(app.globalData)

也可以通过 this.$scope 获取对应的app实例

2. getCurrentPages()

getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。

注意： getCurrentPages()仅用于展示页面栈的情况，请勿修改页面栈，以免造成页面状态错误。

let pages = getCurrentPages()
console.log(pages)

6、页面通讯

也就是页面与页面之间传递信息

1. uni.$emit(eventName,OBJECT)

触发全局的自定义事件，后面那个是要传递的附加参数

uni.$emit('update',{msg:'页面更新'})

2. uni.$on(eventName,callback)

监听全局的自定义事件，事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数
注意是监听，也就是说与emit对应，emit触发，on执行

uni.$on('update',function(data){
		console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
	})

3. uni.$once(eventName,callback)

监听全局的自定义事件。事件可以由 uni.$emit 触发，但是只触发一次，在第一次触发之后移除监听器
用法同上on

4. uni.$off([eventName, callback])

移除全局自定义事件监听器，也就是移除on和once

5. 举个例子，新建个uniapp默认模板，修改index.vue

<template>
		<view class="content">
			<view class="data">
				<text>{{val}}</text>
			</view>
			<button type="primary" @click="comunicationOff">结束监听</button> 
			<!-- 点击调用comunicationOff方法 -->
		</view>
	</template>
	
	<script>
		export default {
			data() {
				return {
					val: 0
				}
			},
			onLoad() {
				setInterval(()=>{
					uni.$emit('add', {
						data: 2
					})
				},1000)
				uni.$on('add', this.add) //这里的this.add表示调用methods中的add方法
			},
			methods: {
				comunicationOff() {
					uni.$off('add', this.add) //停止add事件的this.add这个监听器
				},
				add(e) {
					this.val += e.data
				}
			}
		}
	</script>
	
	<style>
		.content {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
	
		.data {
			text-align: center;
			line-height: 40px;
			margin-top: 40px;
		}
	
		button {
			width: 200px;
			margin: 20px 0;
		}
	</style>

注意事项：
uni.$ emit、 uni.$ on 、 uni.$ once 、uni.$ off 触发的事件都是 App 全局级别的，跨任意组件，页面，nvue，vue 等
使用时，注意及时销毁事件监听，比如，页面 onLoad 里边 uni.$ on 注册监听，onUnload 里边 uni.$off 移除，或者一次性的事件，直接使用 uni. $ once 监听

三、路由

1、什么是路由

uni-app页面路由为框架统一管理，开发者需要在pages.json里配置每个路由页面的路径及页面样式

也就是pages.json中的这段

2、路由跳转

uni-app 有两种页面路由跳转方式：使用navigator组件跳转、调用API跳转

这玩意后面再说

3、页面栈

这东西建议看官网，讲得比较详细

框架以栈的形式管理当前所有页面， 当发生路由切换的时候，页面栈的表现如下：