微信小程序试水

微信小程序用于开放了个人开发。可蛋疼的事情是，首先注册需要国内的手机号接受验证码以及通过绑定国内银行卡进行身份验证，对于国内身份证已经过期的我来说，简直是个噩耗。
好在朋友帮忙搞定把我加到了开发号中，终于可以尝鲜体验一把。
但是注意应用上线还是需要通过备案的域名以及服务器，海外党不亲自回趟国办理备案基本无能为力，这种繁琐的流程极大打击了开发者的积极性。

总体来说微信小程序是一个封闭的H5框架，使用微信提供的api以及dom元素构建vc。每个页面对应一个js文件，一个wxsml文件(view),以及一个wxss、
文件(style). js文件作为controller，在这个js中完成渲染view需要的变量的定义，以及定义用户交互时间发生之后的处理函数。wxsml中用微信定义的view渲染并嵌入变量。

整个小程序有一个总的app.js作为小程序的入口。app.json中定义总的页面元素，window元素，其对应的路径，图表之类。app.wxss中则是总的style。

比如我例子中的小程序有两个tab，一个是index，一个是logs。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
☁ 10:59PM tokyo_dev  tree
.
├── app.js
├── app.json
├── app.wxss
├── image
│   ├── avatar.png
│   ├── girl.png
│   └── me.png
├── pages
│   ├── index
│   │   ├── index.js
│   │   ├── index.wxml
│   │   └── index.wxss
│   └── logs
│       ├── logs.js
│       ├── logs.json
│       ├── logs.wxml
│       └── logs.wxss
└── utils
    └── util.js

在app.json中可以定义tab的路径和图表。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "东京健康外卖",
    "navigationBarTextStyle":"black"
  },
 "tabBar": {
    "color": "#dddddd",
    "selectedColor": "#3cc51f",
    "borderStyle": "white",
    "backgroundColor": "#ffffff",
    "list": [{
      "pagePath": "pages/index/index",
      "iconPath": "image/girl.png",
      "selectedIconPath": "image/girl.png",
      "text": "菜单"
    }, {
      "pagePath": "pages/logs/logs",
      "iconPath": "image/me.png",
      "selectedIconPath": "image/me.png",
      "text": "我"
    }]
  }
}

很容易理解，我也不多废话了。

再来看page/index/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//index.js
//获取应用实例
var app = getApp()

var items =  [{"thumb": "https://pics.dmm.co.jp/mono/actjpgs/thumbnail/katou_natumi2.jpg", "oto": "katou_natumi2", "yomi": "\u304b\u3068\u3046\u306a\u3064\u307f2", "gyou": "ka", "id": 1000617, "name": "\u52a0\u85e4\u306a\u3064\u307f"}, {"thumb": "https://pics.dmm.co.jp/mono/actjpgs/thumbnail/kanou_momoka.jpg", "oto": "kanou_momoka", "yomi": "\u304b\u306e\u3046\u3082\u3082\u304b", "gyou": "ka", "id": 1000734, "name": "\u53f6\u6843\u82b1"}, {"thumb": "https://pics.dmm.co.jp/mono/actjpgs/thumbnail/kasuga_momo.jpg", "oto": "kasuga_momo", "yomi": "\u304b\u3059\u304c\u3082\u3082", "gyou": "ka", "id": 1000904, "name": "\u6625\u65e5\u3082\u3082"}, {"thumb": "https://pics.dmm.co.jp/mono/actjpgs/thumbnail/kaduki_manaka.jpg", "oto": "kaduki_manaka", "yomi": "\u304b\u3065\u304d\u307e\u306a\u304b", "gyou": "ka", "id": 1000956, "name": "\u83ef\u6708\u307e\u306a\u304b"}, {"thumb": "https://pics.dmm.co.jp/mono/actjpgs/thumbnail/kaduki_aika.jpg", "oto": "kaduki_aika", "yomi": "\u304b\u3065\u304d\u3042\u3044\u304b", "gyou": "ka", "id": 1001037, "name": "\u6a3a\u6708\u611b\u83ef"}, {"thumb": "https://pics.dmm.co.jp/mono/actjpgs/thumbnail/kaede_himeki.jpg", "oto": "kaede_himeki", "yomi": "\u304b\u3048\u3067\u3072\u3081\u304d", "gyou": "ka", "id": 1001357, "name": "\u6953\u59eb\u8f1d"}, {"thumb": "https://pics.dmm.co.jp/mono/actjpgs/thumbnail/kazami_nagisa.jpg", "oto": "kazami_nagisa", "yomi": "\u304b\u3056\u307f\u306a\u304e\u3055", "gyou": "ka", "id": 1001630, "name": "\u98a8\u898b\u6e1a"} ]
Page({
  data: {
    items: []
  },
  onLoad: function () {
    var that = this;
    wx.setNavigationBarTitle({
        title: '外卖'
    });
    that.setData({items: items});
  }
})

这里使用setData来定义要嵌入view的变量。 这个data可以来自外部api。这个外部api只能用wechat封装好的wx.request调用。
wx.request(err,res)是个典型的callback函数，我们也可以用第三方的裤将其改写成promise形式。这里也不废话了。

在看view。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!--index.wxml-->
<view class="container">
    <block wx:for-items="{{items}}">
        <view class="flex item">
            <view class="item_left">
                <image src="{{item.thumb}}"/>
            </view>
            <view class="flex_auto item_middle">
                <view><text class="title">{{item.name}}</text></view>
                <view><text class="sub_title">{{item.yomi}}</text></view>
            </view>
            <view class="item_right">
                <view><text class="action">出张中</text></view>
            </view>
        </view>
    </block>
</view>

dom怎么摆看文档就行了。

最后效果图一张。

源代码

wechat