摘要：
uni-app的框架，配置：page.json，manifest.json，package.json，vue.config.js。脚本，应用程序，main.js。日志打印，定时器，... uni-app的框架，配置：page.json，manifest.json，package.json，vue.config.js。脚本，应用程序，main.js。日志打印，定时器，生命周期，页面，页面通讯。
pages.json文件时用来对uni-app进行全局配置的，它是用来写页面文件的路径，窗口样式，底部的tabbar等，类似于小程序中的app.json的页面管理。这里注意的是定位，在小程序中是在app.json的，而在uni-app中式在manifest配置的，这一点是我做地图时注意到的内容。
pages.json:
{ "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" } } }globalStyle，设置应用的状态栏，导航条，标题，窗口背景颜色等。
pages，配置页面路径。第一项为应用入口，增加或是减少页面，都在pages数组中进行修改即可。
┌─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": { ... } } ] }page页面
{ "pages": [{ "path": "pages/index/index", "style": { "navigationBarTitleText": "首页",//设置页面标题文字 "enablePullDownRefresh":true//开启下拉刷新 } }, ... ] }常见titleNView配置代码示例
{ "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时点击输入框不置焦，可以跳到新页面搜索 } } } } } ... ] }app-plus，h5，mp-alipay
{ "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" } }] } } }] }h5：
titleNView,导航栏
pullToRefresh,下拉刷新
tabBar，通过tabBar配置项指定tab栏的表现，以及tab切换时显示的对应项。
当设置position为top时，将不会显示icon，tabBar中的list时一个数组，最少配置2个，最多配置5个。
tabbar切换第一次加载时可能渲染不及时，可以在每个tabbar页面的onLoad生命周期里先弹出一个等待的雪花。当展示过一次tabbar页面的时候，再次切换tabbar页面的时候，就只会触发onShow这个方法，不会触发onLoad了。
"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启动模式列表。
"condition": { //模式配置，仅开发期间生效 "current": 0, //当前激活的模式（list 的索引项） "list": [{ "name": "swiper", //模式名称 "path": "pages/component/swiper/swiper", //启动页面，必选 "query": "interval=4000&autoplay=false" //启动参数，在页面的onLoad函数里面得到。 }, { "name": "test", "path": "pages/component/switch/switch" } ] }subPackages分包加载配置，但在5 app中为整包。subPackages节点接收一个数组，每个项都是应用的子包。
┌─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"] } } }preloadRule分包预载配置，key页面的路径，value是进入页面的预下载配置。
manifest.json文件时应用的配置文件，应用的名称，图标，权限等等。
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 //自定义条件编译常量，建议为大写 } } } } }vue.config.js是一个可选的配置文件
uni.css文件为全局应用的样式风格。使用时需要在style节点上添加lang="scss"。
<style lang="scss"> </style>
uni.scss变量：
/* 颜色变量 */ /* 行为相关颜色 */ $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时我们页面的入口文件。
应用的生命周期：
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 = false Vue.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定时器，到时间后执行，clearTimeout取消setTimeout设置的定时器，setInterval()设置一个定时器，clearInterval()取消由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()函数用于获取当前页面栈的实例
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); })
还没有评论，来说两句吧...