AHA-uniapp项目指南

前端技术文档示例

2019-12-11

vue与uni-app开发的部分不同点

  • uni-app才有的生命周期

函数名 说明
onLaunch 写在app.vue中当uni-app 初始化完成时触发（全局只触发一次）
onShow 写在app.vue中当 uni-app 启动，或从后台进入前台显示触发
在页面中则为页面显示触发
onHide 写在app.vue中当 uni-app 从前台进入后台触发
在页面中则为页面隐藏触发
onUniNViewMessage 对 uni-app页面发送的数据进行监听，可参考 nvue 向 vue 通讯

uni-app支持vue所有的生命周期

  • uni-app的路由

    属性 类型 必填 描述 平台兼容
    globalStyle Object 否 设置默认页面的窗口表现
    pages Object Array 是 设置页面路径及窗口表现
    tabBar Object 否 设置底部 tab 的表现
    condition Object 否 启动模式配置
    subPackages Object Array 否 分包加载配置
    preloadRule Object 否 分包预下载规则 微信小程序
    workers String 否 Worker 代码放置的目录 微信小程序

  • 包含了所有配置的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"
        },
    "pageOrientation": "portrait"//全局屏幕旋转设置(仅微信/QQ小程序)，支持 auto / portrait / landscape
    },
    "tabBar": {
        "color": "#7A7E83", 
        "selectedColor": "#3cc51f",
        "borderStyle": "black",
        "backgroundColor": "#ffffff",
        "height": "50px",
        "fontSize": "10px",
        "iconWidth": "24px",
        "spacing": "3px",
        "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"
        }
    }
}

与vue中的router有部分相同之处,但是uni的路由中有样式以及组件的配置

← 小红椒后端交接文档 →