微信小程序,简称小程序,英文名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搭建。
要点笔记:
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即可。