微信小程序上手

这两天移动互联网领域发生了一件大事，微信发布了小程序，然后网上突然涌出了诸多教程，貌似大家对微信小程序的功能与想象空间兴奋不已，我免不了俗，搭建个简易的开发环境玩一玩。

搭建开发环境

按官方教程，是得先获得内测资格，取得微信小程序appid后，才可进行小程序开发的。很不幸，我没获取内测资格，但随便一搜，就找到网上的破解教程，我就学习玩一玩，就直接破解吧。

首先下载0.7版的微信web开发工具

百度: https://pan.baidu.com/s/1pLxqFzH （密码: bwt9）

安装完毕后，打开开发工具用手机微信扫描登录进去，然后就可以关闭微信web开发工具，删除刚安装的微信web开发工具。你没有听错，就是删除，0.7版本的作用仅仅是用于登录，呵呵。

再下载0.9版的微信web开发工具

百度: https://pan.baidu.com/s/1pLTKIqJ （密码: iswg）

再完成安装。

完成后需替换3个文件：

• 使用https://raw.githubusercontent.com/gavinkwoe/weapp-ide-crack/master/createstep.js这个文件替换开发工具里/Resources/app.nw/app/dist/components/create/createstep.js。
• 使用https://raw.githubusercontent.com/gavinkwoe/weapp-ide-crack/master/projectStores.js这个文件替换开发工具里/Resources/app.nw/app/dist/stroes/projectStores.js。
• 使用https://raw.githubusercontent.com/gavinkwoe/weapp-ide-crack/master/asdebug.js这个文件替换开发工具里/Resources/app.nw/app/dist/weapp/appservice/asdebug.js。

之后打开开发工具，然后点添加项目创建一个新的小程序项目

create_wx_app.png

然后填写项目细节，我没有内测帐号，就随便填appid, 项目名称也随便填，本地开发目录选个空目录就好了。

create_wx_app_detail.png

然后项目就打开了。

wx_app_ide.png

不一会儿提示有更新，微信web开发工具升级了，提示重启，那么就重启吧。重启后要重替换一下asdebug.js文件，这样开发环境就算OK了。

分析程序结构

先看一下程序结构

wx_app_src_struct.png

其中app.js是用来注册一个小程序的，主要用来响应应用生命周期事件，还可以保存应用的全局状态，详细文档可参考http://wxopen.notedown.cn/framework/app-service/app.html。

app.json是应用的全局配置文件，主要用来配置应用所包含的页面、设置应用全局样式、多tab应用的配置、各种网络请求的超时时间、是否开启调试等，详细文档可参考http://wxopen.notedown.cn/framework/config.html。

app.wxss是应用的全局样式文件，样式文件的规范可参考http://wxopen.notedown.cn/framework/view/wxss.html。

pages目录下每个目录都是一个独立的页面，每个页面的结构都很类似。

页面目录中的*.js定义了该页面的处理逻辑，可以定义初始化数据、响应页面的生命周期事件、定义视图层要用的事件处理函数。详细文档可参考http://wxopen.notedown.cn/framework/app-service/page.html。在这里可以调用微信提供的各种API，API参见http://wxopen.notedown.cn/api/，看样子还是挺丰富的。

页面目录中的*.wxml定义了该页面的视图层，用于将逻辑层的数据展现，同时将组件的某些用户操作绑定至事件处理函数。详细文档参见http://wxopen.notedown.cn/framework/view/wxml/。可用的组件文档参见http://wxopen.notedown.cn/component/。

页面目录中的*.wxss定义了该页面用到的样式。

简单分析示例代码

app.js

//app.js
App({
  onLaunch: function () {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo:function(cb){
    var that = this;
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo;
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      });
    }
  },
  globalData:{
    userInfo:null
  }
})

这个代码比较简单。

• 响应应用的启动事件，在其中调用微信API读取本地存储中的logs值，往里插入一条当前时间后，再存回本地存储的logs值
• 提供一个getUserInfo方法，便于其它页面快捷地获取用户信息
• 为了减少调用微信API的次数，将获取到的用户信息保存在全局变量中

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
      })
      that.update()
    })
  }
})

上述代码也很简单。

• 定义页面所依赖的初始数据data
• 定义了一个事件处理函数bindViewTap
• 响应页面的加载事件，在其中获取用户信息，获取到用户信息后更新数据data，最后强制刷新视图

index.wxml

<!--index.wxml-->
<view class="container">
  <view  class="userinfo" bindtap="bindViewTap">
    <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>

视图层就更简单了，就是绑定逻辑层数据，然后使用bindtap="bindViewTap"绑定了一个逻辑层的事件处理函数。

logs目录下的代码与上面也很类似，就不具体解释了。唯一要说明的是其中引入自已写的其它js，这个地方是使用的CommonJS的引入语法。

评价

整合看整个小程序的源码架构还是比较简单的，特别是每个页面使用了View-ViewModel的结构，以前使用过ReactJS，对这个还是挺熟悉的，用起来很自然。

小程序提供的组件还是比较丰富的，而且试用了下，反应很迅速，猜测是类似ReactNative的实现方案。

微信给小程序提供的API也还算丰富，剩下就看利用这些API都构想出什么创意了。

小遗憾

估计真实开发很少人会直接用开发工具里的编辑器的，反正我是习惯用sublime的。但每次在sublime里改完代码都需要回到开发工具里按Cmd+B重新编辑后才可以查看效果，习惯了webpack，gulp那种保存后即编译刷新的开发方式，这样还真不习惯。

参考

http://blog.csdn.net/xiehuimx/article/details/52629657 https://github.com/gavinkwoe/weapp-ide-crack http://wxopen.notedown.cn/framework/structure.html