uniapp 相关知识点总结整理

一. 单位

1. 换算规则:

	1 px = 2 rpx
	1 px = 0.75 pt = 3 / 4 pt
	1 pt = 1.33 px =  4 / 3 px = 8 / 3 rpx
	1 em = 16 px
	1 em = 12 pt
	1px = 1pt * 图像分辨率/72

1. rpx是基于 当前屏幕宽度与750的比值 算出来的,属于动态的。会根据不同屏幕进行换算。所以做响应式比较好用。
2. 1px 与框架样式 1rpx 转换公式 设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx
3. 页面元素宽度在 uni-app 中的宽度计算公式 750rpx * 元素在设计稿中的宽度 / 设计稿基准宽度

eg:

1. 若设计稿宽度为 750px,元素 A 在设计稿上的宽度为 100px,
   那么元素 A 在 uni-app 里面的宽度应该设为:750rpx * 100 / 750,结果为:100rpx。
2. 若设计稿宽度为 640px,元素 A 在设计稿上的宽度为 100px,
   那么元素 A 在 uni-app 里面的宽度应该设为:750rpx * 100 / 640,结果为:117rpx。
3. 若设计稿宽度为 375px,元素 B 在设计稿上的宽度为 200px,
   那么元素 B 在 uni-app 里面的宽度应该设为:750rpx * 200 / 375,结果为:400rpx。

pt (point,磅):是一个物理长度单位,指的是72分之一英寸。

px (pixel,像素):像素px是相对于显示器屏幕分辨率而言的。

PX特点:

  1. IE无法调整那些使用px作为单位的字体大小;

  2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;

  3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。

em (相对长度单位,相对于当前对象内文本的字体尺寸):是一个相对长度单位,最初是指字母M的宽度,故名em。现指的是字符宽度的倍数,用法类似百分比,如:0.8em, 1.2em,2em等。通常1em=16px。

EM特点

  1. em的值并不是固定的;

  2. em会继承父级元素的字体大小。

    注意:任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

  3. 所以我们在写CSS的时候,需要注意:

  4. body选择器中声明Font-size=62.5%。

  5. 将你的原来的px数值除以10,然后换上em作为单位。

  6. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
    也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。
    字号:是中文字库中特有的一种单位,以中文代号表示特定的磅值pt,便于记忆、表述。
    pt和px的换算公式可以根据pt的定义得出:
    pt = 1/72(英寸), px = 1/dpi(英寸)

rem 是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

eg:

p {font-size:14px; font-size: 0.875rem;}

注意: 选择使用什么字体单位主要由你的项目来决定,如果你的用户群都使用最新版的浏览器,那推荐使用rem,如果要考虑兼容性,那就使用px,或者两者同时使用。

px 与 rem 的选择?

对于只需要适配少部分手机设备,且分辨率对页面影响不大的,使用px即可 。

对于需要适配各种移动设备,使用rem,例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

二. CSS

1. 获取状态栏高度 刘海屏

 this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight
 var(--status-bar-height) 此变量在微信小程序环境为固定 25px,在 App 里为手机实际状态栏高度。

2. 绝对定位居中

 //1、兼容性不错的主流css绝对定位居中的用法: 
 //子绝父相
 .conter{
	    width:600px;
	    height:400px;
	    position:absolute;
	    left:50%;
	    top:50%;
	    margin-top:-200px;/*高度的一半*/
	    margin-left:-300px;/*宽度的一半*/
    }

注意:这种方法有一个很明显的不足,就是需要提前知道元素的尺寸。否则margin负值的调整无法精确。此时,往往要借助JS获得。

//2、css3的出现,使得有了更好的解决方法,就是使用transform代替margin.transform中translate偏移的百分比值是相对于自身大小的,可以这样实现css绝对定位居中:
.conter{
	width:600px;height:400px;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);/*50%为自身尺寸的一半*/
}
//3、margin:auto实现绝对定位元素的居中(上下左右均0位置定位;margin:auto)
.conter{
	width:600px;
	height:400px;
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	margin:auto;/*有了这个就自动居中了*/
}
 

