uni-app

二、框架概述

1.uni-app概述

(1)uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。
(2)uni-app 使用vue的语法+小程序的标签和API。

2.为什么要学习uni-app?

​ uni-app 是一个所有前端应用的框架，开发者编写一套代码,可以直接编译发布到多端，解决了很大的开发成本及后期维护成本问题,不管什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯,而且入手简单，开发速度比较快.

3.其他多端框架

	wepy： (小程序)
	WePY 是一款让小程序支持组件化开发的框架,通过预编译的手段让开发者可以选择自己喜欢的风格去开发小程序。腾讯开源
​	mpvue：（vue语法）
	mpvue 是美团点评开源的一个使用 Vue.js 开发小程序的前端.
​	Taro ：（react）
	Taro 是由京东 - 凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架
​	react-native （ios 和 Android）

注意： uniapp使用的是vue的语法 + 小程序的api及组件标签

四、项目创建

1.HBuilderX工具创建（推荐）

H5运行：

1.菜单栏--运行--运行到浏览器--选择浏览器

微信小程序运行：

1.菜单栏--设置--运行设置--微信开发者工具路径配置
2.菜单栏--运行--运行到小程序--选择微信小程序
3.打开微信开发者工具--菜单栏--设置--安全设置--开启服务端口

c1

2.vue-cli脚手架创建（了解）

1.npm install -g @vue/cli
2.vue create -p dcloudio/uni-preset-vue my-project
3.运行
npm run dev:%PLATFORM%     开发  %PLATFORM% 平台
	npm run dev:h5
	npm run dev:mp-weixin
npm run build:%PLATFORM%   打包

五、工程目录结构

main.js    vue的入口文件，作用和vue保持一致
App.vue   应用配置，用来配置App全局样式以及监听 应用生命周期
manifest.json  配置应用名称、appid、logo、版本等打包信息 
pages.json 配置页面路由、导航条、选项卡等页面类信息
uni.scss  这里是uni-app内置的常用样式变量
pages  页面目录集合
	index目录  单独页面目录
		index.vue  页面文件
static  静态资源目录 （图片）
common  公共文件css，js
utils   （js）
components 复用公众组件 
		

六、创建页面

选择pages目录，右键选项创建页面即可

七、工程配置pages.json

1globalStyle全局外观配置 （window的配置）

{
    "globalStyle": {
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "第一个demo",
		"navigationBarBackgroundColor": "#f00",
		"backgroundColor": "#F8F8F8"
	},
}

2页面配置 （页面的配置）

{
    "pages":[
        {
			"path": "pages/index/index",
			// style 相当于页面的json文件
			"style": {
				"navigationBarTitleText": "首页",
				"enablePullDownRefresh":true
			}
		}
    ]
}

3配置tabBar

{
    "tabBar":{
		"backgroundColor":"#4CD964",
		"list":[
			{
				"text":"index",
				"pagePath":"pages/index/index",
				"iconPath":"static/index.png",
				"selectedIconPath":"static/indexFull.png"
			},
			{
				"text":"cart",
				"pagePath":"pages/cart/cart",
				"iconPath":"static/cart.png",
				"selectedIconPath":"static/cartFull.png"
			},
			{
				"text":"my",
				"pagePath":"pages/my/my",
				"iconPath":"static/my.png",
				"selectedIconPath":"static/myFull.png"
			}
		]
	},
}

4condition启动模式配置

在 App 里真机运行可直接打开配置的页面，微信开发者工具里需要手动改变编译模式，

{
    //上线之前可以删除
	"condition":{
		"current":0, //显示哪一个
		"list":[  // 多少个
			{
				"name":"首页",
				"path":"pages/index/index",
				"query":"id=10"
			},
			{
				"name":"购物车",
				"path":"pages/cart/cart",
				"query":"id=10"
			},
			{
				"name":"我的",
				"path":"pages/my/my",
				"query":"id=10"
			},
			{
				"name":"测试",
				"path":"pages/test/test",
				"query":"id=10"
			}
		]
	}
}

c2

八、基础语法

uni-app使用的是vue的语法 + 小程序的组件及api

1数据绑定

 <view>
     <!-- 数据绑定 -->
     {{ title }}
</view>
<!-- 属性绑定 -->
<view :class="classname"></view>
<!-- <view class="{{ classname }}"></view> -->

2条件渲染

v-if v-show v-else-if v-else

