最近凑热闹试着开发微信的小程序, 从开始到入坑再到放弃, 写个博客以示纪念
1. 目录结构
├─pages
│ ├─index
│ │ ├─index.wxml
│ │ ├─index.wxss
│ │ └─index.js
│ └─logs
├─template
│ ├─template.wxml
│ ├─template.js
│ └─template.wxss
├─app.json
├─app.wxss
└─app.js
小程序的每一个界面的主要呈现是”page”, 相当于安卓中的”Activity”. 在小程序的根目录下的 app.xml app.wxss app.json
是整个小程序的公共文件.
其中:
app.json
是小程序配置文件 ( 相当于apk中的 AndroidManifest
);
app.wxss
是全局样式表, app.js
是全局js.
2. 配置文件
全局配置文件 app.json
记录了整个小程序的配置, 小程序中每一个能够呈现的页面 (Page) 都需要在 app.json 中注册 , app.json 也可以配置小程序的窗口(Window 包括了小程序页面上面的导航栏)样式
app.json
文件的语法是 json
语法, 文件中中使用一个 key
为pages 的数组来记录页面, 使用 key
为window 的数组保存小程序的窗口配置
{
"pages":[
"pages/index/index",
"pages/active/active",
"pages/details/details",
"pages/search/search",
"pages/cashier/cashier",
"pages/checkout/checkout",
"pages/status/status"
],
"window":{
"navigationBarBackgroundColor": "#00aaff",
"navigationBarTitleText" : "一个Demo",
"navigationBarTextStyle":"#fff",
"enablePullDownRefresh" : false
}
}
3. 布局文件 wxml
wxml
是微信小程序的布局文件的后缀名, 其本质上是一个xml文件( 类似 apk 的布局文件 xml). 可以使用微信小程序提供的 组件库 来组建布局.
在微信小程序中, 页面布局中的数据是可以动态指定的. 为页面设置数据的方法是数据绑定, 而不是像web中那样使用DOM对象来动态设置. (*微信小程序中没有DOM对象.)
在wxml中可以使用 Mustache 语法(双大括号)
来实现绑定数据/动态渲染的功能. 查看微信小程序文档
<view>{
{
viewData}}</view>
<!--这个view显示的内容是由变量viewData指定-->
<view wx:if&