微信小程序教程之------基础前端篇--app.json

1、学习微信小程序需要具备的基础有----html 、css、 js、 ajax基础 、 简单的面向对象基础
2、微信小程序开发工具的安装，自己找官网，或者走这个链接 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=19021918
3、如何创建自己百度，
4、

• 文件夹有images、pages、utils、
  app.js、app.json、app.wxss，依次是图片文件夹，我们所有的页面，公共js，小程序逻辑，小程序的公共设置（比如导航条样式或者底部的tab菜单），小程序公共css样式表
  app.json的配置列项表

  • pages 必填 设置页面路径，每个新建的页面都得在里面配置
  • window----非必填----window设置默认页面的窗口表现，用于设置小程序的状态栏，导航条，标题，窗口背景色

• tabBar----非必填----设置底部tab菜单 networkTimeout ----非必填----设置网络超时时间

• debug----非必填----设置是否开启这个模式

• 接下来是代码示例在这里插入代码片{ "pages": [ "pages/index/index", "pages/logs/index" ], "window": { "navigationBarTitleText": "导航条的那个名字" }, "tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/logs/logs", "text": "日志" }] }, "networkTimeout": { "request": 10000, "downloadFile": 10000 }, "debug": true }

app.json的page的具体配置

• 接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。
• 每一项代表对应页面的【路径+ 文件名】信息
• 数组的第一项代表小程序的初始页面
• 小程序中新增/减少页面，都需要对 pages 数组进行修改。
• 文件名不需要写文件后缀，因为框架会自动去寻找路径.json,.js,.wxml,.wxss 的四个文件进行整合。

app.json 的window 配置

用于设置小程序的状态栏、导航条、标题、窗口背景色。

• navigationBarBackgroundColor 导航栏背景颜色
• navigationBarTextStyle----航栏标题颜色，仅支持 black/white默认白色
• navigationBarTitleText ----导航栏标题文字内容默认为空
• backgroundColor ----窗口的背景色默认#ffffff
• backgroundTextStyle----下拉背景字体、loading 图的样式，仅
  支持 dark/light 默认dark
• enablePullDownRefresh----是否开启下拉刷新，详见页面相关事件处理函数。默认否
• 例子{ "window":{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light" } }

**

app.json的tabBar

**
如果我们的小程序是一个多 tab 应用（客户端窗口的底部有 tab 栏可以切换页面），那么我
们可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

…
.
tabBar 是一个数组，只能配置最少 2 个、最多 5 个 tab
属性说明

• color----tab 上的文字默认颜色
• selectedColor ----tab 上的文字选中时的颜色
• backgroundColor ----tab 的背景色
• borderStyle----tabbar 上边框的颜色， 仅支持 black/white 默认white
• list ----底部菜单列表，见下表：list 属性说明，最少 2 个、最多 5 个 tab
  list参数列表
  都是必填
• pagePath----页面路径，必须在 pages 中先定义
• text ----tab 上按钮文字
• iconPath----图片路径，icon 大小限制为 40kb
• selectedIconPath ----选中时的图片路径，icon 大小限制为 40kb

**app.json 的networkTimeout **

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

• request —wx.request 的超时时间，单位毫秒
• connectSocket ----wx.connectSocket 的超时时间，单位毫秒
• uploadFile ----wx.uploadFile 的超时时间，单位毫秒
• downloadFile ----wx.downloadFile 的超时时间，单位毫秒

app.json的debug

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

page.json

Page 里面每个页面的.json 只能设置，page 页面会详细介绍
每一个小程序页面也可以使用.json 文件来对本页面的窗口表现进行配置。 页面的配置比 app.json 全局配置简单得多，只是设置 app.json 中的 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。 （意思是page.json的优先级更高一点）

Page 里面每个页面的.json 只能设置 window 相关的配置项，以决定本页面的窗口表现，所以无需写 window 这个键

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

app.js 配置，全局配置 js

app.js 可以不配置
App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。
object 参数说明：

• onLaunch ----生命周期函数–监听小程序初始化 ----当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
• onShow----生命周期函数–监听小程序显示 ----当小程序启动，或从后台进入前台显示，会触发 onShow
• onHide----生命周期函数–监听小程序隐藏 ----当小程序从前台进入后台，会触发 onHide
• 其他 任意的自定义方法----开发者可以添加任意的函数或数据到 Object 参数中，用 this 可以访问 ----自定义触发
• 前台、后台定义： 当用户点击左上角关闭，戒者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信戒再次打开小程序，又会从后台进入前台。只有当小程序进入后台一定时间，戒者系统资源占用过高，才会被真正的销毁。
• 示例App({ onLaunch: function() { // Do something initial when launch. }, onShow: function() { // Do something when show. }, onHide: function() { // Do something when hide. }, globalData: 'I am global data' })

getApp()

我们提供了全局的getApp() 函数，可以获取到小程序实例。 注意：在 page 中的 js 中使用

var appInstance = get App()
console.log(appInstance.globalData)  //i an global data

注意：
注意：
App() 必须在 app.js
中注册，且丌能注册多个。
不要在定义于 App()内的函数中调用 getApp()，使用 this 就可以拿到 app 实例。
不要在 onLaunch 的时候调用 getCurrentPage()，此时 page 还没有生成。
通过 getApp()获取实例之后，丌要私自调用生命周期函数。