什么是小程序
小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的 梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念， 用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又 无需安装卸载。
—— Allen Zhang（张小龙）
小程序就是依赖于微信平台，利用小程序框架提供视图层描述语言WXML、WXSS，以及JavaScript来实现一个具备原生体验的web应用。
开发工具
使用的是微信开发者工具v1.02.1802080
项目结构
主要介绍一下app.js、app.json、app.wxss
- app.js声明小程序的整个声明周期、定义全局变量
- app.json，对整个小程序的一个全局的配置（如规定小程序包括哪些页面、窗口的样式等等）
- app.wxss，类似于CSS。定义了全局的一些小程序的样式
app.json文件的常用配置如下：
// app.json
{
// 定义小程序中有哪些页面
"pages":[
"pages/index/index",
"pages/logs/logs"
],
// 窗口的样式
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Demo",
"navigationBarTextStyle":"black",
"enablePullDownRefresh": true
},
// 底部tab的内容和样式
"tabBar": {
// tab的具体内容
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/logs/logs",
"text": "日志"
}
]
},
// 设置不同请求的网络超时
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
// 是否开启debug模式，开启debug模式之后可以在微信开发者工具的控制台中看到整个APP，以及每个页面的生命周期日志
"debug": true
}
pages用来放置各个界面
utils用来放置工具类
而pages目录下面每一子目录都代表了小程序中的一个页面，而每一个页面都由.js、.json、.wxml、.wxss组成，这里又出现了一个新的后缀wxml，同时再次出现了wxss，后面会解释他俩是啥用的。先解释一下，页面中的这四种文件是干啥用的？
- *.js，处理页面的逻辑
- *.json，处理页面的配置
- *.wxml，处理页面的结构
- *.wxss，处理页面的样式
什么是WXML
工程中出现了一个新的后缀*.wxml，而WXML(Weixin Markup Language)是微信小程序框架设计出来的一种标签语言，你可以直接把他理解成是微信定义了一套带有特殊事件、效果、属性的标签，但本质上和<div>、<img>、<a>等相似。值得注意的是，在wxml中也可以使用HTML的标签。
个人认为是可以类比vue中的双向数据绑定、条件渲染。列表渲染。
事件
这里单独说一下WXML中所提到的事件，小程序框架通过事件来保持视图层和逻辑层的通讯，例如，用户进行点击行为，点击行为触发了点击事件，进而触发逻辑层中所绑定的函数。
和我们在浏览器中开发JS有区别的是，这里的事件分两种：冒泡事件和非冒泡事件。其中冒泡事件包括touchstart、touchmove、touchcancel、touchend、tap、longtap，其余未提及的事件或者自定义事件均为非冒泡事件。
而在标签绑定事件函数存在两种方式bind、catch，其中bind的事件绑定不会阻止冒泡事件向上冒泡，catch则会阻止冒泡事件向上冒泡相当于直接在函数中执行e.stopPropagation()来阻止事件冒泡。
什么是WXSS？
WXSS(WeiXin Style Sheets)是一套样式语言，我们可以简单理解成CSS的一个拓展，它增加了两个特性：
- 尺寸单位
- 样式导入
在WXSS中引入了一个新的单位rpx(responsive pixel)，根据屏幕宽度的不同rpx代表的实际px也不同。WXSS规定一个屏幕的宽度为750rpx，750刚好是iphone6的物理宽度大小，也是目前大多数设计师出设计稿的标准宽度。也就是说当我们拿到设计稿的时候，我们不需要通过百分比、rem，而是直接测量出设计稿上的像素大小并使用微信提供的rpx就可以满足多屏适配的问题。
除了rpx，WXSS还提供了目前大部分CSS预编译语言所提供的是样式导入，即将外联样式导入当当前文件中
/** common.wxss **/
.small-p {
padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
padding:15px;
}
APP
我们可以通过App()来注册一个小程序，并指定它的生命周期
App({
// 监听小程序初始化，只会在小程序注册时调用，其中返回值中包括了`path`小程序路径、`query`打开小程序的query、`scene`场景值
onLaunch: function (options) {},
// 监听小程序显示，当小程序启动或者从前台进入后台时会调用该方法
onShow: function(options) {},
// 监听小程序隐藏，当小程序从前台进入后台时调用
onHide: function() {},
// 监听小程序的错误，当小程序发生错误时触发，类似`window.onerror`
onError: function() {},
// 全局对象
globalData: {}
});
// app本身是一个单例在一个程序中只有一个，所以在其它文件中如果想要使用APP对象需要通过下列方法调用
var appInstance = getApp();
PAGE
和注册小程序类似，注册页面可以通过Page()去指定页面的生命周期、事件函数以及初始化数据。
Page({
// 初始化的页面数据
data: {
text: "初始化数据"
},
// 页面加载时触发，这里的加载指的是第一次加载
onLoad: function(options) {},
// 页面渲染完成时触发
onReady: function() {},
// 页面显示时触发，每次打开都会触发
onShow: function() {},
// 页面隐藏时触发
onHide: function() {},
// 页面卸载时触发
onUnload: function() {},
// 用户下拉时触发
onPullDownRefresh: function() {},
// 用户上拉触底时触发
onReachBottom: function() {},
// 点击分享后触发
onShareAppMessage: function () {},
// 事件绑定函数
viewTap: function() {
// 修改页面数据
this.setData({
text: '啦啦啦啦啦'
})
},
// 自定义的对象
customData: {
hi: 'MINA'
}
})
大量的组件和API
组件
API
网友评论