微信小程序初学一周

7.12-7.17学习心得
初学的一个星期比较水，因为假期也有其他事要忙，还要去学车。所以没有记录学习，主要是刚刚有这个想法去记录。不过还好，之前的学习有记笔记，也有代码练习。只要整理一下再上传就好。
我先是在前人的学习心得里学习了app.js、app.json、app.wxss、app.wxml的作用，里面的属性。

app.json ##

官方API：我们使用app.json文件来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
app.json 配置项列表

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

心得：目前的学习只用到了pages、window、tabBar三个属性。

---

（1）pages（Array）
官方：接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。
文件名不需要写文件后缀，因为框架会自动去寻找路径.json,.js,.wxml,.wxss的四个文件进行整合。
心得：配置小程序的页面，必填。第一行为初始页面。定义或删除页面需要在pages里修改。接受字符串数组，每一项为【路径+文件名】，第一项为初始页面。文件名不需要写后缀，框架可以自己寻找路径，只在app.json中进行配置。

---

（2）window
官方：用于设置小程序的状态栏、导航条、标题、窗口背景色

属性 类型 默认值 描述 navigationBarBackgroundColor HexColor 000000 导航栏背景颜色，如”#000000” navigationBarTextStyle String white 导航栏标题颜色，仅支持 black/white navigationBarTitleText String 导航栏标题文字内容 enablePullDownRefresh Boolean false 是否开启下拉刷新，详见页面相关事件处理函数。

心得：具体使用官方API很清晰了，在其他页的json中，因为只需要改window这个属性，所以不用widow{}的形式配置，只需要直接修改window中的属性即可。

---

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

Tip：

当设置 position 为 top 时，将不会显示 icon
tabBar 是一个数组，只能配置最少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 时，此参数无效

心得：这里的属性还是要在实践中去感受，现在还没有应用太多。在之后的学习中如果有什么需要注意的再来修改。

---

剩下的两个属性因为还没有应用过，所以先不总结了。
pages.json中只需要配置window就好！

---

之后还学习了app.js,开始做页面功能的时候在.js里进行，也需要注册。用Page（）函数来注册知道了他是入口文件，对app进行注册并且对对生命周期函数监听。包括onLaunch（）、onShow（）、onHide（）等函数，对处在不同生命周期的函数进行监听并执行一些功能。

---

App() 注册程序
App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。

object参数说明：

属性 类型 描述 触发时机 onLaunch Function 生命周期函数–监听小程序初始化 当小程序初始化完成时，会触发 onLaunch（全局只触发一次） onShow Function 生命周期函数–监听小程序显示 当小程序启动，或从后台进入前台显示，会触发 onShow onHide Function 生命周期函数–监听小程序隐藏 当小程序从前台进入后台，会触发 onHide onError Function 错误监听函数 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息 其他 Any 开发者可以添加任意的函数或数据到 Object 参数中，用 this 可以访问

前台、后台定义： 当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。需要注意的是：只有当小程序进入后台一定时间，或者系统资源占用过高，才会被真正的销毁。

关闭小程序(基础库版本1.1.0开始支持)： 当用户从扫一扫、转发等入口(场景值为1007, 1008, 1011, 1025)进入小程序，且没有置顶小程序的情况下退出，小程序会被销毁。 小程序运行机制在基础库版本 1.4.0 有所改变： 上一条关闭逻辑在新版本已不适用，详情

示例代码：

App({
onLaunch: function(options) {
// Do something initial when launch.
},
onShow: function(options) {
// Do something when show.
},
onHide: function() {
// Do something when hide.
},
onError: function(msg) {
console.log(msg)
},
globalData: ‘I am global data’
})

onLaunch, onShow 参数

字段 类型 说明 path String 打开小程序的路径 query object 打开小程序的query scene Number 打开小程序的场景值 shareTicket String shareTicket，详见 获取更多转发信息 referrerInfo Object 当场景为由另一个小程序打开时，返回此字段 referrerInfo.appId String 来源小程序的 appId referrerInfo.extraData Object 来源小程序传过来的数据场景值详见。

getApp()
我们提供了全局的 getApp() 函数，可以获取到小程序实例。
// other.js
var appInstance = getApp()
console.log(appInstance.globalData) // I am global data
注意：
App() 必须在 app.js 中注册，且不能注册多个。
不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就可以拿到 app 实例。
不要在 onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成。
通过 getApp() 获取实例之后，不要私自调用生命周期函数。

---

page() 注册页面
Page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。

object 参数说明：

属性 类型 描述 data Object 页面的初始数据 onLoad Function 生命周期函数–监听页面加载 onReady Function 生命周期函数–监听页面初次渲染完成 onShow Function 生命周期函数–监听页面显示 onHide Function 生命周期函数–监听页面隐藏 onUnload Function 生命周期函数–监听页面卸载 onPullDownRefresh Function 页面相关事件处理函数–监听用户下拉动作 onReachBottom Function 页面上拉触底事件的处理函数 onShareAppMessage Function 用户点击右上角转发 onPageScroll Function 页面滚动触发事件的处理函数 其他 Any 开发者可以添加任意的函数或数据到 object 参数中，在页面的函数中用 this 可以访问

示例代码：

//index.js
Page({
data: {
text: “This is page data.”
},
onLoad: function(options) {
// Do some initialize when page load.
},
onReady: function() {
// Do something when page ready.
},
onShow: function() {
// Do something when page show.
},
onHide: function() {
// Do something when page hide.
},
onUnload: function() {
// Do something when page close.
},
onPullDownRefresh: function() {
// Do something when pull down.
},
onReachBottom: function() {
// Do something when page reach bottom.
},
onShareAppMessage: function () {
// return custom share data when user share.
},
onPageScroll: function() {
// Do something when page scroll
},
// Event handler.
viewTap: function() {
this.setData({
text: ‘Set some data for updating view.’
})
},
customData: {
hi: ‘MINA’
}
})

this.setData{}中的内容相当于在data中定义过。