uni-app 开发总结

框架介绍

uni-app 的框架是基于 vue 的单文件组件来开发的，自带 ui 框架，可以完成 h5 的开发；使用了 weex 的原生渲染引擎，可以开发安卓和苹果 app ；还可以发布到各类小程序平台，举个栗子：微信小程序、支付宝小程序、百度小程序、头条小程序等等等。
其实还有一个跨多平台开发的框架，那就是 taro ，这是基于 react native 来开发的，不过学习成本可能会比较高。

项目目录

• 扩展组件 components
  在官网的插件市场可以下载各种扩展组件，刚开始可以把官网的例子复制过来，差不多就够用了。
• 扩展插件 js_sdk
  可以在官网下载，也可以在其它地方下载需要的 js 插件，在需要使用的文件里面引入就可以了哦。
• 页面组件 pages
  页面组件里面一个模块就是一个文件夹了，每个模块里面有多个页面组件，就是单文件组件，感觉很方便。
• 静态资源 static
  这是一个放图片的文件夹，图片的引用最好用绝对路径，加个 @ 就是了，真是方便啊。
  图片的处理是这样的，小图片的话就生成了 base64 的编码了，大一点的图片就是直接引入了，有的还会加个名字编码。
• 打包目录 unpackage
  在这里有各个平台的打包文件，可以使用官网自己的开发编辑器 HBuilder X 。
• 应用的文件 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]

关联的公众号：三学子，满足您不一样的阅读需求。