CSS position 相对定位和绝对定位:
https://www.runoob.com/w3cnote/css-position-static-relative-absolute-fixed.html

三. 时间类

1.获取当前时间戳
Math.round(new Date() / 1000)

四.设备 https://uniapp.dcloud.io/api/system/info

手机信息
uni.getSystemInfo({
success: function (res) {
    console.log(res.model);
    console.log(res.pixelRatio);
    console.log(res.windowWidth);
    console.log(res.windowHeight);
    console.log(res.language);
    console.log(res.version);
    console.log(res.platform);
}
});
系统信息
try {
	const res = uni.getSystemInfoSync();
	console.log(res.model);
	console.log(res.pixelRatio);
	console.log(res.windowWidth);
	console.log(res.windowHeight);
    console.log(res.language);
    console.log(res.version);
    console.log(res.platform);
} catch (e) {
	// error
}

获取当前APP版本信息及版本升级

全局APP.vue文件中

export default {
			data() {
				return {
		
			}
		},
		onLaunch: function() {
			console.log('App Launch 启动')
			// #ifdef APP-PLUS
			// 获取 manifest.json 的信息
			plus.runtime.getProperty( plus.runtime.appid, function ( wgtinfo ) {
			    //  获取 app的version
			    let appversion = wgtinfo.version;
			    // 存缓存 版本号
			    try {
			        uni.setStorageSync('appversion', appversion);
			    } catch (e) {}
			});
			//更新
			 this.checkUpdate();
			// #endif
			         
		},
		onShow: function() {
			console.log('App Show 展示在前台')
		},
		onHide: function() {
			console.log('App Hide 不在展示前台')
		},
		
		methods: {
			// 版本升级
			// #ifdef APP-PLUS
			checkUpdate(){
				var curVersion = uni.getStorageSync('appversion')
				console.log(curVersion);
				// 更新版本接口  
				var server = "http://t.heijinka.vip/api/version"; 
				var that = this;
				
				uni.request({
				    url: server,  //请求更新地址
				    data: that.curVersion,
				    success(res) {
				        if (res.statusCode == 200 && that.curVersion < res.data.msg.version) {
				            uni.showModal({
				                title: '版本更新' + res.data.msg.version,
				                content: res.data.msg.content,
				                confirmText: "更新",
				                // showCancel: !res.forceUpdate,
				                success: function(e) {
				                    if (e.confirm) {
				                        if (plus.os.name.toLowerCase() == 'ios') {
				                            // 跳转到下载页面
				                            plus.runtime.openURL(res.data.msg.downloadUrl)
				                        } else {
				                            that.createDownload(res.data.msg.downloadUrl);
				                        }
				                    } else {
				                        //取消
				                    }
				                }
				            });
				        } else {
				            uni.showModal({
				                title: '提示',
				                content: '已是最新版本',
				                showCancel: false
				            });
				        }
				    },
				})    
				
			},
			    
			createDownload(url){
				var dtask = plus.downloader.createDownload(url, {},
					function(d, status) {
						uni.showToast({
							title: '下载完成',
							mask: false,
							duration: 1000
						});
						//console.log(dtask);
						// 下载完成
						console.log('status: '+status);
						if (status == 200) {
							console.log('下载成功:'+d.filename);
							console.log('plus.io.convertLocalFileSystemURL(d.filename): '+plus.io.convertLocalFileSystemURL(d.filename))
							plus.runtime.install(plus.io.convertLocalFileSystemURL(d.filename), {}, function(success) {
								uni.showToast({
									title: '安装成功',
									mask: false,
									duration: 1500
								});
							}, function(error) {
								uni.showToast({
									title: '安装失败-01',
									mask: false,
									duration: 1500
								});
							})
						} else {
							uni.showToast({
								title: '更新失败-02',
								mask: false,
								duration: 1500
							});
						}
				});
				try {
					dtask.start(); // 开启下载的任务
					var prg = 0;
					var showLoading = plus.nativeUI.showWaiting("正在下载");  //创建一个showWaiting对象 
					dtask.addEventListener('statechanged', function(task,status) {
						// 给下载任务设置一个监听 并根据状态  做操作
						switch (task.state) {
							case 1:
								showLoading.setTitle("正在下载");
								break;
							case 2:
								showLoading.setTitle("已连接到服务器");
								break;
							case 3:
								prg = parseInt((parseFloat(task.downloadedSize) / parseFloat(task.totalSize)) * 100 );
								showLoading.setTitle("  正在下载" + prg + "%  ");
								break;
							case 4:
								plus.nativeUI.closeWaiting();
								//下载完成
								break;
						}
					});
				  } catch (err) {
					plus.nativeUI.closeWaiting();
					uni.showToast({
						title: '更新失败-03',
						mask: false,
						duration: 1500
					});
				}
			},	    
			//#endif  
		}           
		
	}
