uni-app 开发总结

淩亂°似流年 2021-11-22 23:26 267阅读 0赞

## 框架介绍 ##

`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]

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