【小程序】使用uni-app搭建小程序环境之框架

开发目录为：

    
┌─pages               
│  ├─index
│  │  └─index.vue    
│  └─login
│     └─login.vue    
├─static             
├─main.js       
├─App.vue          
├─manifest.json  //文件是应用的配置文件，用于指定应用的名称、图标、权限等
└─pages.json    //文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等

globalStyle

　　用于设置应用的状态栏、导航条、标题、窗口背景色等。

　　注意

• • 支付宝小程序使用titleImage时必须使用https的图片链接地址，需要真机调试才能看到效果，支付宝开发者工具内无效果
  • globalStyle中设置的titleImage也会覆盖掉pages->style内的设置文字标题
  • navigationBarTextStyle 在iOS13上可能会错乱，此问题后续版本会修复
    
    
    

pages

uni-app 通过 pages 节点配置应用由哪些页面组成，pages 节点接收一个数组，数组每个项都是一个对象，其属性值如下：

Tips：

• pages节点的第一项为应用入口页（即首页）
• 应用中新增/减少页面，都需要对 pages 数组进行修改
• 文件名不需要写后缀，框架会自动寻找路径下的页面资源

tabBar

如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。

Tips

• 当设置 position 为 top 时，将不会显示 icon
• tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
• tabbar 切换第一次加载时可能渲染不及时，可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花（hello uni-app使用了此方式）
• tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的onShow，不会再触发onLoad。
• 顶部的 tabbar 目前仅微信小程序上支持。需要用到顶部选项卡的话，建议不使用 tabbar 的顶部设置，而是自己做顶部选项卡，可参考 hello uni-app->模板->顶部选项卡。

tabbar常见问题

• tabbar 的 js api 见接口-界面-tabbar，可实现动态显示隐藏（如弹出层无法覆盖tabbar）、内容修改（如国际化）、item加角标等功能。hello uni-app中也有示例。
• tabbar 的 item 点击事件见页面生命周期的onTabItemTap。
• 代码跳转到tabbar页面，api只能使用uni.switchTab，不能使用uni.navigateTo、uni.redirectTo；使用navigator组件跳转时必须设置open-type="switchTab"
• tabbar 在H5端是div模拟的，属于前端屏幕窗口的一部分，如果要使用bottom居底定位方式，应该使用css变量--window-bottom，比如悬浮在tabbar上方10px的按钮，样式如下bottom: calc(var(--window-bottom) + 10px)
• tabbar 的默认高度，在不同平台不一样。详见
• 中间带+号的tabbar模板例子，参考。可跨端，但+号不凸起。
• 如需 tabbar 中间凸起，可自定义tabbar，插件市场有例子，如colorUI等。但注意前端tabbar的性能不如原生tabbar，如果是多页方式，底部tabbar会在切换时闪执行转场动画，如果是单页方式，承载复杂页面内容会有性能问题。插件市场搜索tabbar有不少类似例子。
• App端若使用nvue，自定义tabbar，没有性能体验问题。
• 纯nvue项目（manifest里renderer为native），目前使用pages.json里的tabbar反而影响性能，建议使用前端自己实现单页面的tabbar。后续会解决这个bug。
• Android App上弹出键盘顶起tabbar的问题。升级到HBuilderX 2.2后不再存在。
• 原生的tabbar只有一个且在首页。二级页如需的tab，前端自己实现。
• 如果是需要先登录、后进入tab页面，不需要把登陆页设为首页，首页仍然是tabbar页，可参考HBuilderX新建uni-app项目时的登陆模板
• 前端弹出遮罩层挡不住tabbar的问题，跨端处理方式时动态隐藏tabbar。App端可以使用plus.nativeObj.view或subNVue做弹出和遮罩，可参考这个底部原生图标分享菜单例子
• 微信小程序模拟器1.02.1904090版有bug，在缩放模拟器页面百分比后，tabbar点击多次后就会卡死。真机无碍，使用时注意。详见

manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。

 package.json

　　通过在package.json文件中增加uni-app扩展节点，可实现自定义条件编译平台（如钉钉小程序、微信服务号等平台）。

package.json扩展配置用法（拷贝代码记得去掉注释！）：

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

}

Tips：

• UNI_PLATFORM仅支持填写uni-app默认支持的基准平台，目前仅限如下枚举值：app-plus、h5、mp-weixin、mp-alipay、mp-baidu、mp-toutiao、mp-qq
• BROWSER 仅在UNI_PLATFORM为h5时有效,目前仅限如下枚举值：Chrome、Firefox、IE、Edge、Safari、HBuilderX
• package.json文件中不允许出现注释，否则扩展配置无效
• vue-cli需更新到最新版，HBuilderX需升级到Alpha 2.1.6+ 版本

原文：https://www.cnblogs.com/websmile/p/11577484.html