uni-app总结以及插件的使用_uniapp插件使用

1：uni-app介绍官网网页：

https://uniapp.dcloud.net.cn/

介绍：

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

DCloud公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app（详见），腾讯课堂官方为uni-app录制培训课程（详见），开发者可以放心选择。

uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序开发框架（详见）、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。

 2：利用hbuilderx初始化项目：

hbuilderx的官网：

HBuilderX-高效极客技巧

1.点击hbuilderx菜单栏文件》项目》创建》

选择uni-app，填写项目名称，项目创建的目录：

 2.1项目的目录和文件的引用：

 2.2uni-app和小程序的关联：

 2.3小程序的配置：

 2.4小程序的基础配置：

 

 2.5：小程序的运行以及运行到小程序：

 

 3.button按钮组件的用法：

组件的属性：

 1.button组件默认独占一行，设置size为mini时可以在一行显示多个。

	<picker :value="time" v-model="time" @change="time=$event.detail.value"   mode="time" start="08:12" end="21:00">
	<view class="title">事件绑定</view>
	<button v-on:click="num++" size="mini" type="primary">{{num}}事件绑定</button>
	<button @click="num++" size="mini" type="warn">{{num}}事件绑定-简写</button>
	<button @click="say" size="mini" type="primary">响应函数</button>
	<button @click="say('你好，小木')" size="mini" type="warn">响应函数-传参</button>
	<button type="primary" @click="doit" :data-title="title">事件对象</button>

2.uni的生命周期：

1。vue的生命周期：

1.创建：beforeCreate

2.创建之后：created：的作用

1.可以使用this.没有dom

2.：可以初始化，注册监听事件

3.开启定时器

4.ajax请求

2.挂载：

1.beforeMount

2.mounted：

作用：1.可以操作dom节点

2.操作dom，ajax请求

3.更新:

1.beforeUpdate

2.updated

4.卸载：

1.beforeDestroy

作用:1.移出事件监听，2.移出停止定时器

2.destroyed

小程序的生命周期：

1函数.名 说明
onLaunch 当uni-app 初始化完成时触发（全局只触发一次）
onShow 当 uni-app 启动，或从后台进入前台显示
onHide 当 uni-app 从前台进入后台
onError 当 uni-app 报错时触发小程序

1.onload：加载

1.能够获取页面的参数

2.开启ajax，定时器，事件监听

3.像vue的created

2.show：显示：播放媒体

3：onReady：准备

1.获取节点信息

2.像vue的mounted

4.onHide：后台运行：

1.停止播放媒体：

5：onUnload：卸载：

1.停止事件监听与定时器

 

小程序的生命周期：

小程序的·全局方法：

onPullDownRefresh：

 onReachBottom 触底刷新：

 onPageSccroll

 路由组件：

1.navigator导航跳转：

2.open-type：打开的类型：

2.路由的传参：

2.接收：

 路由的配置：

获取当前页面getApp：

01 在App.vue 定义globalData:{num:100}；

 02：要是用的页面获取app  var app = getApp（）

 03：

 获取globalData的值，
					onShow(){
			this.num = app.globalData.num
		},

04：

 更新 globalData的值   addNum(){
				app.globalData.num++;
				this.num=app.globalData.num;
			}

获取页面栈 getCurrentPages:

1.

 2.

uni.navgateBack({delta:page.length})

3.

page[page.length-1]获取当权页面的信息(不要去修改)

uni-app中使用vuex：

1,。在项目中新建文件夹store,在main.js中导入：

1.1在根目录下新建文件夹store，在此目录下新建index,js文件

2.在index,js中导入：

//导入vuex
import Vuex from "vuex";
 
