uni-app基础知识补充

vuex

初始化

• store/index.js

import Vuex from 'vuex';
import Vue from 'vue';
Vue.use(Vuex)
export default new Vuex.Store({
	state:{},
	mutations:{},
	actions:{},
	getters:{},
	modules:{}
})

• main.js

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

vuex的模块

state：状态，存储数据

• state定义数据

state:{
		gTitle:{
			title:"你好Vuex",
			color:"#f00",
			fontSize:"24px",
			backgroundColor:"#0f0"
		},
		joks:[],
	},

• 在页面中使用：$store.state.gTitle.title
• 修改只能通过mutations
• 组件中简写

import {mapState} from 'vuex'
computed:{
	...mapState(["gTitle"])
}

mutations：修改数据的唯一方法

• 定义

		//更改字体大小
		setSize(state,data){
			state.gTitle.fontSize = data + "px"
		},
		//更改背景颜色
		setBackgroundColor(state,data){
			state.gTitle.backgroundColor = data
		},
		setJok(state,data){
			state.joks = data
		}

• 页面中使用：this.$store.commit(“setSize”,e.detail.value)
• 简写
  1、导入：import {mapMutations} from ‘vuex’
  2、 methods：…mapMutations([“setFontSize”]),
  3、 使用：this.setFontSize(100)

actions：异步api操作

• 定义

		getJok(context,data){
			uni.request({
				url:"http://520mg.com/mi/list.php",
				method:'GET',
				data:data,
				//axios get请求传参用params，post用data
				//uni.request，get与post都用data
				// content-type如果是application-json那么data是json
				//如果是urlencoeded  data就是url编码形式
				success:res=> {
					console.log("getJok",res)
					context.commit("setJok",res.data.result)
				}
			})
		}

• 页面中使用：this.$store.dispatch(“getJok”,{page:1})

• 简写：
  1、导入：import {mapActions} from ‘vuex’
  2、methods中计算：…mapActions([“getJok”]),
  3、onLoad中使用：this.getJok()

• actions中的context
  1、commit：执行mutations方法
  2、dispatch：执行actions的方法
  3、state：数据
  4、getters：计算出来的是数据

getters：内部计算

• 定义

"totalLen":function(state){
			var count = 0;
			for(var i=0;i<state.joks.length;i++){
				count += state.joks[i].summary.length
			}
			return count;
		}

• 使用：this.$store.getters.totlaLen
• 简写
  1、导入：import {mapGetters} from ‘vuex’
  2、computed：…mapGetters([“totalLen”])
  3、使用：totalLen

modules：模块

这个用的比较少就不做过多解释了

常用api

系统信息

• 获取系统信息：uni.getSystemInfoSync()
• 获取胶囊信息：uni.getMenuButtonBoundingClientRect()

<view class="title">获取系统信息</view>
		<view>状态栏高度：{{info.statusBarHeight}}</view>
		<view>屏幕宽高：{{info.screenWidth}},{{info.screenHeight}}</view>
		<view>系统：{{info.osName}}</view>
		<view>品牌：{{info.model}}</view>
		<view>brand:{{info.brand}}</view>
		<view>可使用窗口的顶部位置：{{info.windowTop}}</view>
		<view>安全区域：{{JSON.stringify(info.safeArea)}}</view>
		<view>安全区域：{{JSON.stringify(info.safeAreaInsets)}}</view>
		<!-- #ifdef MP -->
		<view>胶囊微信小程序</view>
		<view>导航栏高度：{{(menuButtonInfo.top-info.statusBarHeight)*2+menuButtonInfo.height}}</view>
		<view>胶囊：{{JSON.stringify(menuButtonInfo)}}</view>
		<!-- #endif -->

		onLoad() {
			const info = uni.getSystemInfoSync();
			this.info = info;
			console.log(info);
			//存储api
			uni.setStorageSync("info", info);
			// #ifdef MP
			//获取胶囊按钮的边界
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.menuButtonInfo = menuButtonInfo;
			console.log(menuButtonInfo);
			// #endif

		}

图片上传

• 选择图片：uni.chooseImage()

uni.chooseImage({
	count: 6, //默认9
	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
	sourceType: ['album'], //从相册选择
	success: function (res) {
		console.log(JSON.stringify(res.tempFilePaths));
	}
});

• 上传图片：uni.uploadFile()

uni.chooseImage({
	success: (chooseImageRes) => {
		const tempFilePaths = chooseImageRes.tempFilePaths;
		uni.uploadFile({
			url: 'https://www.example.com/upload', //仅为示例，非真实的接口地址
			filePath: tempFilePaths[0],
			name: 'file',
			formData: {
				'user': 'test'
			},
			success: (uploadFileRes) => {
				console.log(uploadFileRes.data);
			}
		});
	}
});

