小程序开发Vol.2——如何让你的小程序更好看?

  • • 发表于 6个月前
  • • 作者 一人
  • • 1485 次浏览
  • • 1 条评论
  • • 最后编辑时间 6个月前
  • • 来自 [技 术]

前几天有人在公众号留言问我,上面的小程序界面是如何做到的?
想了想,决定把这个例子结合进来,一起分享给大家。

通过上一次的学习——《开发小程序必备知识基础》,相信大家都了解了小程序框架中主要包含了wxml、wxss和js三类文件,分别用于描述页面内组件元素、属性及动作交互。

事实上,小程序框架中还存在第四类文件——json配置文件,主要用于配置小程序的窗口表现、导航栏、底部菜单等。

带着问题,我们先来学习一下json配置文件。

什么是json配置文件?

Json文件分为app.json和page.json两种,分别是对小程序的全局配置文件和页面配置文件,每个小程序至少包含一个app.json。
而page.json并非必需的,我们可以视情况进行添加,它将会覆盖app.json中的配置信息,从而使当前页面拥有新的页面配置。

Json文件主要用于配置页面路径(也称为路由)、窗口表现(如导航栏颜色等)、底部菜单、网络超时时间等。

App.json包含的配置项如下:

*实际开发中,前三项通常需要进行配置,所以下文将进行重点讲解。

01 app.json的page参数

小程序增加/删除页面都必须对app.json进行更新修改,新版本开发者工具在增加新页面时将会自动在app.json中添加新的页面路由。
高坑预警:开发过程中除非必须,否则建议不要进行关键文件删除动作,容易引起IDE报错。

如小程序包含a页面也b页面,他们之下的文件分别以aa或bb命名,如aa.js、aa.wxml、bb.wxss等,那么app.json中的页面配置如下:

“pages”:[
    “pages/a/aa”,
    “pages/b/bb”
]
高坑预警:pages中的第一项代表小程序首页,且必须在tabbar中,否则会导致tabbar不显示(此时IDE不会报错)。
02 app.json的tabbar参数


底部菜单真机效果

通常在小程序中,需要借助底部菜单来实现不同页面的切换,这时我们便需要对tabbar进行配置。



点开可查看大图

如上,是官方文档对于tabbar的参数描述。
值得注意的是,尽管官方文档中color、selectedColor、backgroundColor和list均属于必填项,但实际上如对tabbar无特别的视觉要求,仅填写list即可。

list参数用于配置菜单栏中每个按钮的跳转路径、文本说明、样式和被选中时的样式,前两项属于必填项,后两项选填,只能绑定本地图片。
list从类型上来讲是一个数组,可配置2-5个tab(即菜单按钮),tab的顺序与list中的顺序一致。

list的写法:整个数组使用中括号[]包起来,数组中每一项用花括号{}包起来,每一项采用类似键值对的形式,均需英文引号括起,项与项之间使用英文逗号隔开。如下为示范:

   "tabBar": {
     "list": [{
       "pagePath": "pages/aa/aa",
      "text":  "首页"
    },{
      "pagePath":  "pages/index/index",
       "text": "索引"
     }]
   }
Tips :tabbar默认位置为底部(bottom),可通过设置position的值为top使tabbar在小程序顶部显示,此时tabbar将不显示icon(按钮图标)。
03 app.json的window参数

window参数用于设置小程序的状态栏、导航条、标题、窗口背景色。
常用参数如:
导航栏标题navigationBarTitleText
下拉刷新enablePullDownRefresh

讲到这里,我们回到文首的问题:
如何让小程序顶部不再非黑即白?
如何让界面更彰显创意、别具一格呢?

答案很简单,我们只需将app.json中window的navigationStyle值设置为custom,小程序将只保留右上角胶囊装的按钮。

"window":{
     "navigationStyle": "custom" 
  }


可复制文本
(navigationStyle的默认值为”default”)

值得注意的是,此时整个小程序界面会随之上移,所以在开发过程中应测试是否对界面UI等造成影响。

Tips:如果小程序开启custom,应注意做好低版本客户端的兼容。
04 注意点

1、页面路径按照页面在小程序包中的文件路径即可;
2、所有的页面文件名称仅用于代码中调用,与用户前端使用的页面标题无关;
3、同一个页面下的项目文件名称应一致,如aa.wxml、aa.wxss、aa.wxs,在json中进行页面路径设置时,仅需写aa即代表了以上几个文件合并;
4、页面文件名与其下的项目文件名可以不一致,如页面文件名为abc,项目文件可以是def.wxml、def.wxss和def.wxs等 ;
5、在json配置页面路径时,页面路径之间用英文逗号隔开过行,最后一项不加逗号,否则会报错。


查看原文更多详细资料,欢迎关注公众号【一人从零开发小应用】(或搜索微信号:xiaochengxu1038):

" class="reference-link">

关于我们

我们愿意利用每天的三分钟,致力于帮助更多新媒体人从零基础到深度掌握小程序;
我们谨希望在新媒体探索上,一路有你,一起成长;
这,是我们的梦想。

如果你认同我们,请帮我们转发,这将是对我们坚持梦想最大的鼓励!

往期回顾


《开发小程序必备知识基础》



《小程序如何给公众号做吸粉?》

转载文章 阅读原文

分享到:
评论区(共1条评论)
1条评论
Ctrl+Enter
作者

一人

一人

APP:0 帖子:8 回复:17 积分:478

已加入社区[221]天

小程序开发大白。

作者详情》
Top