微信小程序开发:简朴设置教程包括对小程序全局设置,,,,,包括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 时,,,,,此参数无效 |
可以设置种种网络请求的超时时间。。
属性说明:
| 属性 | 类型 | 必填 | 说明 |
|---|---|---|---|
| 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/
KESION 金狮贵宾会软件
KESION 金狮贵宾会软件是海内领先的在线教育软件及私域社交电商软件服务提供商,,,,,恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等。。KESION 一直通过手艺立异,,,,,提供产品和服务,,,,,助力企业向数字化转型,,,,,通过科技驱动商业刷新,,,,,让商业变得更智慧!
起步 最近直播答题火热,,,,,群里也经??吹奖绕次⑿判〕绦颉锻纺酝跽摺。。我较量笨,,,,,凭纯答题只到了黑金段位。。鉴于本周刚刚点亮了网络抓包的手艺,,,,,于是想试着通过这个来做一个辅助...
包你答红包小程序也是一种问答式小程序开发案例,,,,,以问答口令的形式宣布红包,,,,,从而提高社交互动性,,,,,爆发裂变效果。。...