• 下载图片：uni.downloadFile()

uni.downloadFile({
	url: 'https://www.example.com/file/test', //仅为示例，并非真实的资源
	success: (res) => {
		if (res.statusCode === 200) {
			console.log('下载成功');
		}
	}
});

• 预览图片：uni.previewImage()

// 从相册选择6张图
uni.chooseImage({
	count: 6,
	sizeType: ['original', 'compressed'],
	sourceType: ['album'],
	success: function(res) {
		// 预览图片
		uni.previewImage({
			urls: res.tempFilePaths,
			longPressActions: {
				itemList: ['发送给朋友', '保存图片', '收藏'],
				success: function(data) {
					console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
				},
				fail: function(err) {
					console.log(err.errMsg);
				}
			}
		});
	}
	});

• 保存图片到相册：uni.saveImageToPhotosAlbum()

uni.chooseImage({
	count: 1,
	sourceType: ['camera'],
	success: function (res) {
		uni.saveImageToPhotosAlbum({
			filePath: res.tempFilePaths[0],
			success: function () {
				console.log('save success');
			}
		});
	}
});

常用组件

• uni内置扩展组件–兼容多端
• uni-countdown倒计时

<view class="title">扩展组件---倒计时</view>
	<uni-countdown :font-size="30" :day="1" :hour="2" :minute="30" :second="0" color="#FFFFFF"
			background-color="#007AFF" />

• uni-swiper-dot轮播图指示点

<view class="title">扩展组件---轮播图指示点</view>
		<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode"
			:dotsStyles="{selectedBackgroundColor:'#00FFFF',selectedBorder:'1px rgba(0, 0, 255, 0.9) solid'}">
			<swiper class="swiper-box" @change="change">
				<swiper-item v-for="(item ,index) in info" :key="index">
					<view class="swiper-item">
						{{item.content}}
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>

• uni-popup弹出框

<view class="title">扩展组件---弹框</view>
		<!-- 输入框示例 -->
		<button class="button" type="primary" @click="inputDialogToggle"><text class="button-text">输入对话框</text></button>
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="输入内容" value="对话框预置提示内容!" placeholder="请输入内容"
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>

		inputDialogToggle() {
				this.$refs.inputDialog.open()
			},
			dialogConfirm() {
				console.log('点击确认')
				this.messageText = `点击确认了 ${this.msgType} 窗口`
				this.$refs.message.open()
			},
			dialogInputConfirm(val) {
				uni.showLoading({
					title: '3秒后会关闭'
				})
				setTimeout(() => {
					uni.hideLoading()
					console.log(val)
					this.value = val
					// 关闭窗口后，恢复默认内容
					this.$refs.inputDialog.close()
				}, 3000)
			},

自定义组件

easecom

• 文件夹components/组件名/组件名.vue不需要导入也能在页面中直接使用
• uni-modules/components/组件名/组件名.vue（这种方式也可以）

定义组件

• .vue文件就是一个组件

组件传参

父传子props

• 父通过属性的方式传递给子组件< steper :value=“d1”></ steper>
• 子通过props接收：props:{value:{type:Number,default:1}}
• 子组件可以使用：this.count = this.value

子传父事件$emit

• 子触发事件：this.$emit(“input”,this.count)
• 监听事件更新值：< steper :value=“d1” @input=“d1=$event”></ steper>

v-model是简写（下边两种方式等价）

• < steper :value=“d1” @input=“d1=$event”></ steper>
• < steper v-model=“d1”></ steper>

全局传参：uni.$on

• 全局发送：uni.$on(“事件名”,事件值)
• 全局监听（发送事件前已经注册监听）
  1、created生命周期
  2、uni.$on("事件名",$event=>{响应操作})

第三方插件的运用

uni-插件市场uview

官方网址：https://www.uviewui.com/components/intro.html

配置网址：https://www.uviewui.com/components/downloadSetting.html

1. 引入uView主JS库（在项目根目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后）

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

2. 在引入uView的全局SCSS主题文件（在项目根目录的uni.scss中引入此文件）
   @import ‘@/uni_modules/uview-ui/theme.scss’;

3. 引入uView基础样式（特别注意：在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性）

<style lang="scss">
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "@/uni_modules/uview-ui/index.scss";
</style>

4.配置easycom组件模式（此配置需要在项目根目录的pages.json中进行。）