上篇文章,我们了解了小程序开发工具,还有加载项目的基本结构及其功能,这篇通过示例项目,以项目结构中的文件,来了解小程序开发需要知道的基础操作。我们以原有示例项目为基准,展开项目各项目文件,打开app.json文件如图

iOS写json文件的软件 app.json文件_小程序基础

这里,我们打算对此示例项目进行简单的更改,用以熟悉小程序的开发操作。我们可能首先向定义外观,由前面的知识我们知道,app.json 作用是对整个小程序的全局配置,可以在这个文件中配置小程序的窗口、背景色,配置默认标题,配置导航条样式,添加新的页面后也要在此文件中添加新页面申明,所以,需要打开app.json,进行更改即可。

1.设置导航栏的标题为测试商城,字体为白色,背景为黑色要怎么做? 很简单,在此app.json代码文件中找到window属性项,将把下面的代码替换到window里面就可以了

"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": "测试商城",
    "navigationBarTextStyle":"white"
  }

顺便提示一下navigationBarBackgroundColor和navigationBarTextStyle都是支持rgb的,也就是说设置字体颜色navigationBarTextStyle为白色填入white其实也可以填入#fff,都是一样的效果

2.怎么增加一个交互界面?通常我们建议,在app.json里的pages属性新增你要的路径页面,例如“pages/testPage/testPage”,你写好路径点击保存后,系统会自动在项目中建好相关文件的,可看到效果如下

iOS写json文件的软件 app.json文件_小程序基础_02

当然,你也可以选中项目的pages目录,点击左上角的加好按钮来实现添加,不过这样的话你需要一个个添加相关页面,所以还是建议采用上面的方式。我们看到,testPage文件夹下,有四个代码文件,他们都是添加的testPage也关联的文件。至于删除,鼠标选中待删除文件或文件夹右键,点击删除即可。

3.我的小程序登陆后,进去到主页,里面最下边有导航栏,要怎么操作添加?在app.json里的新增tabBar属性及其值,如下:

iOS写json文件的软件 app.json文件_开发需知_03

当然,上面我刚添加后报错了,图片不存在,是因为有的导航栏的图片和页面不存在,所以更改代码或者添加图片及其页面即可。之后点击编译,将看到视图页面下方,多了个导航栏,如下图:

iOS写json文件的软件 app.json文件_iOS写json文件的软件_04

当然,如果你不想在某些页面显示tabBar导航栏,怎么做呢?在list属性中去掉某些页面的申明即可,比如你的首页是登录页面,那么list属性中,就不要含有登录页面的申明了。如下图:

iOS写json文件的软件 app.json文件_开发需知_05

至此,设计app.json的简单操作及功能,也就差不多了。不过刚刚提到首页,想来也是,我们需要为小程序设置一个起始页,由此转至下篇文章