文档章节

如何高效的阅读uni-app框架?(建议收藏)

达达前端小酒馆
 达达前端小酒馆
发布于 11/22 23:39
字数 2837
阅读 32
收藏 0

file

作者 | Jeskson 来源 | 达达前端小酒馆

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配置的,这一点是我做地图时注意到的内容。

file

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);
})

❤️ 不要忘记留下你学习的脚印 [点赞 收藏 评论] 作者Info:

【作者】:Jeskson

【原创公众号】:达达前端小酒馆。

【转载说明】:转载请说明出处,谢谢合作!~

关于目前文章内容即涉及前端,PHP知识点,如果有兴趣即可关注,很荣幸,能被您发现,真是慧眼识英!也感谢您的关注,在未来的日子里,希望能够一直默默的支持我,我也会努力写出更多优秀的作品。我们一起成长,从零基础学编程,将 Web前端领域、数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯。


若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。


请点赞!因为你们的赞同/鼓励是我写作的最大动力!

欢迎关注达达的CSDN!

这是一个有质量,有态度的博客

7d927f18ebd05ea1d505a572393fbc87.jpg

© 著作权归作者所有

达达前端小酒馆
粉丝 2
博文 187
码字总数 293791
作品 0
广州
程序员
私信 提问
跨端开发痛点?送你一款Vue最流行的跨端框架——uni-app

前言 今天来聊一下前端必备技能——小程序开发。 从最早发布的,到后来的、、、,还有最近发布的,面对这么多套的代码,开发者该如何开发呢? 当业务要求同时在不同的端都要展现时候,针对不...

前端陈晨
09/23
0
0
极致阅读体验:简书IOS功能拆解分析

最近迷上了简书。也来说说简书IOS的功能设计吧。当然,WEB版我也很喜欢。评测的逻辑如下:   痛点->主功能->使用体验是否能够最优实现主功能->设计   一、解决的痛点:   WEB版:整理书...

程序员客栈
2016/04/28
29
0
uni app 零基础小白到项目实战-1

uni-app是一个使用vue.js开发跨平台应用的前端框架。开发者通过编写vue.js代码,uni-app将其编译到Ios,android,微信小程序等多个平台,保证其正确并达到优秀体验。Uni-app继承自vue.js,提供...

达叔小生
09/28
75
0
uni-app跨端开发框架介绍

uni-app 一套代码,多端运行 使用vue的语法 + 微信小程序的标签和API的跨平台前端框架 框架简介: 可编译到iOS、Android、H5、微信/支付宝/百度/小程序 将常用的组件和API进行了跨平台的封装...

tenyiyi
04/18
0
0
uni-app 2.2 发布,大幅提升H5端性能体验

背景 发布以来,已经服务了几十万开发者。让我们意外,或者说惊喜的是,有大量开发者用只编写H5版,并没有多端发布(可参考案例)。 这其实也符合的初衷,的定位并不是需要多端发布时才用。是...

CHB
08/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

nginx主备模式笔记

(1)两台服务器 192.168.17.129 和 192.168.17.131 (2)在两台服务器安装 keepalived 安装 keepalived (1)使用 yum 命令进行安装 yum install keepalived –y (2)安装之后,在 etc 里面...

行者终成事
今天
4
0
004-Docker镜像

Docker镜像 一个通用的私有仓库,可以提升效率 Docker镜像构建分为两种,一种是手动构建,一种是Dockerfile(自动构建) 基于centos镜像构建手动制作nginx镜像 docker run --name testdocker -...

伟大源于勇敢的开始
今天
5
0
OSChina 周一乱弹 —— 我就加班,不去世不休息

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @巴拉迪维 :《For Forever》90后那些小鲜肉歌手中,好像只有花花的歌能吸引我,这小家伙对音乐的感觉真是天才一般!#今日歌曲推荐# 《For F...

小小编辑
今天
9
1
【领会要领】web前端-轻量级框架应用(jQuery基础)

作者 | Jeskson 来源 | 达达前端小酒馆 jquery的安装和语法,jquery的多种选择器,dom操作和jquery事件。 jQuery框架,简介,优势,安装,语法,jQuery选择器,id选择器,类选择器,标记选择...

达达前端小酒馆
今天
6
0
MySQL 常用命令

无须死记硬背,直接 copy 就好。 1. 查看目前 mysql 用户 select user,host,password from mysql.user; 2. 修改 root 密码(使用内置函数修改) set password for root@localhost=password('y......

HuaiAnGG
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部