Uniapp学习【1-基础】

目录结构

创建成功后，我们打开pages目录，这里是页面目录，默认模板只有一个index页面，我们打开它来看看
这个结构其实是跟 vue的 页面一样 template 标签下 只能有一层 可以在这一层里面 进行多层编辑

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

JS部分
同样与vue的界面结构相似
uniapp支持 vue的全部生命周期 并且新增 应用生命周期及页面生命周期
应用级生命周期 也就是在App.vue界面使用的生命周期

<script>
	export default {
		onLaunch: function() {
			当uni-app 初始化完成时触发（全局只触发一次）
		},
		onShow: function() {
			当 uni-app 启动，或从后台进入前台显示
		},
		onHide: function() {
			当 uni-app 从前台进入后台
		}，
		onError: function() {
			当 uni-app 报错时触发
		}，
		onUniNViewMessage: function() {
			对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯
		}
		onUnhandledRejection: function() {
			对未处理的 Promise 拒绝事件监听函数（2.8.1+）
		}
	}
</script>

页面级生命周期 在各个页面中使用的生命周期
下面展示了部分

<script>
	export default {
		data() {
			return {
				title: 'Hello'   //存储数据
			}
		},
		onLoad() {
				监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参）
		},
		onShow() {
				监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
		},
		onReady() {
				监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
		},
		onHide() {
				监听页面隐藏
		},
		onUnload() {
				监听页面卸载
		},
		onResize() {
				监听窗口尺寸变化   App、微信小程序使用
		},
		methods: {
			写函数
		}
	}

page.json文件

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"  //页面导航栏的名称
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",//默认导航栏名称
		"navigationBarBackgroundColor": "#F8F8F8", 导航栏背景颜色
		"backgroundColor": "#F8F8F8"
	}
}

manifest.json这个文件
里面有很多配置，比如应用名称、模块权限配置（支付、分享等权限）。。。

main.js
这里主要是一个全局的js，我们写的通用的js方法可以封装，然后在这里引入，然后就可以在每个页面里用了。

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()