一. 单位
1. 换算规则：
1 px = 2 rpx1 px = 0.75 pt = 3 / 4 pt1 pt = 1.33 px = 4 / 3 px = 8 / 3 rpx1 em = 16 px1 em = 12 pt1px = 1pt * 图像分辨率/721. 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().statusBarHeightvar(--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的versionlet 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-PLUScheckUpdate(){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.canvasecharts.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-PLUSplus.runtime.openURL(this.href) //这里默认使用外部浏览器打开而不是内部web-view组件打开// #endif// #ifdef H5window.open(this.href)// #endif// #ifdef MPif (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>
