什么是小程序?
先引用小龙哥的一句话来看看啥是小程序?
小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载。 - Allen Zhang(张小龙)
从程序猿的角度来说:小程序就是依赖于微信平台,利用小程序框架提供视图层描述语言WXML
、WXSS
,以及JavaScript
来实现一个具备原生体验的Web应用。微信小程序相当于基于微信平台造了一个React Native
的轮子,通过JS的跨平台性实现了一套代码跨平台部署、运行。
Hello World
工程结构
首先,我们先通过微信web开发者工具新建一个项目,项目建成后会自动生成下列文件。下文全部围绕这个新建的项目来简单的介绍一下小程序。
可以看出整个工程包括app.js
、app.json
、app.wxss
,以及pages
和utils
目录,后面我们一次介绍各个文件和目录的作用。
其中app.js
、app.json
、app.wxss
最为重要,他们为对整个小程序进行全局配置。
-
app.js
,声明小程序的整个生命周期、定义全局变量 -
app.json
,对整个小程序起全局配置的作用,规定小程序包括哪些页面、窗口的样式、底部tab栏的样式、网络超时事件、是否开启debug模式 -
app.wxss
,这里的wxss
类似于CSS,只不过是针对微信做了一部分拓展,定义了小程序的全局样式
而pages
目录下面每一子目录都代表了小程序中的一个页面,而每一个页面都由*.js
、*.json
、*.wxml
、*.wxss
组成,这里又出现了一个新的后缀wxml
,同时再次出现了wxss
,后面会解释他俩是啥用的。先解释一下,页面中的这四种文件是干啥用的?
-
*.js
,处理页面的逻辑 -
*.json
,处理页面的配置 -
*.wxml
,处理页面的结构 -
*.wxss
,处理页面的样式
为了减少配置同一个页面目录中的文件都需要以同一个名字命名,例如个人习惯将所有页面目录下面的文件都用index
命名。
*.json
中我可以配置什么?
上面有提到app.json
可以配置页面的全局配置,而pages目录下*.json
则可以配置对应页面window
选项(窗口的样式),那么我们到底可以配置哪些具体内容呢?
// 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
}
常用的配置都在这里了,根据配置的命名其实已经可以猜个大概啦,如果猜不出来可以参考文档“配置”
什么是wxml
?
工程中出现了一个新的后缀*.wxml
,而WXML(Weixin Markup Language)是微信小程序框架设计出来的一种标签语言,你可以直接把他理解成是微信定义了一套带有特殊事件、效果、属性的标签,但本质上和<div>
、<img>
、<a>
等相似。值得注意的是,在wxml
中也可以使用HTML的标签。
数据绑定
WXML中还是实现了现在比较流行的数据绑定的功能,省去了我们操作DOM元素的烦恼。WXML使用了Mustache
语法,即通过2个花括号来包裹某一个属性,通过修改调用JS来修改对象的属性,继而修改页面中dom元素的值。
<view>{{message}}</view>
Page({
data: {
message: 'Hello Mina!'
}
});
列表渲染
而除了提供数据绑定,它还提供了列表渲染、条件渲染、模板、事件、引用等功能。不过语法都比较简洁,有基础的同学基本上都可以快速看懂。
<!-- 列表渲染 -->
<view wx:for="{{array}}">{{item}}</view>
条件渲染
在处理条件渲染时需要注意,小程序中所有的条件判断表达式、true
、false
都需要使用{{}}
包裹,否则会按照字符串来处理。
<!-- 条件渲染 -->
<view wx:if="{{condition}}">HAHA</view