金狮贵宾会

登录
免费开通

微信小程序开发:简朴设置教程

微信小程序开发:简朴设置教程包括对小程序全局设置,,,,,包括page,window等基本的设置。。

1.设置

app.json文件用来对微信小程序举行全局设置,,,,,决议页面文件的路径、窗口体现、设置网络超时时间、设置多 tab 等。。

属性 类型 必填 形貌
pages String Array 设置页面路径
window Object 设置默认页面的窗口体现
tabBar Object 设置底部 tab 的体现
networkTimeout Object 设置网络超时时间
debug Boolean 设置是否开启 debug 模式

1.1 pages

接受一个数组,,,,,每一项都是字符串,,,,,来指定小程序由哪些页面组成。。每一项代表对应页面的【路径+文件名】信息,,,,,数组的第一项代表小程序的初始页面。。小程序中新增/镌汰页面,,,,,都需要对 pages 数组举行修改。。

文件名不需要写文件后缀,,,,,由于框架会自动去寻找路径下 .json, .js, .wxml, .wxss 四个文件举行整合。。

eg:

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

1.2 window

用于设置小程序的状态栏、导航条、问题、窗口配景致。。

属性 类型 默认值 形貌
navigationBarBackgroundColor HexColor #000000 导航栏配景颜色,,,,,如"#000000"
navigationBarTextStyle String white 导航栏问题颜色,,,,,仅支持 black/white
navigationBarTitleText String   导航栏问题文字内容
backgroundColor HexColor #ffffff 窗口的配景致
backgroundTextStyle String dark 下拉配景字体、loading 图的样式,,,,,仅支持 dark/light
enablePullDownRefresh Boolean false 是否开启下拉刷新,,,,,详见页面相关事务处理函数。。
onReachBottomDistance Number 50 页面上拉触底事务触发时距页面底部距离,,,,,单位为px

注:HexColor(十六进制颜色值),,,,,如"#ff00ff"

eg:

{
  "window":{
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功效演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
}

1.3 tabBar

若是小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),,,,,可以通过 tabBar 设置项指定 tab 栏的体现,,,,,以及 tab 切换时显示的对应页面。。

Tip:

当设置 position 为 top 时,,,,,将不会显示 icontabBar 中的 list 是一个数组,,,,,只能设置最少2个、最多5个 tab,,,,,tab 按数组的顺序排序。。

属性说明:

属性 类型 必填 默认值 形貌
color HexColor   tab 上的文字默认颜色
selectedColor HexColor   tab 上的文字选中时的颜色
backgroundColor HexColor   tab 的配景致
borderStyle String black tabbar上边框的颜色,,,,, 仅支持 black/white
list Array   tab 的列表,,,,,详见 list 属性说明,,,,,最少2个、最多5个 tab
position String bottom 可选值 bottom、top

其中 list 接受一个数组,,,,,数组中的每个项都是一个工具,,,,,其属性值如下:

