mac Hbuilder 微信开发者工具路径 m1 微信开发者工具

微信开发者工具——相关配置

• 全局配置

• pages字段
• window字段
• TabBar字段

• 页面配置

全局配置

均是在app.json里面进行

微信开发者工具——全局配置

以下是几个必备的开发小程序所需要的字段：

pages字段

用于创建新的页面

"pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],

window字段

定义小程序页面的样式等
常用：

“属性”	类型	描述
navigationBarBackgroundColor	HexColor	导航栏背景颜色，如 #000000
navigationBarTextStyle	string	导航栏标题、状态栏颜色，仅支持 black / white
navigationBarTitleText	string	导航栏标题文字内容
backgroundColor	HexColor	窗口的背景色
backgroundTextStyle	string	下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh	boolean	是否开启全局的下拉刷新。
onReachBottomDistance	number	页面上拉触底事件触发时距页面底部距离，单位为 px。
visualEffectInBackground	string	切入系统后台时，隐藏页面内容，保护用户隐私。支持 hidden / none

"window": {
    "navigationBarTextStyle": "black",
    "navigationStyle": "custom"
  },

TabBar字段

客户端窗口的底部或顶部有 tab 栏可以切换页面
常用：

“属性”	类型	必填	描述
color	HexColor	是	tab 上的文字默认颜色，仅支持十六进制颜色
selectedColor	HexColor	是	tab 上的文字选中时的颜色，仅支持十六进制颜色
backgroundColor	HexColor	是	tab 的背景色，仅支持十六进制颜色
borderStyle	string	否	tabbar 上边框的颜色， 仅支持 black / white
position	string	否	tabBar 的位置，仅支持 bottom / top

TabBar的list属性：

“属性”	类型	必填	描述
pagePath	string	是	页面路径，必须在 pages 中先定义
text	string		tab 上按钮文字
iconPath	string	否	图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。(当 position 为 top 时，不显示 icon。)
selectedIconPath	string	否	选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。(当 position 为 top 时，不显示 icon。)

配置自定义TabBar

• 在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。
• 所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启。

如：

{
  "tabBar": {
    "custom": true,
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "#000000",
    "list": [{
      "pagePath": "page/component/index",
      "text": "组件"
    }, {
      "pagePath": "page/API/index",
      "text": "接口"
    }]
  },
  "usingComponents": {}
}

页面配置

• 可以在页面对应的 .json 文件来对本页面的表现进行配置。
• 页面中配置项在当前页面会覆盖 app.json 中相同的配置项
  页面配置

常见的是：

{
  "navigationStyle": "custom",    //控制导航栏的颜色、背景、标题样式等。
  "component": true,		//定义为TabBar里面的一项（在TabBar自定义时使用）
  "usingComponents": {
      "button":"/components/button/button"
  }			//调用组件库
}