uniapp知识点总结

1.uniapp优缺点

优点:
a. 一套代码可以生成多端
b. 学习成本低,语法是vue的,组件是小程序的
c. 拓展能力强
d. 使用HBuilderX开发,支持vue语法
e. 突破了系统对H5调用原生能力的限制
缺点:
a. 问世时间短,很多地方不完善
b. 社区不大
c. 官方对问题的反馈不及时
d. 在Android平台上比微信小程序和iOS差
e. 文件命名受限

2.uniapp主要的目录和文件的作用

pages.json
配置文件，全局页面路径配置，应用的状态栏、导航条、标题、窗口背景色设置等
main.js
入口文件，主要作用是初始化vue实例、定义全局组件、使用需要的插件如 vuex，注意uniapp无法使用vue-router，路由须在pages.json中进行配置。如果开发者坚持使用vue-router，可以在插件市场找到转换插件。
App.vue
是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素。除此之外，应用生命周期仅可在App.vue中监听，在页面监听无效。
pages
页面管理部分用于存放页面或者组件
manifest.json
文件是应用的配置文件，用于指定应用的名称、图标、权限等。HBuilderX 创建的工程此文件在根目录，CLI 创建的工程此文件在 src 目录。
package.json
配置扩展，详情内容请见官网描述package.json概述

3.uniapp的生命周期

页面生命周期

1. onLoad：首次进入页面加载时触发，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
2. onShow：加载完成后、后台切到前台或重新进入页面时触发
3. onReady：页面首次渲染完成时触发
4. onHide：从前台切到后台或进入其他页面触发
5. onUnload：页面卸载时触发
6. onPullDownRefresh：监听用户下拉动作
7. onReachBottom：页面上拉触底事件的处理函数
8. onShareAppMessage：用户点击右上角转发

组件生命周期：

函数名	说明	平台差异说明	函数名	说明
beforeCreate	在实例初始化之后被调用		beforeCreate	在实例初始化之后被调用
created	在实例创建完成后被立即调用		created	在实例创建完成后被立即调用
beforeMount	在挂载开始之前被调用		beforeMount	在挂载开始之前被调用
mounted	挂载到实例上去之后调用， 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档		mounted	挂载到实例上去之后调用， 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档
beforeUpdate	数据更新时调用，发生在虚拟 DOM 打补丁之前	仅H5平台支持	beforeUpdate	数据更新时调用，发生在虚拟 DOM 打补丁之前
updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子	仅H5平台支持	updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
beforeDestroy	实例销毁之前调用。在这一步，实例仍然完全可用		beforeDestroy	实例销毁之前调用。在这一步，实例仍然完全可用

4.全局变量globalData的理解

globalDate和微信小程序中一样，是定义在全局上的对象，他类似于vuex,用来共享全局状态，在组件和页面中可以使用getApp().globalData来获取和修改全局变量。

//app.vue

<script>  
    export default {  
        globalData: {  
            msg: 'hello world'  
        }
    }  
</script>

//在其他页面调用/修改全局变量
getApp().globalData.msg= 'hello world'

5.条件编译的使用

每个平台有自己的一些特性，因此会存在一些无法跨平台的情况。因此就有了条件编译这个模式，不仅是js逻辑代码，template和css样式都可以设置成在某个环境中生效，在其他环境不生效。

//template
<!--  #ifdef  MP-WEIXIN -->
<!--  只在小程序中生效 -->
<view>我是微信小程序</view>
<!--  #endif -->

<!--  #ifdef  APP-PLUS -->
<!--  只在 app 中生效 -->
<view>我是 app </view>
<!--  #endif -->

//js
// #ifndef H5
// 表示只有 h5 不使用这个 api
uni.createAnimation(OBJECT)
// #endif

//css
/* #ifdef  MP-WEIXIN */
/*  只在小程序中生效  */
.header {
	color:red
}
/*  #endif  */

6.Uniapp怎样上传图片

//选择文件
uni.chooseFile({
  count: 6, //默认100
  extension:['.zip','.doc'],
    success: function (res) {
        console.log(JSON.stringify(res.tempFilePaths));
    }
});

// 选择图片文件
uni.chooseFile({
  count: 10,
  type: 'image',
  success (res) {
    // tempFilePath可以作为img标签的src属性显示图片
    const tempFilePaths = res.tempFiles
  }
})

7.uni.request封装

const request = (config) => {
	// 处理 apiUrl
	config.url = '你的链接服务器地址' + config.url;
	if(!config.data){
		config.data = {};
	}
	let promise = new Promise(function(resolve, reject) {
		uni.request(config).then(responses => {
			// 异常
			if (responses[0]) {
				reject({message : "网络超时"});
			} else {
				let response = responses[1].data; 
				resolve(response);
			}
		}).catch(error => {
			reject(error);
		})
	})
	return promise;
};

export default request;

8.rpx、px、em、rem、%、vh、vw的区别是什么？

rpx	相当于把屏幕宽度分为750份，1份就是1rpx
px	绝对单位，页面按精确像素展示
em	相对单位，相对于它的父节点字体进行计算
rem	相对单位，相对根节点html的字体大小来计算
%	一般来说就是相对于父元素
vh	视窗高度，1vh等于视窗高度的1%
vm	视窗宽度，1vw等于视窗宽度的1%

9.本地数据的存储和接受

	uni.setStorage({key:“属性名”，data:“值”}) //异步 存储
		uni.setStorageSync(KEY,DATA) //同步 存储
	uni.getStorage({key:“属性名”,success(res){res.data}}) //异步 接收
		uni.getStorageSync(KEY) //同步 接收
	uni.removeStorage(OBJECT) //从本地缓存中异步移除 指定 key。
		uni.removeStorageSync(KEY) //从本地缓存中同步移除指定 key。
	uni.clearStorage() //清理本地数据缓存。
		uni.clearStorageSync() //同步清理本地数据缓存。

10.Uniapp事件总线

事件总线可以作为组件沟通的桥梁，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的灾难
触发事件
在uni中可以通过uni.$emit(eventName,OBJECT)来触发全局的自定事件。附加参数都会传给监听器回调。监听事件uni.$on(eventName,callback)
监听全局的自定义事件。事件可以由 uni.$emit触发，回调函数会接收所有传入事件触发函数的额外参数。只监听一次uni.$once(eventName,callback)
监听全局的自定义事件。事件可以由 uni.$emit触发，但是只触发一次，在第一次触发之后移除监听器。移除监听uni.$off([eventName, callback])
移除全局自定义事件监听器。