柚媚网络营销培训

柚媚网络营销培训



百度智能小程序开发第2课:详解.json文件的编写


作者:虎雕 日期:2018-09-25 20:18:49

百度智能小程序.json文件在根目录下是必备的,在其它页面中可有可无,app.json是一个全局配置,其它页面的json文件只能对window的内容进行配置。

app.json这个文件是对百度智能小程序的基本和通用配置,包括开发者模式、所有页面路径、窗口与导航表现、网络超时时间五个方面的内容。

首先我们用一个大括号来表示代码的开始与结束,这个同其它开发语言一样,都有一个开始符合和结束符合。我们的所有配置项要全部写在这个大括号内。

配置项是以名称和值成对出现的,即“配置名称”:“配置值”。每一对配置内容用逗号隔开。如果配置值是一个数组就用中括号括起来,如果配置的值本身包含了多个配置内容,就用大括号括起来,每一对配置内容也用逗号隔开。

单一配置示例:

 

“配置名称”:“配置值”

 

多项配置示例:

 

“配置名称”:

“配置名称01”:“配置值01”,

“配置名称02”:“配置值02”,

“配置名称03”:“配置值03

 

数组配置示例:(主意中括号内只有配置值哈!)

 

“配置名称”:

[

“配置值01”,

“配置值02”,

 “配置值03

]

 

调试模式配置,它的配置值有两个,falsetrue。在调试的时候设置为true,这样,我们在开发者工具的信息面板上,可以看到调试信息,如果出现bug,可以帮助我们快速发现问题是出在Page的注册页面路由数据更新事件触发的哪个方面那个地方。上线后设置为false,以免向访客输出不必要的内容。

开发时:

 

"debug": true

 

上线后:

 

"debug": false

 

接下来就进行页面路径的配置,这是一个数组类型的配置,你不可能只做一个页面来玩吧?当然,如果以后百度智能小程序推出了小程序竞价排名,你再考虑这个吧!在这个配置里面,必须包括所有的小程序页面,以后的添加或者删除,都必须到这里来做相应的更改。配置值的形式是以“相对路径+文件名”出现的,这个文件名没有后缀,实际上相当于是包括了该文件夹下面所有同名称不同后缀的文件。也就是pages/页面文件夹/页面名称

示例:

 

“配置名称”:

[

pages/页面文件夹1/页面名称1”,

pages/页面文件夹2/页面名称2”,

 pages/页面文件夹3/页面名称3

]

 

如果要把我现在这个网站做成百度智能小程序,pages配置就这样写:

pages”:

[

pages/index/index”, //首页,对应网站index.php

pages/list/list  //文章列表页,对应网站sec_list.php

 pages/show/show”,  //文章展示页,对应网站sec_show.php

pages/search/search”,  //内容搜索页,对应网站sec_search.php

 pages/comment/comment”,  //文章评论页,对应网站的评论功能

 pages/user/user”,  //用户页,对应网站用户中心sec_my.php

 pages/reg/reg”,  //用户注册页,对应网站sec_reg.php

 pages/login/login”,  //用户登录页,对应网站sec_login.php

 pages/guestbook/guestbook”,  //用户留言页,对应网站sec_guestbook.php

]

如果我们要做一个企业网站,企业网站一般包括关于我们、产品展示、资讯、联系我们等栏目,这个非常简单,pages这样写:

pages”:

[

pages/about/about”,

pages/product/product”,

 pages/news/news,

 pages/contact/contact

]

 

页面配置信息配置完毕后,就可以配置窗口展示内容了,这个其实就是CSS的一部分,小程序把这个取出来放到这里了。下面放一张官方截图,少写几个字。


写一个示例:

{
        "window":{
               "navigationBarBackgroundColor": "#444444",
               "navigationBarTextStyle": "yellow",
               "navigationBarTitleText": "
柚媚网络营销培训",
               "backgroundColor": "#ffffff",
               "backgroundTextStyle": "dark"
        }
}

这里说明一下,以后各个页面的json文件,页面的.json只能设置 window 相关的配置项,只需要写配置内容就是了,比如我想把文章列表页的展示效果换一下,那么list.json就这样写:

{
       "navigationBarBackgroundColor": "red",
       "navigationBarTextStyle": "#000000",
       "navigationBarTitleText": "
柚媚网络营销培训_百度智能小程序开发
       }

 

或者图省事,不想改变其它设置,也可以不写这个文件,或者简单地写一下,比如index.json

{

    "navigationBarTitleText": "柚媚首页"

}

 

对于各种网络请求的超时时间设置,该死的官方好像没有讲!另外截个图。


再上个示例代码:

"networkTimeout": {

        "request": 30000,

        "connectSocket": 10000,

        "uploadFile": 10000,

        "downloadFile": 10000

    },

   

最后设置导航栏tabBar的相关属性,官方说的是底部,你选择positiontop它还不是在头部了,直接复制一个官方的说明过来。

属性

类型

必填

描述

backgroundColor

HexColor

tab 的背景色。

borderStyle

String

tabBar 边框颜色。仅支持 black/white 两种边框颜色,默认值为 black

color

HexColor

tab 上文字的默认颜色。

position

String

tabBar 的位置。 仅支持 bottom/top 两种位置设置,默认值为 bottom

list

Array

tab 的列表,列表个数2~5个。
list
接受一个数组,tab 按数组的顺序排序,每个项都是一个对象,其属性值如下:
- pagePath
:已在 pages 中定义的页面路径;类型:String;必填项。
- text
tab上显示的文字信息;类型:String;必填项。
- iconPath
:图片路径,icon 大小限制为40kb,建议尺寸为 78px*78px,不支持网络图片;类型:String;非必填项。
- selectedIconPath
:选中时的图片路径,icon 规格同上;类型:String;非必填项。
-
position top 时,不显示 icon

selectedColor

HexColor

tab 上的文字选中时的颜色。

示例代码

 

   "tabBar": {

        "color": "#a2a2a2",

        "selectedColor": "#3388ff",

        "borderStyle": "black",

        "backgroundColor": "#ffffff",

        "list": [{

            "pagePath": "pages/yuanma/yuanma",

            "iconPath": "images/yuanma.png",

            "selectedIconPath": "images/yuanma_selected.png",

            "text": "百度智能小程序源码"

        }, {

            "pagePath": "pages/peixun/peixun",

            "iconPath": "images/peixun.png",

            "selectedIconPath": "images/peixun_selected.png",

            "text": "百度智能小程序培训"

        },{

            "pagePath": "pages/jiaocheng/jiaocheng",

            "iconPath": "images/jiaocheng.png",

            "selectedIconPath": "images/jiaocheng_selected.png",

            "text": "百度智能小程序教程"

        }

]

    }

 



评论列表:
发表评论:

昵 称:

内 容: