微信「小程序」，一个有局限的类似 React Native 轮子！

先抛出结论：微信小程序就是一个类似RN的轮子，可以快速开发，有一定的适用场景，但是也有其局限性。

本文针对微信小程序的示例代码进行分析，告诉大家：
微信小程序到底提供了什么？
开发微信小程序方便么？
微信小程序具体适用场景？
最后还自作主张的说了点对于微信小程序的个人观点。

微信小程序都提供了什么？

微信小程序主要为我们提供了两部分东西：底层API 和组件，不仅如此，微信小程序还引入新的文件格式。

引入了新的文件格式

微信小程序并不是传统意义的H5页面，微信定义了新的文件格式，然后对这些文件做编译解析，所以微信小程序是原生应用！是基于微信的原生应用！微信正式尝试做一个OS！

微信小程序组件

上图是一个wx-action-sheet组件，文件应用了新的后缀。
其中wxml功能和HTML类似，wxss功能和CSS类似，JS包含组件逻辑。这点是不是和RN/weex很像？

微信提供了一套基础组件库

微信为微信小程序提供了一套基础组件库，可以满足开发的基础开发需求，从而实现简单的快速开发，至于这些基础组件支持多大程度的自定义，以及能否满足实际项目的需求，留给后续开发者去体验吧。

基础组件库主要分为四类：
控件（controller）主要包括：
action-sheet / button / searchbar / modal / navigator / drawer
表单(form)主要包括：
checkbox / radio / form,selector / switch / slider / input / label / picker
媒体(media)主要包括：
image / audio / video
视图(view)主要包括：
progress / toast / scroll-view / text / view / mask / icon / spinner / swiper / slide-tab

恩，这些组件不用介绍大家也都知道大概是什么功能了，几乎是每个UI组件库都必备的。以后大家应该都要基于这个组件库去开发具体的产品，和RN/weex不同的是，WX应该只能基于微信提供的组件进行个性化封装了，而不能基于系统组件进行个性化封装，原因很简单，因为微信就是一个“系统”。

微信云OS

我们挑一个稍微复杂的组件示例来分析分析：

// wx-picker.wxml文件

    
        picker
        选择器
    
    
        
            地区选择器
            
                
                    当前选择：{{array[index]}}
                
            
        
        
            日期选择器
            
                
                    当前选择: {{date}}

是的，所有的标签都是自定义标签，进一步正式了微信小程序应该是原生应用，组件使用很简单，所以适合快速开发。

// wx-picker.js 文件
Page({
  data: {
    array:["中国","美国","巴西","日本"],
    index:0,
    date:"2016-09-01"
  },
  bindPickerChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  },
  bindDateChange:function(e){
    this.setData({
      date:e.detail.value
    })
  },
  bindTimeChange:function(e){
    this.setData({
      time:e.detail.time
    })
  }
})

也很清晰，通过this.setData来设置属性，实现action-sheet的显示与隐藏切换，React的感觉，连API都很像。

// wx-picker.wxss
.picker{
    padding: 13px;
    background-color: #FFFFFF;
}

可以重新设置微信小程序的组件样式，和CSS很相似，轻量简洁。

底层API

没有提供底层API的基础组件库都是流氓库，有了底层API才能开发真正的原生应用，才能做更多丰富的功能。

其中底层API包括：
animation / backgronud-audio / canvas / download-file / file / get-location / get-network-type / get-system-info / get-user-info / image / login / navigation-bar-loading / navigator / on-accelerometer-change / on-compass-change / open-location / pull-down-refresh / request / request-payment / set-navigation-bar-title / storage / upload-file / voice / web-socket

从名字也能看出大概，提供了比较完整的API，能够开发更丰富的功能和程序。

我们仍然挑一个稍微复杂点的API使用示例来分析分析：

// image.wxml文件