微信小程序开发-从起步到放弃

最近凑热闹试着开发微信的小程序, 从开始到入坑再到放弃, 写个博客以示纪念

官方文档在这里

---

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&