|
微信小程序从发布开始，可谓赚足了眼球，一度引发了开发界“全民学JavaScript”的梗。
为了跟上时代步伐，我们NOW直播团队也在发布后第一时间尝鲜，本文就来扒一扒这几天试水小程序开发的那些事。
入门
准备工作
想要开发微信小程序，首先必须要有一个微信公众平台小程序的帐号（目前帐号只有内测邀请唯一途径），此帐号用于获取app id、secret id、添加开发者等管理后台操作。
然后你需要下载官方提供的微信web开发者工具，这是一个集成了编码、调试、预览、发布功能的一个IDE。
编码功能：
调试功能，集成了chrome开发者工具，可以实现样式预览、JS断点调试等：
发布、预览功能，可以在此上传你的程序，预览生成二维码，提供在手机微信上预览小程序的功能；另外，开发者工具还集成了ES6编译、代码压缩等基础代码构建功能：
开发入门
对于哪怕是只有一点点web前端经验的开发者来说，微信小程序的入门门槛简直是低到不能再低了。
一个小程序的主要文件目录简洁到如下：
├─ app.json
├─ app.wxss
├─ app.js
└── pages
├─ index
│ ├─ index.wxml
│ ├─ index.wxss
│ └─ index.js
└─ my-page
├─ my-page.json
├─ my-page.wxml
├─ my-page.wxss
└─ my-page.js
一个小程序大体上分为两大块：
应用实例
小程序会读取根目录的app.json，app.js，app.wxss生成程序实例，当然样式文件不是必需的。
程序配置app.json
{
"pages":[
"pages/index/index"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
在这个文件里可以针对以下内容作小程序的全局配置：
-
下拉刷新行为（禁用下拉、下拉文字、图标、颜色），下图是典型的下拉刷新效果：
逻辑脚本app.js
每一个小程序都是通过App({/*configs*/})这样一个App方法来注册的，在其具体的配置中，我们可以监听并处理程序级的生命周期函数、声明全局变量。比如，需要设置程序启动、显示时的一些操作，设置一些程序全局的数据、变量、方法，都可以在这里完成。
App({
onLaunch: function () {
},
global: {
data: null
}
})
在app.js里声明的属性及方法，都可以在小程序的任意页面里访问到：
var app = getApp()
Page({
doSth: function() {
console.log(app.globalData);
}
})
app.js里支持的的程序级的生命周期回调包括：
-
onLaunch 小程序初始化完成时触发
-
onShow 启动，从后台进入前台显示时触发
-
onHide 从前台进入后台时触发
页面
一个页面简单讲可以理解成小程序的一个完整界面单元，每一次完整的界面切换就是page之间的跳转，下图演示一个典型的页面切换、回退过程：
一个页面的组成部分包括：
-
视图层
-
逻辑层
-
JS 控制页面行为及数据变化
-
JSON 页面级配置，非必需
视图层与逻辑层的关系：数据驱动 + 事件绑定
视图层与逻辑层统一通过数据和事件相互联系起来，用一句话描述就是：数据驱动。
如果你有使用过React、Vue(或其他MVVM框架)等，对于“数据驱动”肯定一点都不陌生了，没错，小程序毫无疑问吸收了这一开发理念。
来看看一个简单页面的代码：
<view bindtap="bindViewTap" class="userinfo">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}"></image>
<text class="userinfo-nickname">
{{userInfo.nickName}}
</text>
</view>
Page({
data: {
userInfo: {
nickName: 'test',
avatarUrl: 'https://a.com/test.png'
}
},
bindViewTap: function() {
console.log('触发了tap');
}
})
这段代码实现的是一个简单的页面效果：
可以看到出：
每一个“页面”，都是通过JS逻辑层的Page({/*configs*/})方法来注册的；
WXML统一通过{{data}}花括号的方式来引用逻辑层的数据；
视图层通过bind+event key来和逻辑层的事件回调实现绑定；
当逻辑层需要控制视图层变化时，统一通过关键函数setData来驱动数据变化，间接改变视图，如：
Page({
data: {
userInfo: {
nickName: 'test',
avatarUrl: 'https://a.com/test.png'
}
},
bindViewTap: function() {
console.log('触发了tap');
this.setData({
userInfo: {
nickName: 'test',
avatarUrl: 'https://a.com/change.png'
}
});
}
})
上述代码中，setData调用后，页面图片就变化了。setData与React中的setState真的是有相当的相似之处。
其实，微信小程序是完全不支持DOM操作的，千万不要想着手动去控制DOM结构。简单的说，HTML5开发中BOM的那一整套API都没法使用，包括window、document ......
WXML在近似于HTML外，吸收了很多其他模板标记语言的优点，例如支持:
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
<view wx:for="{{items}}">
{{index}}: {{item.message}}
</view>
事件绑定（交互回调）
前面已经提到过事件绑定，前端人对于事件还是非常熟悉的，事件是视图层到逻辑层的通讯方式。
小程序支持的事件类型包括有：
-
touchstart 手指触摸
-
touchmove 手指触摸后移动
-
touchcancel 手指触摸动作被打断，如来电提醒，弹窗
-
touchend 手指触摸动作结束
-
tap 手指触摸后离开
-
longtap 手指触摸后，超过350ms再离开
和web事件类似，小程序也支持冒泡事件和非冒泡事件，在绑定过程中通过bind(冒泡)和catch(非冒泡)区分：
<view id="outter" bindtap="handleTap1">
outer view
<view id="middle" catchtap="handleTap2">
middle view
<view id="inner" bindtap="handleTap3">
inner view
<view id="inner-inner" bindtap="handleTap4">
inner-inner view
</view>
</view>
</view>
</view>
Page({
data: {
},
handleTap1: function () {
console.log(1);
},
handleTap2: function () {
console.log(2);
},
handleTap3: function () {
console.log(3);
},
handleTap4: function () {
console.log(4);
}
})
上述程序中，middle view是关键分割点，点击inner-inner view，将会依次显示4，3，2，因为middle view中使用了catch来绑定事件并阻止事件往上层冒泡，middle view及其子组件的tap冒泡事件都会在它这一层被截断。
丰富的组件
WXML文件中，组件是视图的基本组成单元，类似HTML的提供的各种标签，小程序提供了非常全面的组件：
-
弹窗
-
loading
-
地图展示
-
画布(canvas)
......
样式
关于样式，其实没有什么好说的，作为小程序的UI描述语言，几乎与CSS无异，写法、支持的属性也一样。不过，样式文件不是必需的，并且，页面级的样式会优先于全局样式，即index.wxss的样式声明优先级会高于app.wxss。
页面的切换和生存周期
前面有说到，页面作为小程序的界面单元，那么肯定就有页面间的切换、跳转、后退等。
邀请
原作者: 模板之家
来自: 网络收集
| 
