uni-app知识点(vuex+常用api+组件)

vuex使用

vuex共有state、mutations、actions、getters、modules五个模块

1.创建文件

在项目根目录下创建store文件夹，在其内新建一个文件index.js，在index.js对vuex进行初始化。

// 导入vuex
import Vuex from 'vuex'
// 导入Vue
import Vue from 'vue'
// 使用Vuex
Vue.use(Vuex)
// 导出Vuex
export default new Vuex.store({
  //定义数据
  state,
  //改变数据
  mutations,
  //异步操作
  actions,
  //计算
  getters,
  //模块
  modules
​})

2.在main.js文件中导入vuex，并定义全局$store

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

3.state定义数据

state:{
	gTitle:{
		text:"你好Vuex",
		color:"#000",
		fontSize:"24px",
		background:"#f70"
	},
},

4.mutations改变状态

mutations:{
	// 更改字体大小
	setSize(state,data){
		state.gTitle.fontSize=data+'px'
	},
	// 更改背景颜色
	setBackgroundColor(state,data){
		state.gTitle.background=data;
	},
},

 5.actions异步操作

state:{
    joks:[],
},

mutations:{
	// 更新笑话数据
	setJoks(state,data){
		state.joks=data;
	}
},

// 异步api操作
	actions:{
		// 和后端交互，异步操作都会放在actions中
		getJok(context,data){
			uni.request({
			    url: 'http://xxx.com/mi/list.php',
				method:"get",
				data:data,
				// axios get请求传参用的params, post用data
				// uni.request post与get传参也是用data
				// 更加content-type如果是application/json
				// 那么data是jison如果是urLencoeded data就是url编码形式
			    success: (res) => {
			        console.log(res.data);
					// actions去调用mutations
					context.commit("setJoks",res.data.result);
			    }
			});
		}
	},

6.getters内部计算

state:{
	joks:[],
},
// 改变状态的唯一方法
mutations:{
	// 更新笑话数据
	setJoks(state,data){
		state.joks=data;
	}
},
// 异步api操作
actions:{
	// 和后端交互，异步操作都会放在actions中
	getJok(context,data){
		uni.request({
		    url: 'http://xxx.com/mi/list.php',
			method:"get",
			data:data,
			// axios get请求传参用的params, post用data
			// uni.request post与get传参也是用data
			// 更加content-type如果是application/json
			// 那么data是jison如果是urLencoeded data就是url编码形式
		    success: (res) => {
		        console.log(res.data);
				// actions去调用mutations
				context.commit("setJoks",res.data.result);
		    }
		});
	}
},
// 内部计算
getters:{
	// 计算所有笑话字数总和
	"totalLen":function(state){
		// reduce累计()
		var count=0;
		for(var i=0;i

常用api

1.uni.getSystemInfoSync() 获取系统信息

2.uni.getMenuButtonBoundingClientRect() 获取胶囊按钮的边界

一般用于微信小程序

3.上传图片

组件

1.自定义组件

创建并导入组件

组件传参

父传子：

 子传父：

2.第三方插件

uni-app官网扩展组件（uni-app官网）

 

uView组件

使用uView需要先导入插件

uView2.0重磅发布，利剑出鞘，一统江湖 - DCloud 插件市场

然后按照下方链接中的步骤配置成功即可使用

下载安装方式配置 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架