微信小程序初体验

十一期间的北京下了两天的雨，雾霾了四天，剩下一天的天气还说的过去，不知这个国庆黄金周来北京游玩的人是什么感受，算是如愿以偿地体验了帝都的生活了吧。十一七天没有计划远出玩，本来打算在北京随便逛逛的，碰上这天气也就算了。在家宅的这几天抽时间简单了解了一下微信小程序，算是提前体验了一下。

微信小程序一经推出就在程序猿圈子里引起了剧烈的反响。确实，微信在我们的生活中扮演着越来越重要的角色，微信的体量及使用率，也有这样的资本引起如此大的响应。下面就简单地整理一下自己的体验。

首先要说的是小程序的框架。微信提供了自己的开发框架及开发工具IDE，框架提供了自己的视图层描述语言WXML和WXSS，逻辑框架层是基于JavaScript进行开发的，并在视图层和逻辑层提供了数据传输和事件系统。

在创建小程序实例时默认会生成app.js, app.json, app.wxss这三个文件，可以理解为这三个文件是整个程序的入口和配置文件。

app.js是小程序的脚本代码，在这里面可以监听并处理小程序的生命周期函数、声明全局变量等。小程序的生命周期函数有onLaunch（初始化完成，只执行一次），onShow（小程序启动或者由后台进入前台时）， onHide（由前台进入后台时）；微信小程序提供了全局的方法getApp（）来获取app实例，从而能拿到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
  }
})

app.json是小程序的全局配置文件，小程序由哪些页面组成以及应用的 窗口背景色，配置导航条样式，配置默认标题等，注意在这个文件里面不允许有任何的注释出现。每个新建的页面都需要在app.json 文件里的pages里面注册配置，这样才能正常访问，示例如下：

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

}

app.wxss是整个小程序的公共样式表，我们可以在页面的class属性上直接使用app.wxss中的样式规则，也可以在每个页面上自己再单独定义样式表，这样会覆盖app.wxss中的样式，优先级同css的规则相同。微信规定了一套样式使用的规则，具体可参考开发文档，示例如下：

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;

}

另外，创建新的页面只需要创建以.wxml为后缀的文件就可以了，可以为这个页面配置自己的.js, .json, .wxss文件，这四个文件需要同名，微信会以相同的名字来为页面进行绘制和加载。示例如下：

<!--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>

如上面的页面中的userinfo－nickname和user－motto所示，他们绑定了对应的.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
      })
    })
  }

})

当程序加载完成时对应的数据会显示到指定的控件上，当对数据进行修改时，视图层上的内容也会跟着进行修改，这点有点类似MVVM模型中的数据绑定；另外，视图中也存在事件绑定操作（bindViewTap），微信提供了一整套的事件绑定和处理操作，具体使用请参考微信官方开发文档。

微信小程序在视图层提供了数据绑定、条件渲染、列表渲染、模版、事件和引用等机制，并且提供了实现页面的丰富的UI控件；在逻辑层方面也提供了注册程序（App()）、注册页面（Pages()）、模块化及API操作，帮助完成逻辑的处理，另外微信提供了丰富的api操作，包括网络请求、文件上传和下载、socket服务、媒体服务（图片、录音、音／视频播放）、数据保存、位置、设备及微信开放接口（登录、支付、用户信息等）等，基本上能满足日常使用的功能的开发。

关于开发工具，微信没有依赖于现有的前端开发工具，而是自己开发了新的开发IDE，需要绑定开发者自己的微信账号，这一点有点像苹果开发者，估计这也是微信在打造自己的开发生态吧，关于开发工具就简单地说一下吧，页面很是简单明了，对于前端开发来说小菜一碟，就直接在图上说明了：

项目模式比较简单，就是描述项目的名称、存放位置等信息等。

小程序对移动开发的冲击问题。我本身是从事android开发的，最初在微信宣布要推出小程序（最初叫应用号）时就同身边的同事聊过这事，以微信现在的体量以及使用频率来说，对移动开发的冲击肯定是有的。首先，微信以其高效、优良的推广来说，对于那些想在移动端推广，但能力有限的中小企业来说，微信小程序可能是一个更好的选择；再者，一些新创意也不太会倾向于一开始就从android和iOS两个平台上去试水了，更愿意在微信小程序上尝试一下；最后，由于移动开发和维护的成本，也会让一些中小型企业或者一些信息传播与展示的大企业考虑往微信小程序上转。但是，微信小程序不可能会取代移动开发；一方面是由于小程序刚推出，目前正在处理内测阶段，还需要不断的完善，未来开发还存在什么样的问题还不太清楚，不可能一下子就能满足现有app的功能要求；另一方面使用微信小程序意味着要受微信平台的限制，以这些年来移动市场的开发环境及企业对数据的安全考虑，也不会轻易的转移平台。

综上，个人认为小程序对移动开发的冲击有限，可能一些初创企业出于成本考虑或者一些咨询信息类应用会倾向于小程序，现有的已经有自己的客户量且活跃度良好的企业或者一些有新兴的应用（如直播等）还是会维护自己的移动平台的。虽然对移动开发的冲击有限，但是有时间还是学习一下的好，既能了解新的技能，也多了一项技能不是。