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]

你可能感兴趣的:(JS,前端框架,uni-app)