uniapp 相关知识点总结整理
2023-12-28 21:56:31
一. 单位
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特点：
IE无法调整那些使用px作为单位的字体大小；
国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
em (相对长度单位，相对于当前对象内文本的字体尺寸)：是一个相对长度单位，最初是指字母M的宽度，故名em。现指的是字符宽度的倍数，用法类似百分比，如：0.8em, 1.2em,2em等。通常1em=16px。
EM特点
em的值并不是固定的；
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作为单位就行了。
所以我们在写CSS的时候，需要注意：
body选择器中声明Font-size=62.5%。
将你的原来的px数值除以10，然后换上em作为单位。
重新计算那些被放大的字体的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 * <u-link href="https://ext.dcloud.net.cn" text="https://ext.dcloud.net.cn" :inWhiteList="true"></u-link>
*/
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>
文章来源:https://blog.csdn.net/Quentin0823/article/details/135276727
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！