</script>

标签栏高度 底部安全距离

topSafe: 
uni.getSystemInfoSync().statusBarHeight;
var(--status-bar-height)
bottomSafe:
bottom: var(--window-bottom) ;
bottom: calc(var(--window-bottom) + 44px);

小程序版本号

const accountInfo = wx.getAccountInfoSync(); 

获取系统信息

uni.getSystemInfo({
	success(res) {
		console.log(res);
}
})

跳转应用市场及App Store
//这个是通用应用市场,如果想指定某个应用商店,需要单独查这个应用商店的包名或 scheme及参数

if (plus.os.name == "Android") {
    let appurl = "market://details?id=自己打包用的包名"; 
    plus.runtime.openURL(appurl);
}

//跳转到运用宝

 let appurl = "market://details?id=自己打包用的包名";
 plus.runtime.openURL(appurl,(err) =>{
	console.log('打开运用宝失败', err);
 },'com.tencent.android.qqdownloader');

//uni-app 中如何打开外部应用,如:浏览器、淘宝、AppStore、QQ等
打开第三方程序
调用外部浏览器打开指定的URL

plus.runtime.openURL( url, errorCB, identity );  

url: ( String ) 必选 要打开的URL地址字符串类型,各平台支持的地址类型存在差异,参考平台URL支持表。
errorCB: ( OpenErrorCallback ) 可选 打开URL地址失败的回调打开指定URL地址失败时回调,并返回失败信息。
identity: ( String ) 可选 指定打开URL地址的程序名称在iOS平台此参数被忽略,在Android平台为程序包名,如果指定的包名不存在,则打开URL地址失败。

<template>
		<view>
			<button class="button" type="primary" @click="open(0)">使用第三方程序打开指定URL</button>  
		</view>
	</template>
	
	<script>
		export default {
			data() {
				return {
					url: 'https://uniapp.dcloud.io/'  
				}
			},
			methods: {
				open(types) {  
					plus.runtime.openURL(this.url, function(res) {
						cosole.log(res);  
					});  
				}  
			}
		}
	</script>

调用第三方程序

plus.runtime.launchApplication( appInf, errorCB );  

appInf: ( ApplicationInf ) 必选 要启动第三方程序的描述信息
errorCB: ( LaunchErrorCallback ) 必选 启动第三方程序操作失败的回调函数启动第三方程序失败时回调,并返回失败信息。

<template>
		<view>
			 <button class="button" type="primary" @click="launchApp">打开淘宝</button>  
		</view>
	</template>
	<script>
		export default {
			data() {
				return {
					url: 'https://uniapp.dcloud.io/'  
				}
			},
			methods: {
				launchApp() {  
				    let _this = this;
				    // 判断平台
				    if (plus.os.name == 'Android') {  
				        plus.runtime.launchApplication(  
				            {  
				                pname: 'com.taobao.taobao'  
				            },  
				            function(e) {  
				                console.log('Open system default browser failed: ' + e.message);  
				            }  
				        );  
				    } else if (plus.os.name == 'iOS') {  
				        plus.runtime.launchApplication({ action: 'taobao://' }, function(e) {  
				            console.log('Open system default browser failed: ' + e.message);  
				        });  
				    }      
				    			
				}            
			}
		}
	</script>

更多实用例子