//导入vue
import Vue from "vue";
//使用vuex
Vue.use(Vuex);
//导出Vuex
export default new Vuex.Store({
	//状态
	state: {
		gTitle: {
			//文本
			text: "你好vuex",
			//颜色
			color: "#000",
			//字体
			fontSize: "25px",
			//背景颜色
			background: "#00ff00"
		},
		joks:[],
	},
	//修改数据得唯一方式
	mutations: {
		//更新笑话数据
		setJoks(stats,data){
			stats.joks = data;
		},
		setSize(state,data){
			state.gTitle.fontSize=data+"px"
		},
		//修改背景颜色
		setBackgroundColor(state,data){
			state.gTitle.background=data;
		}
	},
	//异步操作
	actions: {
		//和后端交互，异步操作都会放在actions中
		getJok(context,data){
			uni.request({
				url:"http://520mg.com/mi/list.php",
				method:"get",
				data:data,
				//axios get请求传参用的params post用data
				//uni.request post与get传参也是用data
				//更加content-type如果是application/json
				
				success:res=>{
					console.log(res,"getJok");
					//actions去调用mutations
					context.commit("setJoks",res.data.result);
				}
			})
		}
	},
	//内部计算
	getters: {
		//计算所有笑话字数之和
		"totalLen":function(state){
			//reduce累计
			var count = 0;
			for(var i=0;i<state.joks.length;i++){
				count+=state.joks[i].summary.length;
			}
			return count;
		}
	},
	//模块
	modules: {},
})

2.在main,js中导入挂载vuex

import App from './App'
 
// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    ...App
})
 
app.$mount()
// #endif
 
// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  return {
    app
  }
}
// #endif
import uView from '@/uni_modules/uview-ui'
 
Vue.use(uView)
 
//导入vuex
import store from "./store/index.js"
//导入定义全局$store
Vue.prototype.$store=store;

三：使用：

1.mapState，mapGetters, mapActions. mapMutations

<template>
	<view>
		<view class="title">vuex数据</view>
		<!-- 使用vuex的数据 更新样式与文本 -->
		<view :style="gTitle">
			{{$store.state.gTitle.text}}
			</view>
		<navigator url="./fontSize">修改文本大小</navigator>
		<navigator url="./backgroundColor">修改背景颜色</navigator>
		
		<view>总共有{{$store.state.joks.length}}条笑话</view>
		<view>{{totalLen}}个字</view>
	<view class="item" v-for="item in $store.state.joks">{{item.summary}}</view>
	
		</view>
</template>
 
<script>
	import {mapState ,mapActions,mapGetters} from "vuex";
	export default {
		computed:{
		...mapState(["gTitle"])	,
		...mapGetters(['totalLen']),
		},
		onLoad() {
			//调用getJok方法并传入参数
			this.$store.dispatch("getJok",{page:1})
				this.getJok()
		},
		data() {
			
			return {
				
			}
		},
		methods: {
			...mapActions(["getJok"]),
		
		}
	}
</script>
 
<style>
	.item{
		padding:  20px 20px;
		border-bottom: 1px solid #ccc;
	}
</style>

五：uniapp实现自定义组件

1.创建一个与pages平级的components页面：

第二部：找到uni-app官网找到组件

第三部：点击搜索组件并下载：

第四部：把插件导入到components里面：

第五步：然后就可以使用了

第三方插件，UviewUI

uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架

1.支持直接导入，或者下载压缩包

 2.找到官网，组件，安装，配置看完档

 

3.啥也不多了，直接按步骤一步步来就行了

1.在main.js中导入

import uView from '@/uni_modules/uview-ui'
 
Vue.use(uView)

2.修改uView内置配置方案

import App from './App'
 
// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    ...App
})
 
app.$mount()
// #endif
 
// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  return {
    app
  }
}
// #endif
import uView from '@/uni_modules/uview-ui'
 
Vue.use(uView)
 
//导入vuex
import store from "./store/index.js"
//导入定义全局$store
Vue.prototype.$store=store;

3.在components中导入countdown插件

<u-count-down :time="30 * 60 * 60 * 1000" format="HH:mm:ss:SSS" autoStart millisecond></u-count-down>