chiyiw's 小黑屋

微信小程序开发试水

我不知道微信小程序会不会火，本着好奇的性格，试了一把水。 最好的教程是官方文档：官方文档

开发环境

官方提供了开发环境，该工具基于node-webkit打造，下载地址在这里：微信web开发者工具
暂时只提供windows和mac版，但是基于NW的话Linux理论上是没有问题的，环境的安装非常简单。

新建工程

第一次使用需要使用微信扫码登录，猜测是方便之后将使用该账号调用测试接口。 开始新建工程了，点击“+”就能添加一个新项目，没有内测APPID就不填，填写名称和路径，这个时候我发现一个Bug，Windows下，如果名称和路径相同，比如名称为Hello，工程保存路径为C:\Workspace\Hello，后面生成的项目就会出错，所以项目名和路径不要一样。注意选择“在当前目录中创建quick start项目”。

目录结构

.
├── app.js
├── app.json
├── app.wxss
├── pages
│   ├── index
│   │   ├── index.js
│   │   ├── index.wxml
│   │   └── index.wxss
│   └── logs
│       ├── logs.js
│       ├── logs.json
│       ├── logs.wxml
│       └── logs.wxss
└── utils
    └── util.js

其中，pages下为页面，每一个页面是一个独立的单位，进入开发工具我们看到的就是index页面，就如web页面一样，每个页面都包含HTML, CSS, Javascript，只不过微信改了个名字，它们分别叫wxml, wxss, js。json作为配置文件使用，你知道的，它本身就是 js。

实际上，微信小程序是对web页面的封装，与Chrome插件是同一思路。但它封装了html和body，封装了link和script，只需要把 css 和 js 放到同一目录下使用同一名称即可引用调用了，这是我觉得它比Chrome做得好的地方。最终效果上，比起普通WEB程序，它多了众多的本地接口和微信提供的接口，让其具有开挂的权限和功能（比如直接调用微信支付，获取用户信息），能做到的事情更多。

带着这个思路，结构就相当清晰了，logs下和index一样，可以忽略，utils下的保存公用的js方法和代码，app.* 是适用于全局的代码。

页面逻辑

从index页面入手，似乎更加容易一些，对比页面看index.wxml代码

<!--index.wxml-->
<view class="container">
  <view bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

view、text是普通的自定义xml标签，任何有过动态页面开发的朋友都能容易的看懂{{}}之间的是一个变量，运行时后端替换为具体内容，而这个值由谁提供？由index.js提供，下面是index.js的代码

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })
  }
})

index.js代码中，页面整个是一个Page对象，由两部分组成，data和方法，data中的变量对应于wxml中{{}}的变量，可以是单变量，对象和数组。变量的值可以直接指定初始值，也可以通过调用this.setData()来赋值。方法分两种，系统触发方法和自定义方法，onLoad属于系统方法，在页面加载时调用。bindViewTap是自定义方法，在index.wxml中有<view bindtap="bindViewTap" class="userinfo">即表示当该view被点击时调用bindViewTap方法，这种数据和方法的绑定策略非常方便，让我想到了微软的MVVM，而Android的 ((Button)findViewById(R.id.btn)).setOnClickListener() 显得繁琐而复杂。

页面跳转：wx.navigateTo({url: '../logs/logs'})就跳转到了logs目录下的logs.wxml，这些页面的定义在app.json中：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

同时，json中还包括页面的窗口属性，背景色，导航栏信息等，要添加新的页面，也需先在此注册。具体可以查看微信开发者文档-配置。

更多例子：
腾讯云上的结合后端的例子
Github上先行者们的贡献

现在还只有内测开发者才能在真机上体验，小程序开发入门远比Android和ios易，期待应用的审核能够保证质量的上乘，否则app泡沫可能来得更快。