<!-- 条件渲染 -->
<!-- 
小程序：  wx:if   wx:elif  wx:else
uniapp: v-if   v-show   v-else-if   v-else
-->
<view v-if="age >= 18">成年</view>
<view v-else>未成年</view>
<!-- <view wx:if="{{ age >= 18 }}"></view> -->

3列表渲染

<!-- 
小程序列表渲染： 
wx:for="{{ 变量 }}"  默认值： item，index  wx：key="*this/唯一的属性"
uniapp：
v-for="(item,index) in  变量"  :key="item.id/index"
-->
<view v-for="(item,index) in  arr" :key="index">
    {{ index }}--{{ item }}
</view>

4事件处理

<!-- 事件绑定 -->
<!-- 
小程序： 
bind/catch+ 事件类型 = "事件函数"  传递参数：data-*-* 
uniapp：
v-on/@ + 事件类型 = "事件函数（参数...）"
-->
<!-- <button type="default" bindtap="click">小程序绑定</button> -->
<button data-msg="小程序" type="default" @click="click($event,3)">vue绑定</button>

methods: {
    click(e,num){
        // console.log('click',num,e)
        console.log(this.age)
        // 更新视图及数据
        this.age= 20;

    }
}

5计算属性

模板：

<!-- 使用计算属性 -->
<view>numA:{{ numA }}</view>
<view>numB:{{ numB }}</view>
<view class="">
    sum:{{ sum }}
</view>
<button type="default" @click="change">change</button>

js

computed:{
    // getter
    // sum(){
    // 	return this.numA + this.numB;
    // },
    // setter 
    sum:{
        get(){
            return this.numA + this.numB;
        },
            set(newSum){
                console.log(123,newSum)
            }
    }
},

6静态资源及公共文件

引入静态资源路径的问题：相对路径/绝对路径/ @

image

<!-- 
在模板中引入静态资源
src:  1.相对路径  2. 绝对路径  /   @/
-->
<!-- <image src="../../static/indexFull.png"></image> -->
<image src="/static/indexFull.png"></image>
<image src="@/static/indexFull.png"></image>

js

	// 逻辑文件： 小程序js文件
	// 2.引入js文件
	// 1.使用相对路径
	// import  config  from  "../../utils/config.js";
	// console.log(config)
	// 2.使用绝对路径  /    不支持
	// import  config  from  "/utils/config.js";
	// console.log(config)
	// 3.使用绝对路径@/  支持
	import  config  from  "@/utils/config.js";
	console.log(config)

css

<style>
	/*  1.使用传统的html引入方式 */
	/* 路径支持相对路径及绝对路径 */
	/* @import url("../../common/css/index.css"); */
	/* @import url("/common/css/index.css"); */
	/* @import url("@/common/css/index.css"); */
	/* 2.使用小程序的引入方式 */
	@import  "../../common/css/index.css";
	/* 小程序样式文件wxss */
	.box{
		width: 200px;
		height: 200px;
		background-color: #ccc;
		/* 	background-color: $uni-bg-color; */
	}
	
	
</style>

7样式配置

(1)单位设置 rpx 整个宽度 750rpx

根据设计稿的宽度，设置好比例，快速进行px到rpx的转换

设置位置：
菜单栏--工具--编辑器设置--px转换为rpx，设置转换比例即可

(2)sass/scss使用

安装sass/scss插件

(3)less使用

安装less插件

8下拉刷新

开启下拉动作

pages.json

{
    "pages":[
        {
            "path" : "pages/cart/cart",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "购物车",
                "enablePullDownRefresh": true
            }
            
        }
    ]
}

js

// 下拉
onPullDownRefresh() {
    // 数据加载
    // console.log("下拉")
    setTimeout(()=>{
        uni.stopPullDownRefresh()
    },3000)
},

9上拉触底

参考小程序

onReachBottom() {
			console.log("上啦触底")
		},

c3

九、生命周期

应用生命周期

​ app.vue

<script>
	// 逻辑文件   作用相当于小程序中的app.js 
	export default {
		// 应用生命周期及全局变量
		// 应用生命周期 （同微信小程序的应用生命周期保持一致）
		onLaunch(){
			console.log("onLaunch，初始化")
		},
		onShow(){
			console.log("onshow，切前台")
		},
		onHide(){
			console.log("onHide，切后台")
		}
	}
</script>

页面生命周期

​ 在pages.json中注册的页面，对应的生命周期函数

