如何高效的翻阅uni,app的适配详细解释_javascript才具_脚本之家金沙8331网址:

引言:此方式可用作超越二分一Wechat小程序帮衬,但uni-app文档中却找不到相关表明的API

时间: 2019-10-23阅读: 88标签: uni

需求

uni-app的框架,配置:page.json,manifest.json,package.json,vue.config.js。脚本,应用程序,main.js。日志打字与印刷,电磁打点计时器,生命周期,页面,页面通信。

内需在Wechat小程序中,完结一在这之中档Logo优异呈现的异形导航栏。

pages.json文件时用来对uni-app实行全局配置的,它是用来写页面文件的门径,窗口样式,尾部的tabbar等,雷同于小程序中的app.json的页面管理。这里注意的是一直,在小程序中是在app.json的,而在uni-app英式在manifest配置的,这点是自身做地图时介意到的剧情。

完成方式设计

pages.json:

要做这种异形的导航栏,用直接在铺排文件之中写list的法子断定做不到。那么,就有以下三种可代表方式。

{ "pages": [{ "path": "pages/component/index", "style": { "navigationBarTitleText": "组件" } }, { "path": "pages/API/index", "style": { "navigationBarTitleText": "接口" } }, { "path": "pages/component/view/index", "style": { "navigationBarTitleText": "view" } }], "condition": { //模式配置,仅开发期间生效 "current": 0, //当前激活的模式(list 的索引项) "list": [{ "name": "test", //模式名称 "path": "pages/component/view/index" //启动页面,必选 }] }, "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "演示", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8", "usingComponents":{ "collapse-tree-item":"/components/collapse-tree-item" } }, "tabBar": { "color": "#7A7E83", "selectedColor": "#3cc51f", "borderStyle": "black", "backgroundColor": "#ffffff", "height": "50px", "fontSize": "10px", "iconWidth": "24px", "spacing": "3px", "blurEffect": "none|extralight|light|dark", // 模糊效果,使用模糊效果时不要设置背景颜色,否则模糊效果会失效,默认值为none(仅iOS平台支持 HBuilderX 2.4.3+) "list": [{ "pagePath": "pages/component/index", "iconPath": "static/image/icon_component.png", "selectedIconPath": "static/image/icon_component_HL.png", "text": "组件" }, { "pagePath": "pages/API/index", "iconPath": "static/image/icon_API.png", "selectedIconPath": "static/image/icon_API_HL.png", "text": "接口" }], "midButton": { "width": "80px", "height": "50px", "text": "文字", "iconPath": "static/image/midButton_iconPath.png", "iconWidth": "24px", "backgroundImage": "static/image/midButton_backgroundImage.png" } }}

在每三个页面都加载贰个tabBar组件,与页面同期渲染。
设置自定义tabBar,更改tabBar的体裁。

globalStyle,设置使用的状态栏,导航条,标题,窗口背景颜色等。

利弊解析:方法1落到实处起来略为轻便,可是会身不由己代码可重用率低,降低质量,已经分界面跳动等主题材料。方法2则是Wechat官方提供的,自定义形式,相信在品质方面也许有相当的大的优势。故选取方法2。

pages,配置页面路线。第一项为使用入口,扩充或许减弱页面,都在pages数组中开展校正就可以。

1. 翻看文书档案及法定德姆o

┌─pages │ ├─index│ │ └─index.vue │ └─login│ └─login.vue ├─static ├─main.js ├─App.vue ├─manifest.json └─pages.json

{ "pages": [ { "path": "pages/index/index", "style": { ... } }, { "path": "pages/login/login", "style": { ... } } ]}

大约描述一下正是索要在根目录中步向叁个custom-tab-bar目录,里面包车型大巴文本结构与自定义组件的组织相仿。然后再在小程序配置文件中期维纠正tabbar为custom格局。

page页面

custom-tab-bar目录

{ "pages": [{ "path": "pages/index/index", "style": { "navigationBarTitleText": "首页",//设置页面标题文字 "enablePullDownRefresh":true//开启下拉刷新 } }, ... ]}

金沙8331网址,页面生命周期中的设置索引方法

布衣蔬食titleNView配置代码示例

这段代码其实比较轻易精通,pageLifetimes就是监听组件所在页面包车型客车生命周期。上述代码正是监听页面展现。当页面彰显后,获取到tabBar的对象,然后再设置tabBar中的index索引。

{ "pages": [{ "path": "pages/index/index", //首页 "style": { "app-plus": { "titleNView": false //禁用原生导航栏 } } }, { "path": "pages/log/log", //日志页面 "style": { "app-plus": { "bounce": "none", //关闭窗口回弹效果 "titleNView": { "buttons": [ //原生标题栏按钮配置, { "text": "分享" //原生标题栏增加分享按钮,点击事件可通过页面的 onNavigationBarButtonTap 函数进行监听 } ] } } } }, { "path": "pages/detail/detail", //详情页面 "style": { "navigationBarTitleText": "详情", "app-plus": { "titleNView": { "type": "transparent"//透明渐变导航栏 } } } }, { "path": "pages/search/search", //搜索页面 "style": { "app-plus": { "titleNView": { "type": "transparent",//透明渐变导航栏 "searchInput": { "backgroundColor": "#fff", "borderRadius": "6px", //输入框圆角 "placeholder": "请输入搜索内容", "disabled": true //disable时点击输入框不置焦,可以跳到新页面搜索 } } } } } ... ]}

2. 迁移到uni-app框架

app-plus,h5,mp-alipay

上边包车型大巴格局是应用Wechat小程序的开拓格局,而本身使用的是uni-app框架开拓微信小程序的。所以大家供给把它们移植到uni-app框架内。

{ "pages": [{ "path": "pages/index/index", //首页 "style": { "app-plus": { "titleNView": false , //禁用原生导航栏 "subNVues":[{//侧滑菜单 "id": "drawer", //subNVue 的 id,可通过 uni.getSubNVueById('drawer') 获取 "path": "pages/index/drawer.nvue", // nvue 路径 "style": { //webview style 子集,文档可暂时开放出来位置,大小相关配置 "position": "popup", //除 popup 外,其他值域参考 5+ webview position 文档 "width": "50%" } }, {//弹出层 "id": "popup", "path": "pages/index/popup", "style": { "position": "popup", "margin":"auto", "width": "150px", "height": "150px" } }, {//自定义头 "id": "nav", "path": "pages/index/nav", "style": { "position": "dock", "height": "44px" } }] } } }]}

uni-app中,page.json被编写翻译为Wechat小程序的app.json。所以,大家平昔退换page.json

h5:

custom-tab-bar目录的适配

titleNView,导航栏

我们通晓,uni-app使用的是类Vue开荒,将三个Vue文件编写翻译为多个Wechat页面文件。那么,是或不是足以平昔写四个custom-tab-bar.vue的公文呢?刚开头动和自动己也是那样想的,后来察觉uni-app只会编译page目录和component目录下的vue文件。而Wechat小程序要求custom-tab-bar非得在项目标根目录下。那么就只万幸uni-app下创办八个custom-tab-bar目录,并赤诚写Wechat四件套了。

pullToRefresh,下拉刷新

写完后,uni-app会将该目录完美的复制至Wechat小程序项目标根目录。

tabBar,通过tabBar配置项钦命tab栏的显现,以致tab切换时显得的附和项。

tab页面内的适配方法

当设置position为top时,将不会显得icon,tabBar中的list时三个数组,起码配置2个,最多配备5个。

如何高效的翻阅uni,app的适配详细解释_javascript才具_脚本之家金沙8331网址:。其一在自己实在付出中,是最令自身看不惯的了。因为Wechat小程序的this引用与uni-app的this引用并不近似。所以一旦直白复制代码是会编写翻译出错的。而另二个主题素材则是,uni-app并未有提供pageLifetimes的事件监听。

tabbar切换第二次加载时可能渲染比不上时,能够在各种tabbar页面的onLoad生命周期里先弹出三个等候的雪片。当突显过三次tabbar页面包车型地铁时候,再度切换tabbar页面包车型大巴时候,就只会触发onShow那个艺术,不会触发onLoad了。

在自家经过一番招来之后,开采将安装索引方法写在onShow事件里面,效果是千人一面的。接下来便只剩余this的主题素材了。

"tabBar": { "color": "#7A7E83", "selectedColor": "#3cc51f", "borderStyle": "black", "backgroundColor": "#ffffff", "list": [{ "pagePath": "pages/component/index", "iconPath": "static/image/icon_component.png", "selectedIconPath": "static/image/icon_component_HL.png", "text": "组件" }, { "pagePath": "pages/API/index", "iconPath": "static/image/icon_API.png", "selectedIconPath": "static/image/icon_API_HL.png", "text": "接口" }]}

假使一直复制的话,会现出无此外成效的情况

condition运营情势配置,开垦时期有效。属性:current仅仅在这个时候此刻激活的情势有效,list节点的索引值,list运行格局列表。

因为uni-app的this援用分裂,所以它在认清getTabBar的时候,获取的是“undefined”所以不会实践上面的操作。若是你将判定去掉,则会直接报“undefined”错误。

"condition": { //模式配置,仅开发期间生效 "current": 0, //当前激活的模式(list 的索引项) "list": [{ "name": "swiper", //模式名称 "path": "pages/component/swiper/swiper", //启动页面,必选 "query": "interval=4000autoplay=false" //启动参数,在页面的onLoad函数里面得到。 }, { "name": "test", "path": "pages/component/switch/switch" } ]}

难道完成持续?其实不然,万变不离其宗。uni-app也是编写翻译到小程序的,所以相对有案可查。

subPackages分包加载配置,但在5+app中为整包。subPackages节点接受贰个数组,每一个项都以选择的子包。

咱们率先探望uni-app里面this的内容。

┌─pages │ ├─index│ │ └─index.vue │ └─login│ └─login.vue ├─pagesA │ └─list│ └─list.vue ├─pagesB │ └─detail│ └─detail.vue ├─static ├─main.js ├─App.vue ├─manifest.json └─pages.json 

{ "pages": [{ "path": "pages/index/index", "style": { ...} }, { "path": "pages/login/login", "style": { ...} }], "subPackages": [{ "root": "pagesA", "pages": [{ "path": "list/list", "style": { ...} }] }, { "root": "pagesB", "pages": [{ "path": "detail/detail", "style": { ...} }] }], "preloadRule": { "pagesA/list/list": { "network": "all", "packages": ["__APP__"] }, "pagesB/detail/detail": { "network": "all", "packages": ["pagesA"] } }}

大家能够很显然的见到当中有个$mp的对象,表达那应该是微信小程序专项使用的目的。接下来大家三番陆回深入分析$mp

preloadRule分包预载配置,key页面包车型客车路线,value是跻身页面包车型大巴预下载配置。

这其间有二个潜伏很深的getTabBar格局,大家一向调用它,和在Wechat小程序里面调用this.getTabBar是同一的。

manifest.json文件时利用的安顿文件,应用的称谓,Logo,权限等等。

就此我们即可把onShow其间的剧情写成那样。

networkTimeout各种互连网央求的逾期时间。

部分温婉点的包裹

package.json文件为uni-app的扩充节点,能够实现自定义的编译平台。

设置索引方法独立出来

{ /** package.json其它原有配置 */ "uni-app": {// 扩展配置 "scripts": { "custom-platform": { //自定义编译平台配置,可通过cli方式调用 "title":"自定义扩展名称", // 在HBuilderX中会显示在 运行/发行 菜单中 "BROWSER":"", //运行到的目标浏览器,仅当UNI_PLATFORM为h5时有效 "env": {//环境变量 "UNI_PLATFORM": "" //基准平台 }, "define": { //自定义条件编译 "CUSTOM-CONST": true //自定义条件编译常量,建议为大写 } } } }}

在methods对象中,添加

vue.config.js是四个可选的陈设文件

setTabBarIndex{ if (typeof this.$mp.page.getTabBar === 'function' && this.$mp.page.getTabBar { this.$mp.page.getTabBar().setData } }

uni.css文件为大局应用的体裁风格。使用时索要在style节点上增添lang=”scss”。

动用mixin制止重复书写复制

style lang="scss"/style

main.js中,添加

uni.scss变量:

Vue.mixin({ methods:{ setTabBarIndex{ if (typeof this.$mp.page.getTabBar === 'function' && this.$mp.page.getTabBar { this.$mp.page.getTabBar().setData } } }})
/* 颜色变量 *//* 行为相关颜色 */$uni-color-primary: #007aff;$uni-color-success: #4cd964;$uni-color-warning: #f0ad4e;$uni-color-error: #dd524d;/* 文字基本颜色 */$uni-text-color:#333;//基本色$uni-text-color-inverse:#fff;//反色$uni-text-color-grey:#999;//辅助灰色,如加载更多的提示信息$uni-text-color-placeholder: #808080;$uni-text-color-disable:#c0c0c0;/* 背景颜色 */$uni-bg-color:#ffffff;$uni-bg-color-grey:#f8f8f8;$uni-bg-color-hover:#f1f1f1;//点击状态颜色$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色/* 边框颜色 */$uni-border-color:#c8c7cc;/* 尺寸变量 *//* 文字尺寸 */$uni-font-size-sm:24rpx;$uni-font-size-base:28rpx;$uni-font-size-lg:32rpx;/* 图片尺寸 */$uni-img-size-sm:40rpx;$uni-img-size-base:52rpx;$uni-img-size-lg:80rpx;/* Border Radius */$uni-border-radius-sm: 4rpx;$uni-border-radius-base: 6rpx;$uni-border-radius-lg: 12rpx;$uni-border-radius-circle: 50%;/* 水平间距 */$uni-spacing-row-sm: 10px;$uni-spacing-row-base: 20rpx;$uni-spacing-row-lg: 30rpx;/* 垂直间距 */$uni-spacing-col-sm: 8rpx;$uni-spacing-col-base: 16rpx;$uni-spacing-col-lg: 24rpx;/* 透明度 */$uni-opacity-disabled: 0.3; // 组件禁用态的透明度/* 文章场景相关 */$uni-color-title: #2C405A; // 文章标题颜色$uni-font-size-title:40rpx;$uni-color-subtitle: #555555; // 二级标题颜色$uni-font-size-subtitle:36rpx;$uni-color-paragraph: #3F536E; // 文章段落颜色$uni-font-size-paragraph:30rpx;

混迹后的应用

app.vue时我们页面包车型客车入口文件。

onShow() { this.setTabBarIndex //index为当前tab的索引 }

行使的生命周期:

以上正是本文的全部内容,希望对大家的上学抱有助于,也意在大家多都赐教脚本之家。

onLaunch:当uni-app发轫化完毕时接触,全局只触发三遍;onShow:当uni-app运营,恐怕从后台步向前台展现时接触;onHide:当uni-app早先台进入到后台时接触;onError:当uni-app报错开上下班时间触发;onUniNViewMessage:对nvue页面发送的数目开展监听。

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

globalData时小程序的体制,在uni-app也是可用。

App.vue配置:

script export default { globalData: { text: 'text' } } /script

获取:

getApp().globalData.text = 'test'

用getApp对象还从未拿走到,能够用

this.$scope.globalData获取globalData

main.js时输入文件,时开头化vue实例并动用须求的插件。

import Vue from 'vue'import App from './App'import pageHead from './components/page-head.vue' //引用page-head组件Vue.config.productionTip = falseVue.component('page-head', pageHead) //全局注册page-head组件App.mpType = 'app'const app = new Vue({ ...App})app.$mount() //挂载Vue实例

打字与印刷日志:console向调节台打字与印刷日志消息,debug向调控台打字与印刷debug日志,log向调控台打字与印刷log日志,info,warn,error分别向调控台打印,info,warn,error日志。

setTimeout沙漏,届时间后实行,clear提姆eout废除setTimeout设置的定时器,setInterval(卡塔尔设置一个计时器,clearInterval(State of Qatar废除由setInterval设置的电火花计时器。

运用的生命周期:

onLaunch当uni-app 开端化完结时接触,全局只触发一回

onShow当 uni-app 运转,或从后台步入前台展现

onHide当 uni-app 在此之前台步入后台

onError当 uni-app 报错开上下班时间触发

onUniNViewMessage对 nvue 页面发送的多少开展监听

script // 只能在App.vue里监听应用的生命周期 export default { onLaunch: function() { console.log('App Launch') }, onShow: function() { console.log('App Show') }, onHide: function() { console.log('App Hide') } }/script

页不熟悉命周期

onLoad 监听页面加载

onShow 监听页面展现

onReady 监听页面初次渲染达成

onHide 监听页面遮掩

onUnload 监听页面卸载

onResize 监听窗口尺寸变化

onPullDownRefresh 监听客户下带动作

onReachBottom 页面滚动到底层的事件

onTabItemTap 点击 tab 时触发,参数为Object

onShareAppMessage客商点击右上角分享

onPageScroll 监听页面滚动

onNavigationBarButtonTap 监听原生标题栏按键点击事件

onBackPress 监听页面再次回到

onNavigationBarSearchInputChanged
监听原生标题栏寻找输入框输入内容改换事件

onNavigationBarSearchInputConfirmed
监听原生标题栏搜索输入框搜索事件,顾客点击软键盘上的“找寻”按键时接触

onNavigationBarSearchInputClicked 监听原生题目栏找寻输入框点击事件

组件生命周期

uni-app 组件援救的生命周期,与vue规范组件的生命周期相通。

beforeCreate 在实例开端化之后被调用 created 在实例创制完毕后被立刻调用

beforeMount 在挂载发轫从前被调用 mounted 挂载到实例上去之后调用

beforeUpdate 数据更新时调用 updated

beforeDestroy 实例销毁以前调用 destroyed 实例销毁后调用

getApp(卡塔尔 函数用于获取当前使用实例

const app = getApp() console.log(app.globalData)

getCurrentPages(State of Qatar 函数用于获取当前页面栈的实例

navigateTo, redirectTo 只好张开非 tabBar 页面。

switchTab 只可以张开 tabBar 页面。

reLaunch 能够张开放肆页面。

getCurrentPages()

获取的页面里停放了二个情势 $getAppWebview(卡塔尔国能够取得当前webview的对象实例

getCurrentPages()

能够获取全体页面前遇到象,然后依据数组,可以取钦定的页面webview对象

uni.$emit

接触全局的自定事件

uni.$on

监听全局的自定义事件

uni.$once

监听全局的自定义事件,事件可以由 uni.$emit 触发,不过只触发三次

uni.$off移除全局自定义事件监听器

uni.$emit('update',{msg:'页面更新'})

uni.$on('update',function(data){ console.log('监听到事件来自 update ,携带参数 msg 为:' + data.msg);})

uni.$once('update',function(data){ console.log('监听到事件来自 update ,携带参数 msg 为:' + data.msg);})

❤️ 不要遗忘留下你学习的足迹 [点赞 收藏 评论] 作者Info:

【作者】:Jeskson

【原创大伙儿号】:达达前端小酒馆。

发表评论

电子邮件地址不会被公开。 必填项已用*标注