常用URLscheme
[
// 只在 ios 中生效
{
name: ‘App Store’,
scheme: ‘itms-apps://},
{
name: ‘支付宝’,
pname: ‘com.eg.android.AlipayGphone’,
scheme: ‘alipay://},
{
name: ‘淘宝’,
pname: ‘com.taobao.taobao’,
scheme: ‘taobao://},
{
name:QQ,
pname: ‘com.tencent.mobileqq’,
scheme: ‘mqq://},
{
name: ‘微信’,
pname: ‘com.tencent.mm’,
scheme: ‘weixin://},
{
name: ‘京东’,
pname: ‘com.jingdong.app.mall’,
scheme: ‘openApp.jdMobile://},
{
name: ‘新浪微博’,
pname: ‘com.sina.weibo’,
scheme: ‘sinaweibo://},
{
name: ‘优酷’,
pname: ‘com.youku.phone’,
scheme: ‘youku://}
]

除了简单的打开App,我们更多的时候想要直达。这里汇总了很多有用的直达案例:
使用应用商店打开指定App,可用于引导评分
强制使用应用宝打开指定App
打开淘宝搜索页面。需要你要做淘宝客,需要向淘宝申请自己的scheme参数并传入。
打开地图并指定地点
打开qq并到指定聊天界面,可用于客服具体代码见下:

<template>  
	    <view>  
	        <page-head title="通过scheme打开三方app示例"></page-head>  
	        <button class="button" @click="openBrowser('https://uniapp.dcloud.io/h5')">使用浏览器打开指定URL</button>  
	        <button class="button" @click="openMarket()">使用应用商店打开指定App</button>  
	        <button class="button" @click="openMarket('com.tencent.android.qqdownloader')">强制使用应用宝打开指定App</button>  
	        <button class="button" @click="openTaobao('taobao://s.taobao.com/search?q=uni-app')">打开淘宝搜索页面</button>  
	        <button class="button" @click="openMap()">打开地图并指定地点</button>  
	        <view class="uni-divider">  
	            <view class="uni-divider__content">打开QQ</view>  
	            <view class="uni-divider__line"></view>  
	        </view>  
	        <view class="uni-padding-wrap">  
	            <form @submit="openQQ">  
	                <view>  
	                    <view class="uni-title">请输入聊天对象QQ号:</view>  
	                    <view class="uni-list">  
	                        <view class="uni-list-cell">  
	                            <input class="uni-input" name="qqNum" type="number"/>  
	                        </view>  
	                    </view>  
	                </view>  
	                <view>  
	                    <view class="uni-title">请选择QQ号类型:</view>  
	                    <radio-group class="uni-flex" name="qqNumType">  
	                        <label>  
	                            <radio value="wpa" checked=""/>普通QQ</label>  
	                        <label>  
	                            <radio value="crm" />营销QQ(无需加好友直接聊天)</label>  
	                    </radio-group>  
	                </view>  
	                <view class="uni-btn-v uni-common-mt">  
	                    <button class="button" formType="submit">打开qq并到指定聊天界面</button>  
	                </view>  
	            </form>  
	        </view>  
	    </view>  </template>  
	<script>  export default {  
	    data() {  
	        return {  
	
	        };  
	    },  
	    methods: {  
	        openBrowser(url){  
	            plus.runtime.openURL(url)  
	        },  
	        openMarket(marketPackageName) {  
	            var appurl;  
	            if (plus.os.name=="Android") {  
	                appurl = "market://details?id=io.dcloud.HelloH5"; //由于hello uni-app没有上Android应用商店,所以此处打开了另一个示例应用  
	            }  
	            else{  
	                appurl = "itms-apps://itunes.apple.com/cn/app/hello-uni-app/id1417078253?mt=8";  
	            }  
	            if (typeof(marketPackageName)=="undefined") {  
	                plus.runtime.openURL(appurl, function(res) {  
	                    console.log(res);  
	                });  
	            } else{//强制指定某个Android应用市场的包名,通过这个包名启动指定app  
	                if (plus.os.name=="Android") {  
	                    plus.runtime.openURL(appurl, function(res) {  
	                        plus.nativeUI.alert("本机没有安装应用宝");  
	                    },marketPackageName);  
	                } else{  
	                    plus.nativeUI.alert("仅Android手机才支持应用宝");  
	                }  
	            }  
	        },  
	        openTaobao(url){  
	            plus.runtime.openURL(url, function(res) {  
	                uni.showModal({  
	                    content:"本机未检测到淘宝客户端,是否打开浏览器访问淘宝?",  
	                    success:function(res){  
	                        if (res.confirm) {  
	                            plus.runtime.openURL("https://s.taobao.com/search?q=uni-app")  
	                        }  
	                    }  
	                })  
	            });  
	        },  
	        openMap(){  
	            var url = "";  
	            if (plus.os.name=="Android") {  
	                var hasBaiduMap = plus.runtime.isApplicationExist({pname:'com.baidu.BaiduMap',action:'baidumap://'});  
	                var hasAmap = plus.runtime.isApplicationExist({pname:'com.autonavi.minimap',action:'androidamap://'});  
	                var urlBaiduMap = "baidumap://map/marker?location=39.968789,116.347247&title=DCloud&src=Hello%20uni-app";  
	                var urlAmap = "androidamap://viewMap?sourceApplication=Hello%20uni-app&poiname=DCloud&lat=39.9631018208&lon=116.3406135236&dev=0"  
	                if (hasAmap && hasBaiduMap) {  
	                    plus.nativeUI.actionSheet({title:"选择地图应用",cancel:"取消",buttons:[{title:"百度地图"},{title:"高德地图"}]}, function(e){  
	                        switch (e.index){  
	                            case 1:  
	                                plus.runtime.openURL(urlBaiduMap);  
	                                break;  
	                            case 2:  
	                                plus.runtime.openURL(urlAmap);  
	                                break;  
	                        }  
	                    })  
	                }  
	                else if (hasAmap) {  
	                    plus.runtime.openURL(urlAmap);  
	                }  
	                else if (hasBaiduMap) {  
	                    plus.runtime.openURL(urlBaiduMap);  
	                }  
	                else{  
	                    url = "geo:39.96310,116.340698?q=%e6%95%b0%e5%ad%97%e5%a4%a9%e5%a0%82";  
	                    plus.runtime.openURL(url); //如果是国外应用,应该优先使用这个,会启动google地图。这个接口不能统一坐标系,进入百度地图时会有偏差  
	                }  
	            } else{  
	                // iOS上获取本机是否安装了百度高德地图,需要在manifest里配置,在manifest.json文件app-plus->distribute->apple->urlschemewhitelist节点下添加(如urlschemewhitelist:["iosamap","baidumap"])  
	                plus.nativeUI.actionSheet({title:"选择地图应用",cancel:"取消",buttons:[{title:"Apple地图"},{title:"百度地图"},{title:"高德地图"}]}, function(e){  
	                    console.log("e.index: " + e.index);  
	                    switch (e.index){  
	                        case 1:  
	                            url = "http://maps.apple.com/?q=%e6%95%b0%e5%ad%97%e5%a4%a9%e5%a0%82&ll=39.96310,116.340698&spn=0.008766,0.019441";  
	                            break;  
	                        case 2:  
	                            url = "baidumap://map/marker?location=39.968789,116.347247&title=DCloud&src=Hello%20uni-app";  
	                            break;  
	                        case 3:  
	                            url = "iosamap://viewMap?sourceApplication=Hello%20uni-app&poiname=DCloud&lat=39.9631018208&lon=116.3406135236&dev=0";  
	                            break;  
	                        default:  
	                            break;  
	                    }  
	                    if (url!="") {  
	                        plus.runtime.openURL( url, function( e ) {  
	                            plus.nativeUI.alert("本机未安装指定的地图应用");  
	                        });  
	                    }  
	                })  
	            }  
	        },  
	        openQQ: function (e) {  
	            // console.log("e.detail.value: " + JSON.stringify(e.detail.value));  
	            // 没有校验qq号是否为空或合法数字,如果不是可用的qq号,启动qq后会停留在qq主界面  
	            plus.runtime.openURL('mqqwpa://im/chat?chat_type=' + e.detail.value.qqNumType + '&uin=' + e.detail.value.qqNum,function (res) {  
	                plus.nativeUI.alert("本机没有安装QQ,无法启动");  
	            });  
	        }  
	    }  
	};  
	</script>  
	<style>  
		.button {  
		    margin: 30upx;  
		    color: #007AFF;  
		}  
	</style>  

给自己的App设置scheme
可在manifest中可配置。Android配置方法iOS配置方法
uni-app跳转ios app store

plus.runtime.launchApplication({
    action: 'https://itunes.apple.com/cn/app/xxx-xxx-xx-xx/idxxxxxxxxxx?mt=8'
//地址:action: `itms-apps://itunes.apple.com/cn/app/id${appleId}?mt=8`
//地址:https://apps.apple.com/cn/app/%E6%9C%9B%E6%B5%B7%E4%BA%BA/id1514736394
}, function(e) {
    console.log('Open system default browser failed: ' + e.message);
  });

uni-app 全局变量实现的4种方式
公共模块
定义一个专用的模块,用来组织和管理这些全局的变量,在需要的页面引入。
注意:这种方式只支持多个vue页面或多个nvue页面之间公用,vue和nvue之间不公用。

在根目录下创建common目录,在创建xx.js定义公用方法:

const websiteUrl = 'http://www.javanx.cn';  
const now = Date.now || function () {  
  return new Date().getTime();  
};  
const isArray = Array.isArray || function (obj) {  
  return obj instanceof Array;  
};  
export default {  
  websiteUrl,  
  now,  
  isArray  
}

接下来在 pages/index/index.vue 中引用该模块

<script>
 import helper from '/common/base.js'; 

export default { 
data() { 
return {}; 
}, 
onLoad(){ 
console.log('now:' + helper.now()); 
}, 
methods: { } 
}
 </script> 

这种方式维护起来比较方便,但是缺点就是每次都需要引入。
二. 挂载 Vue.prototype
将一些使用频率较高的常量或者方法,直接扩展到 Vue.prototype 上,每个 Vue 对象都会“继承”下来。
注意这种方式只支持多个vue页面或多个nvue页面之间公用,vue和nvue之间不公用。
在 main.js 中挂载属性/方法

Vue.prototype.websiteUrl = 'http://www.javanx.cn';  
Vue.prototype.now = Date.now || function () {  
  return new Date().getTime();  
};  
Vue.prototype.isArray = Array.isArray || function (obj) {  
  return obj instanceof Array;  
}; 

然后在 pages/index/index.vue 中调用

<script>  
export default {  
  	data() {  
    		return {};  
  	},  
  	onLoad(){  
    	console.log('now:' + this.now());  
  	},  
  	methods: {  
  	}  
}  
</script>  

这种方式,只需要在 main.js 中定义好即可在每个页面中直接调用。
注意:1、每个页面中不要在出现重复的属性或方法名。
2、建议在 Vue.prototype 上挂载的属性或方法,可以加一个统一的前缀。比如 $url、global_url 这样,在阅读代码时也容易与当前页面的内容区分开。

三.globalData
小程序中可以在 App 上声明全局变量,但在 Vue 中没有,uni-app 中在 App.vue 可以定义在 globalData 属性上,也可以使用 API 读写这个值。
这个方式支持vue和nvue共享数据。是目前nvue和vue共享数据的一种比较好的方式。
定义:App.vue

<script>  
export default {  
  	globalData: {  
    		text: 'text'  
  	},  
  	onLaunch: function() {  
    		console.log('App Launch')  
  	},  
  	onShow: function() {  
    		console.log('App Show')  
 	},  
  	onHide: function() {  
    		console.log('App Hide')  
  	}  
}  
</script>  
<style>  

/*每个页面公共css */

js中操作globalData的方式如下:
赋值:
getApp().globalData.text = ‘test’
取值:
console.log(getApp().globalData.text)// test

如果需要把globalData的数据绑定到页面上,可在页面的onshow声明周期里进行变量重赋值。HBuilderX 2.0.3起,nvue页面在uni-app编译模式下,也支持onshow。

四.Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
注意这种方式只支持多个vue页面或多个nvue页面之间公用,vue和nvue之间不公用。
这里以登录后同步更新用户信息为例,简单说明下 Vuex 的用法,更多更详细的 Vuex 的内容,建议前往其官网 Vuex 学习下。
在 uni-app 项目根目录下新建 store 目录,在 store 目录下创建 index.js 定义状态值

const store = new Vuex.Store({  
  state: {  
    login: false,  
    token: '',  
    avatarUrl: '',  
    userName: ''  
  },  
  mutations: {  
    login(state, provider) {  
      console.log(state)  
      console.log(provider)  
      state.login = true;  
      state.token = provider.token;  
      state.userName = provider.userName;  
      state.avatarUrl = provider.avatarUrl;  
    },  
    logout(state) {  
      state.login = false;  
      state.token = '';  
      state.userName = '';  
      state.avatarUrl = '';  
    }  
  }  }) 

然后,需要在 main.js 挂载 Vuex

import store from './store'  
Vue.prototype.$store = store  
最后,在 pages/index/index.vue 使用
<script>  
import {  
  mapState,  
  mapMutations  } from 'vuex';  
export default {  
  	computed: {  
    		...mapState(['avatarUrl', 'login', 'userName'])  
  	},  
  	methods: {  
    		...mapMutations(['logout'])  
  	}  
}  
</script>  

详细示例,请下载附件,在 HBuilderX 中运行。
示例操作步骤:未登录时,提示去登录。跳转至登录页后,点击“登录”获取用户信息,同步更新状态后,返回到个人中心即可看到信息同步的结果。
注意:对比前面的方式,该方式更加适合处理全局的并且值会发生变化的情况。

1、.vue 和 .nvue 并不是一个规范,因此一些在 .vue 中适用的方案并不适用于 .nvue。
2、Vue 上挂载属性,不能在 .nvue 中使用。
3、.nvue 不支持 vuex
4、如果希望 .vue 和 .nvue 复用一些方法的话,需要采用公用模块的方案,分别在 .vue 和 .nvue 文件中引入。

定时器使用和清除
定义一个timer

data() {
	return {
	timer: null
	}
}

设置定时器

this.timer = setTimeout( () => {
//添加处理逻辑

}, duration*1000) 

this.timer = setInterval( () => {
//添加处理逻辑

}, 1000)

清除定时器 这里需要注意的是我们页面中使用了定时器,在离开这个页面的时候一定要记得清除,避免出现bug。

onUnload() {
	if (this.timer) {
	clearTimeout(this.timer);
	this.timer = null;
	}
}
tabbar页面用onHide
onOnHide() {
	if (this.timer) {
	clearTimeout(this.timer);
	this.timer = null;
	}
}

去掉导航栏
page.json中

所有页面去掉:

"globalStyle": {
	"navigationBarTextStyle": "white",
	"navigationBarTitleText": "uni-app",
	"navigationBarBackgroundColor": "#007AFF",
	"backgroundColor": "#F8F8F8""navigationStyle":"custom",	
	"app-plus":{		
		"titleView":false	
		}
	},

单一页面去掉:

{
	"path" : "pages/loginView/messageView",
	"style" : {
		"navigationBarTitleText": "短信登录",
		"enablePullDownRefresh": false,
		"navigationStyle":"custom",  
		"app-plus": { 
			"titleNView":  false   
		}
	}
}

uni-app如何引入Echarts
通过uni-app官网直接安装echarts插件生成echarts项目模板;
创建一个新的hello uni-app项目模板;
把echarts放到components中。
引入echarts

<template>
		<view class="container">
			<view>
				<view class="canvasView">
					<mpvue-echarts class="ec-canvas" @onInit="lineInit" canvasId="line" ref="lineChart" />
				</view>
			</view>
		</view>
	</template>
	
	<script>
		// import * as echarts from '@/components/echarts/echarts.simple.min.js';
		    // import mpvueEcharts from '@/components/mpvue-echarts/src/echarts.vue';
		import * as echarts from '../echarts/echarts.simple.min.js'
		import mpvueEcharts from '../mpvue-echarts/src/echarts.vue'
		
		export default {
			data() {
				return {
					updateStatus: false,
					line: {
						legend: {
							data: ['邮件营销'],
						},
						xAxis: {
							type: 'category',
							data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					    },
						yAxis: {
							type: 'value',
							data: [],
						},
						dataZoom: [{            
							type: 'slider',                        
							start: 30,                        
							end: 100,                        
							zoomLock: false,                    
						}],
						grid: {
							left: 40,
							right: 40,
							bottom: 20,
							top: 40,
							containLabel: true,
						},
						series: [{                        
							data: [],
							data: [820, 932, 901, 934, 1290, 1330, 1320],
							type: 'line',
							color: ['#5eb4e2'], //折线条的颜色
						}]
					}
				}
			},
			methods: {
				lineInit(e) {
					let {
						width,
						height
						} = e;
						let canvas = this.$refs.lineChart.canvas
						echarts.setCanvasCreator(() => canvas);
				        let lineChart = echarts.init(canvas, null, {
							width: width,
							height: height,
						})
						canvas.setChart(lineChart)
						lineChart.setOption(this.line)
						this.$refs.lineChart.setChart(lineChart)
				      },
			},
			components: {
				mpvueEcharts
			 }
		}
	</script>
	
	<style>
		.ec-canvas {
	        display: flex;
	        height: 100%;
	        flex: 1;
	    }
	  
	    .canvasView {
	        width: 700upx;
	        height: 500upx;
	    }
	</style>

自定义组件和组件间的消息传递
自定义组件前,需要在项目目录中创建components目录,右键components目录选择新建组件,在创建组件时可以选择模板,也可以点击右上角自定义模板,在弹出的目录中创建模板名.txt,里边写入模板内容即可,例如创建带有属性的模板.txt如下:

<template name="组件名称">
		<text style="text-decoration:underline" :href="href" @click="openURL" :inWhiteList="inWhiteList">{{text}}</text>
	</template>
	
	<script>
		/**
		 * @description u-link是一个外部网页超链接组件,在小程序内打开内部web-view组件或复制url,在app内打开外部浏览器,在h5端打开新网页
		 * @property {String} href 点击后打开的外部网页url,小程序中必须以https://开头
		 * @property {String} text 显示的文字
		 * @property {Boolean} inWhiteList 是否在小程序白名单中,如果在的话,在小程序端会直接打开内置web-view,否则会只会复制url,提示在外部打开
		 * @example * 
		 */
		export default {
			name: 'u-link',  //"组件名称"
	//属性
			props: {
				href: {// 属性名称
					type: String, //属性类型
					default: ''
				},
				text: {
					type: String,
					default: ''
				},
				inWhiteList: {
					type: Boolean,
					default: false
				}
			},
			methods: {
				openURL() {
					// #ifdef APP-PLUS
					plus.runtime.openURL(this.href) //这里默认使用外部浏览器打开而不是内部web-view组件打开
					// #endif
					// #ifdef H5
					window.open(this.href)
					// #endif
					// #ifdef MP
					if (this.inWhiteList) { //如果在小程序的网址白名单中,会走内置webview打开,否则会复制网址提示在外部浏览器打开
						uni.navigateTo({
							url: '/pages/component/web-view/web-view?url=' + this.href
						});
					} else {
						uni.setClipboardData({
							data: this.href
						});
						uni.showModal({
							content: '本网址无法直接在小程序内打开。已自动复制网址,请在手机浏览器里粘贴该网址',
							showCancel: false
						});
					}
					// #endif
				}
			}
		}
	</script>
	
	<style>
	
	</style>

在需要使用自定义组件的页面中,先导入自定义组件,如下:

import u-link from '../../components/u-link.vue';

再在当前页面注册该组件,如下:
components: {    u-link}
最后使用即可,如index.vue如下:

<template>
	<view>
		<u-link class="hello-link" :href="'https://uniapp.dcloud.io/api/'" :text="'https://uniapp.dcloud.io/api/'"
	                    :inWhiteList="true"></u-link>
	</view>
	</template>
	<script>
	//import u-link from '../../components/u-link.vue';
	export default {
	data() {
	return {
	
	}
	},
	
	onLoad() {
	
	},
	onShow() {
	
	},
	onHide() {
	
	},
	 methods: {
	
	}
	}
	</script>
	<style>
	</style>

你可能感兴趣的:(uni-app)