• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

开发目录为:

    
┌─pages               
│  ├─index
│  │  └─index.vue    
│  └─login
│     └─login.vue    
├─static             
├─main.js       
├─App.vue          
├─manifest.json  //文件是应用的配置文件,用于指定应用的名称、图标、权限等
└─pages.json    //文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等
属性类型必填描述平台兼容
globalStyle Object 设置默认页面的窗口表现  
pages Object Array 设置页面路径及窗口表现  
tabBar Object 设置底部 tab 的表现  
condition Object 启动模式配置  
subPackages Object Array 分包加载配置  
preloadRule Object 分包预下载规则 微信小程序
workers String Worker 代码放置的目录 微信小程序

globalStyle

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

  注意

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


pages

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

属性类型默认值描述
path String   配置页面路径
style Object   配置页面窗口表现,配置项参考下方 pageStyle

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-plush5mp-weixinmp-alipaymp-baidump-toutiaomp-qq
  • BROWSER 仅在UNI_PLATFORMh5时有效,目前仅限如下枚举值:ChromeFirefoxIEEdgeSafariHBuilderX
  • package.json文件中不允许出现注释,否则扩展配置无效
  • vue-cli需更新到最新版,HBuilderX需升级到Alpha 2.1.6+ 版本

 

 

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序订阅消息流程发布时间:2022-07-18
下一篇:
腾讯推出“扫码购”,小程序新零售的秘密武器!发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap