uni-app 和Vuex

Vue.js框架下的移动端 开发工具：HbuilderX

介绍

uni-app框架是$基于vue$的单文件组件开发的，自带$ui框架$，可以完成$h5$的开发， 使用了$weex$的原生渲染引擎，可以开发$安卓和苹果app$,还可以发布到各类小程序平台，比如、；微信小程序。

项目目录

扩展组件components
在官网的插件市场可以下载各种扩展组件，刚开始可以把官网的例子复制过来也就够用了。
扩展插件js_sdk
可以在官网下载，也可以在其他地方下载需要的js插件，然后在需要的文件里面引入就可以用了。
页面组件pages
页面组件里一个模块就是一个文件夹，每个模块里有很多页面组件，就是单文件组件，方便使用。
静态资源static
这个文件夹是放我们做页面需要的图片的。图片引用最好是绝对路径，加上@就可以了。
图片处理：小图片生成base64编码，大一点的图片直接引入。
打包目录unpackage
在这里有各个平台的打包文件，可以使用官网自己的开发编辑器HBuilderX。
应用的文件App.vue
在这个文件里，可以写一些公共的样式和脚本，应用的生命周期，调用等等。
入口文件main.js
配置文件manifest.json
各种平台的打包配置。
页面路径pages.json
每个页面都要在这个文件里配置一下。
样式变量uni.scss
可以设置框架的常用样式变量。

注意事项

在页面组件里面，可以写一些生命周期的函数回调，比如，：onLoad就很常用。

export default {
	onLoad: function( param ) {
		var vm = this;
		
		// 判断数据存储权限
		uni.setStorage({
			key: 'test',
			data: 'test',
			fail: function () {
				vm.storage = false;
				uni.showModal({
					title: '操作失败',
					content: '您未开启数据存储权限',
					showCancel: false
				});
			}
		});
		
		// 更新数据存储
		if ( vm.storage ) {
			vm.param = uni.getStorageSync( 'param' );
			if ( !vm.param ) vm.param = {};
		}
		for ( var key in param ) {
			vm.param[ key ] = param[ key ];
		}
		if ( vm.storage ) {
			uni.setStorageSync( 'param', vm.param );
		}			
		
		this.user_id = this.param.user_id;
		
		this.getData();
	},
	components: {
		uniNavBar,
		uniIcon
	},
	data() {
		return {
			param: {},
			storage: true,
			searchValue: '',
			record: [
				
			],
			city: '北京'
		};
	},
};

调用接口的时候，要注意跨域问题

// 跨域问题需要在后端设置
// header("Access-Control-Allow-Origin:*");
getData() {
	var vm = this;
	uni.showLoading({
		title: '正在查询...'
	})
	var userinfo = uni.getStorageSync( 'userinfo' );
	uni.request({
		url: 'http://www.yourhost.com/path/to/api', 
		data: {
			'user_id': vm.user_id,
			'token': App.getToken( 'api' ),
			'userId': vm.param.userId ? vm.param.userId : userinfo.userId
		},
		header: {
			'content-type': 'application/x-www-form-urlencoded' 
		},
		method: 'POST',
		success: function ( res ) {
			// 延时关闭，太快了会关不掉
			setTimeout(function(){uni.hideLoading();},100);
			
			if ( res.data.msg_code === 'success' ) {  
				vm.totalMoney = res.data.data.totalMoney;							
			} else {
				uni.showModal({
					title: '发生错误',
					content: res.data.msg,
					showCancel: false
				});
			}
		},
		fail: function ( err ) {
			setTimeout(function(){uni.hideLoading();},100);
			uni.showModal({
				title: '网络出现问题',
				content: '请检查网络状态(/path/to/api)',
				showCancel: false
			});
		}
	});
},

样式的尺寸问题，默认是按照宽度为750px的设计图，1upx==1px;
在开发的时候，可以运行到浏览器，一旦有修改会发送到浏览器上；
发布的时候，可以发布到各个平台上，要注意域名和目录的配置，服务器要伪静态规则，在.htaccess文件里。

RewriteRule ^path/to/dir/pages/(.*)$ path/to/dir/index.html [L]

uni-app基础知识

1.利用开发工具HbuilderX创建一个uni-app项目
路径：“文件”菜单 | 新建 | 项目 | 默认模板
1、[pages]：存放页面的目录，里面的每一个文件夹就是一个页面。
2、[static]：存放静态文件的目录，里面可以放置图片、字体等。
3、App.vue：实现整个项目的生命周期。
4、main.js：整个项目的入口文件（创建了一个Vue实例app）。
5、pages.json：页面配置文件。
6、manifest.json：项目配置文件。
新建页面，单击pages目录—新建页面—创建同名目录
2.如何管理CSS样式：
1、在uni-app项目的根目录下创建一个名为common的文件夹，用来存放通用代码 （css、js）。
在App.vue文件中需要将common文件夹中的文件引入项目。
@import ‘./common/uni.css’;
2、在common文件夹中放置uni.css的样式文件。
3、在common文件夹中放置字体图标（阿里矢量图iconFont）的样式文件。
（1）项目Tab栏的图标必须下载下来（.png文件），图标大小建议为81px * 81px。
（2）项目其他部分的图标生成字体/样式文件。
将iconfont.css文件复制到common文件夹中。
将ttf、svg字体文件复制到static\fonts文件夹中。
修改iconfont.css文件中关于指定字体文件的路径。
3、Tab栏：（同微信小程序）
如何模拟手机App。
（1）利用数据线将手机和电脑连起来。
（2）打开手机的“开发者选项”功能（Android手机）：
手机 |设置 | 关于本机 | Android版本/软件版本（用手指触碰7下）| 输入密码
（3）在手机和电脑端都安装“360手机助手”。
可以在App端设置中间按钮：
（1）“tabBar”中的“list”数组必须具备偶数个元素。
（2）只能在App端使用，且不能进行页面跳转。
（3）“midbutton”:{
“width”:“80px”,
“height”:“70px”,
“text”:“扫码”,
“iconPath”:“static/logo.png”,
“iconWidth”:“50px”
}
（4）可以在App.vue文件中的onLaunch钩子函数中利用uni-app的API处理midButton
的单击事件。
uni. onTabBarMidButtonTap(function(){
console.log(“中间的按钮在APP中被单击了”)
})

Vuex:状态管理

Vue有机部分构成：
1.state：状态量、数据源
2.mutations：操作数据源
3.getters：计算属性
4.actions：分发mutations
5.modules：vuex模块化

1.项目中有哪些地方会用到vuex
若只有一个地方用到vuex（用户登录信息）,则无需使用modules。
若有多个地方用到vuex，应该使用modules。
2.模块化vuex：
new Vuex.Store({
modules{
state:{},
mutaitons:{},
fetters:{},
actions:{},
}
})