微信小程序初探

微信小程序，简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。2017年1月9日，张小龙在2017微信公开课Pro上发布的小程序正式上线。

前言：

距离微信小程序发布已经过去很长一段时间了，怀着只求一知半解的心态来初探一下小程序，并利用小程序API做出一个小玩意儿，俯身亲耳以请各位大牛提出不足之处。这段时间对于小程序的学习是挺囫囵吞枣的，只是对小程序有着一些初步的了解，下面是对学习过程的一些梳理总结。

初探：

1.小程序的组成主要由以下四种类型文件：

.js　　　JavaScrip文件
.json　　项目配置文件，负责窗口颜色等等
.wxss　　类似HTML文件
.wxml　　类似CSS文件

2.小程序根目录下用app来命名的上述四种类型文件，就是程序入口文件，四个文件对应介绍如下：

app.json　　必须要有这个文件，配置文件入口。所有的页面都需要添加在此文件的pages中，第一条记录为 进入的首页。此文件还可以设置窗口的颜色，底部导航菜单等。
app.js　　　必须要有这个文件，可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量等。
app.wxss　　不必须有这个文件，可以定义全局的css样式。
app.wxml　　不必须有这个文件，并不是首页界面。

3.小程序的基本函数如下：

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

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

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

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

4.更多小程序API请参考官方文档。
点击传送门

实践：

通过实现一个数字爆炸小游戏加深了解，也是对初探小程序的一个完美终结。功能实现有单机版和联网版，单机版只能本地使用，联网版需要后台部分通过简单的spring-boot搭建。

数字爆炸小程序代码github地址

要点笔记：

1.js文件中page中方法data为初始化数据，可以在wxml文件中通过来获取，也可在js定义的方法中通过setData进行修改。

2.传值，可以通过在wxml中使用data-id传值，在方法中可以获取date-id的值。
getNumJson: function (e){
　var numjson = e.currentTarget.dataset.id;
}

3.多参传值可以利用json进行传输，方法接收json字符串后通过JSON.parse转换成含有参数的对象。

4.页面跳转，js中使用下面方法进行跳转，此方法会销毁原page。
wx.redirectTo({
　　url: ‘../boom/boom’
})
当页面在tabbar时，用此方法不会跳转，应使用：
wx.switchTab({
　　url: ‘../index/index’
})

5.图片作为页面背景时，background-image 只能用网络url或者base64，图片的base64可以通过网页在线转换。

6.隐藏标签布局可以使css样式中 display: none或者在标签中设置 hidden=’true’，通过使用class=’‘在js中设置demo值来指定对应的css，这样可以在function中通过修改demo值来改变成不同的css。

7.普通方法中修改变量使用:
baseInput: function (e) {
　　this.setData({
　　　　baseNum: e.detail.value
　　})
}
wx.request请求中直接使用this已经是wx.request的this了，所以此时需要在wx.request中使用，则需要在wx.request外部定义 var that = this; 在wx.request中再使用that代替this即可。