uni-app

uni-app简介

什么是uni-app

uni-app 是使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。

优点

跨平台发行，运行体验更好
与小程序的组件、API一致；
通用前端技术栈,学习成本更低
支持vue语法，微信小程序API
支持微信小程序自定义组件及JS SDK
插件丰富,DCloud将发布插件到市场

uni-app的使用

创建了解uni项目

1.创建

2.了解全局文件
pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。
它类似微信小程序中app.json的页面管理部分。注意定位权限申请等原属于app.json的内容，在uni-app中是在manifest中配置。
App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素，也就是没有template。
这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储globalData
manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。HBuilderX 创建的工程此文件在根目录，CLI 创建的工程此文件在 src 目录。

运行到多端

1.H5

2.小程序
先设置

在运行

3.APP
先下载模拟器
在进行配置

夜神模拟器端口号：62001
海马模拟器端口号：26944
逍遥模拟器端口号：21503
MuMu模拟器端口号：7555
天天模拟器端口号：6555
雷电模拟器：5554
在运行

uni-app

uni-app生命周期

• onInit 监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参）
• onLoad 监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
• onShow 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
• onReady 监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
• onHide 监听页面隐藏
• onUnload 监听页面卸载
• onResize 监听窗口尺寸变化
• onPullDownRefresh 监听用户下拉动作，一般用于下拉刷新
• onReachBottom 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。
• onTabItemTap 点击 tab 时触发，参数为Object onShareAppMessage 用户点击右上角分享
• onPageScroll 监听页面滚动，参数为Object nvue暂不支持
• onNavigationBarButtonTap 监听原生标题栏按钮点击事件，参数为Object
• onNavigationBarSearchInputChanged 监听原生标题栏搜索输入框输入内容变化事件
• onNavigationBarSearchInputConfirmed 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。
• onNavigationBarSearchInputClicked 监听原生标题栏搜索输入框点击事件
• onShareTimeline 监听用户点击右上角转发到朋友圈 onAddToFavorites 监听用户点击右上角收藏

路由

1.路由组件 navigator

2.路由传参

3.api

• uni.navigateTo(OBJECT) 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
• uni.redirectTo(OBJECT) 关闭当前页面，跳转到应用内的某个页面。
• uni.reLaunch(OBJECT) 关闭所有页面，打开到应用内的某个页面。
• uni.switchTab(OBJECT) 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
• uni.navigateBack(OBJECT) 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

条件编译

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

写法：以#ifndef 加 平台名称 开头，以 #endif 结尾。
#ifdef：if defined 仅在某平台存在
#ifndef：if not defined 除了某平台均存在

vuex

1.初始化
创建一个store文件夹，在该文件夹下创建index.js文件

//导入vuex
import Vuex from ‘vuex’
//导入vue
import Vue from ‘vue’
//使用vuex
Vue.use(Vuex)
//导出vuex
export default new Vuex.Store({
//状态
state:{},
//改变状态的唯一方法
mutations:{ },
//异步api操作
actions:{},
//内部计算
getters:{},
//模块
modules:{}

})
需要在main.js中配置

2.state定义数据
定义

使用

修改

mutations改变数据
setFontSize (state,data) { state.gTitle.fontSize=data+“px”}
在页面中使用 this.$store.commit(“setFontSize”,80)

3.actions异步操作

在页面中使用 this.$store.dispatch(“get]ok”,{page:1})
导入import {mapActions} from ‘vuex’
计算methods:{…mapActions[“getJok”"]}
使用this.getJok
4.getters 计算

在页面使用

插件使用

1.进入插件市场安装所需插件(uView)

使用HBuilderX导入插件
2.使用插件

安装完后会出现这个文件夹
进去uView官网查看官方文档
https://www.uviewui.com/components/button.html uView官网
配置
根据官方文档配置
1.

2.
3.

4.
配置完成后选择自己所需的组件，去使用它

<template>
	<view style="padding: 20px;">
		<u-button type="primary" text="确定"></u-button>
		<u-button type="primary" :plain="true" text="镂空"></u-button>
		<u-button type="primary" :plain="true" :hairline="true" text="细边"></u-button>
		<u-button type="primary" :disabled="disabled" text="禁用"></u-button>
		<u-button type="primary" loading loadingText="加载中"></u-button>
		<u-button type="primary" icon="map" text="图标按钮"></u-button>
		<u-button type="primary" shape="circle" text="按钮形状"></u-button>
		<u-button text="渐变色按钮" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></u-button>
		<u-button type="primary" size="small" text="大小尺寸"></u-button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			disabled: true
		};
	}
};
</script>

定义组件

文件夹components/组件名/组件名.vue
不需要导入在页面中直接使用
uni_modlues/components/组件名/组件名.vue(这种模式也是可以)
组件传参
1.父传子
父通过属性的方式传递子组件

 <steper :value="d1" ></steper>

子通过props接收

props: { value: { 	type: Number,	default: 1}}

2.子传父
子触发事件

this.$emit(" input",this.count)

父监听事件更新值

<steper :value="d1" @input="d1=$event"></steper>

3.全局传参
全局发送事件

 uni.$on("事件名“，“事件值”）

全局监听(发送事件前已经注册监听)
created生命周期

uni.$on(”事件名",$event=>{响应操作})

常用api

1.uni.getSystemInfoSync() 获取系统信息
2获取胶囊信息uni.getMenuButtonBoundingClientRect()
3.uni.chooseImage()
选择图片

4.uni.uploadFile()上传

5.uni.previewImage()预览图片

6.uni.saveImageToPhotosAlbum（）下载本地

7.uni.share()分享