属性 类型 必填 说明
pagePath String 页面路径,,,,,必需在 pages 中先界说
text String tab 上按钮文字
iconPath String 图片路径,,,,,icon 巨细限制为40kb,,,,,建议尺寸为 81px * 81px,,,,,当 postion 为 top 时,,,,,此参数无效,,,,,不支持网络图片
selectedIconPath String 选中时的图片路径,,,,,icon 巨细限制为40kb,,,,,建议尺寸为 81px * 81px ,,,,,当 postion 为 top 时,,,,,此参数无效
eg: "tabBar": { "color": "#7A7E83", "selectedColor": "#3cc51f", "backgroundColor" : "#F7F7FA", "borderStyle": "white", "list": [{ "pagePath": "pages/word/word", "text": "背词", "iconPath": "images/home.png", "selectedIconPath": "images/home-selected.png" } 1.4 networkTimeout

可以设置种种网络请求的超时时间。。

属性说明:

属性 类型 必填 说明
request Number wx.request的超时时间,,,,,单位毫秒,,,,,默以为:60000
connectSocket Number wx.connectSocket的超时时间,,,,,单位毫秒,,,,,默以为:60000
uploadFile Number wx.uploadFile的超时时间,,,,,单位毫秒,,,,,默以为:60000
downloadFile Number wx.downloadFile的超时时间,,,,,单位毫秒,,,,,默以为:60000

1.5 debug

可以在开发者工具中开启 debug 模式,,,,,在开发者工具的控制台面板,,,,,调试信息以 info 的形式给出,,,,,其信息有Page的注册,,,,,页面路由,,,,,数据更新,,,,,事务触发 。。 可以资助开发者快速定位一些常见的问题。。

1.6 page.json

每一个小程序页面也可以使用.json文件来对本页面的窗口体现举行设置。。 页面的设置比app.json全局设置简朴得多,,,,,只是设置 app.json 中的 window 设置项的内容,,,,,页面中设置项会笼罩 app.json 的 window 中相同的设置项。。

页面的.json只能设置 window 相关的设置项,,,,,以决议本页面的窗口体现,,,,,以是无需写 window 这个键,,,,,如:

属性 类型 默认值 形貌
navigationBarBackgroundColor HexColor #000000 导航栏配景颜色,,,,,如"#000000"
navigationBarTextStyle String white 导航栏问题颜色,,,,,仅支持 black/white
navigationBarTitleText String   导航栏问题文字内容
backgroundColor HexColor #ffffff 窗口的配景致
backgroundTextStyle String dark 下拉配景字体、loading 图的样式,,,,,仅支持 dark/light
enablePullDownRefresh Boolean false 是否开启下拉刷新,,,,,详见页面相关事务处理函数。。
disableScroll Boolean false 设置为 true 则页面整体不可上下转动;;;;;;只在 page.json 中有用,,,,,无法在 app.json 中设置该项
onReachBottomDistance Number 50 页面上拉触底事务触发时距页面底部距离,,,,,单位为px

eg:

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功效演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

下面展示下项目中的app.json的完整样式:

{
  "pages":[
    "pages/word/word",
    "pages/search/search",
    "pages/settings/settings",
    "pages/search/detail/detail",
    "pages/settings/clause/clause",
    "pages/settings/help/help",
    "pages/settings/feedback/feedback",
    "pages/note/index/index",
    "pages/note/create/index",
    "pages/note/edit/index",
    "pages/intro/intro",
    "pages/intro/trick/trick",
    "pages/intro/recommend/recommend",
    "pages/intro/saying/saying"

  ],
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "backgroundColor" : "#F7F7FA",
    "borderStyle": "white",
    "list": [{
      "pagePath": "pages/word/word",
      "text": "背词",
      "iconPath": "images/home.png",
      "selectedIconPath": "images/home-selected.png"
    },
    {
      "pagePath": "pages/search/search",
      "text": "查词",
      "iconPath": "images/search.png",
      "selectedIconPath": "images/search-selected.png"
    },
    {
      "pagePath": "pages/intro/intro",
      "text": "要领",
      "iconPath": "images/intro.png",
      "selectedIconPath": "images/intro-selected.png"
    },
    {
      "pagePath": "pages/note/index/index",
      "text": "条记",
      "iconPath": "images/note.png",
      "selectedIconPath": "images/note-selected.png"
    },
    {
      "pagePath": "pages/settings/settings",
      "text": "设置",
      "iconPath": "images/settings.png",
      "selectedIconPath": "images/settings-selected.png"
    }]
  },
  "window":{
    "backgroundTextStyle":"light",
    "backgroundColor": "#EFEFF4",
    "navigationBarBackgroundColor": "#2C2D31",
    "navigationBarTitleText": "佑米单词",
    "navigationBarTextStyle":"white",
    "enablePullDownRefresh": true
  }
}

小程序工具提供多类型商城/门店小程序制作,,,,,可视化编辑 1秒天生5步上线。。通过拖拽、拼接??榻峁剐〕绦蛏坛且趁,,,,,所看即所得,,,,,只需要美工就能做出细腻商城。。

  更多微信小程序相关资讯,,,,,请前往:/miniprogramschool/


【本站声明】
  1、本站文章中所选用的图片及文字泉源于网络以及用户投稿,,,,,由于未联系到知识产权人或未发明有关知识产权的挂号,,,,,若有知识产权人并不肯意我们使用,,,,,若是有侵权请连忙联系。。
  2、本网站差池文章中所涉及的内容真实性、准确性、可靠性认真,,,,,仅系客观性形貌,,,,,如您需要相识该类商品/服务详细的资讯,,,,,请您直接与该类商品/服务的提供者联系。。


KESION 金狮贵宾会软件

KESION 金狮贵宾会软件是海内领先的在线教育软件及私域社交电商软件服务提供商,,,,,恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等。。

KESION 一直通过手艺立异,,,,,提供产品和服务,,,,,助力企业向数字化转型,,,,,通过科技驱动商业刷新,,,,,让商业变得更智慧!



▼点击进入金狮贵宾会官网相识更多



上/下篇
  • 头脑王者辅助工具开发的实战教程

  • 包你答红包小程序开发

换一换相关推荐
精选内容
热门精选
金狮贵宾会·宾至如归-尊贵显赫 金狮贵宾会·宾至如归-尊贵显赫 金狮贵宾会·宾至如归-尊贵显赫
【网站地图】
微信小程序开发:简朴设置教程 - KESION 金狮贵宾会