<script>
	export default {
		data() {
			return {
				
			}
		},
		// 当前页面不应该使用组件的生命周期
		mounted() {
			console.log("mounted")
		},
		// 当前位置属于页面，使用页面的生命周期函数（同微信小程序）
		onLoad(){
			console.log("onlaod")
		},
		onShow(){
			console.log('页面显示')
		},
		onHide(){
			console.log("页面隐藏")
		},
		onReachBottom() {
			console.log("上啦触底")
		},
		
		// 下拉
		onPullDownRefresh() {
			// 数据加载
			// console.log("下拉")
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},3000)
		},
		methods: {
			
		}
	}
</script>

组件的生命周期

自己定义的复用的自定义组件中使用

<script>
	export default {
		name:"myheader",
		data() {
			return {
				
			};
		},
		// 当前位置为复用自定义组件，使用vue的生命周期
		mounted() {
			console.log("myheader-生命周期")
		},
		// 当前组件是不支持小程序的生命周期函数
		onLoad(){
			console.log('1234567890')
		}
	}
</script>

十、组件通信

1.单文件组件

2父传子

通过属性进行传递

(1)在父组件上绑定属性

<view>
    <view>组件传值</view>
    <one :msg="msg"></one>
</view>

(2)在子组件上使用props接受

props:["msg"]

3子传父

(1)在子组件使用this.$emit()

methods:{
    toMyPage(){
        this.$emit("fromOne","one组件中的数据")
    }
}

(2)在父组件上使用自定义事件

	<view>
		<view>组件传值</view>
		<one :msg="msg"  @fromOne="click"></one>
	</view>

	methods: {
			click(msg){
				console.log(msg)
			}
		}

4兄弟之间组件传值

(1)在main.js中设置处理器

 Vue.prototype.$bus = new Vue;

(2)在其中一个组件使用 $emit

toTwoPage(){
    this.$bus.$emit("fromOne1",this.oneMsg)
}

(3)在另一个组件使用 生命周期内使用$on

mounted(){
    this.$bus.$on("fromOne1",(msg)=>{
        // console.log(msg)
        this.oneMsg = msg;
    })
}

5uni-app页面通讯

toTwoPage(){
    uni.$emit("fromOne1",this.oneMsg)
}

mounted(){
    uni.$on("fromOne1",(msg)=>{
        // console.log(msg)
        this.oneMsg = msg;
    })
}

c4

十一、全局变量

1公用模块（模块化）

创建公共模块 config.js

var port = 3000;

export  default {
	port
}

在其他页面进行使用

import  config  from  "../../utils/config.js";
console.log(config)

2挂载 Vue.prototype

mian.js 进行挂载

Vue.prototype.$bus = new Vue;

在页面进行使用

this.$bus

3globalData

在app.vue中进行定义

<script>
	// 逻辑文件   作用相当于小程序中的app.js 
	export default {
		// 设置全局变量
		globalData:{
			loginStatu:false
		},
	}
</script>

在页面中进行使用

// 获取app中的全局数据对象
var app =  getApp();
console.log(app.globalData.loginStatu)

4数据缓存

(1)设置缓存

_setStorage(){
    // 使用api进行存储
    uni.setStorageSync("name","李四")
    uni.setStorage({
        key:"age",
        data:20
    })
},

(2)获取缓存

async _getStorage(){
    // var res = uni.getStorageSync("name");
    // console.log(res)
    var res = await uni.getStorage({
        key:"age"
    })
    console.log(res)
}

c5

十二、Vuex状态管理

1概述

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

uni-app 内置了 Vuex 。

2创建仓库

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);//vue的插件机制

//Vuex.Store 构造器选项
const store = new Vuex.Store({
    state:{//存放状态
       status:false
    },
	mutations:{
		changeStatus(state,status){
			state.status = status;
		}
	}
})
export default store

3将仓库store挂载到prototype

	
import  store  from "store/index.js"
Vue.prototype.$store = store;

4在页面文件中使用store

<template>
	<view>
		<view>登录状态:{{ status }}</view>
		<button type="default" @click="login">登录</button>
	</view>
</template>

<script>
	import  {mapState} from "vuex";
	export default {
		data() {
			return {
				
			}
		},
		computed:{
			...mapState(["status"])
			// loginStatus(){
			// 	return  this.$store.state.status;
			// }
		},
		methods: {
			login(){
				// this.$store.state.status = true;
				// 先执行登录
				this.$store.commit("changeStatus",true);
			},
		}
	}
</script>