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

微信小程序就是一个类似RN的轮子，可以快速开发，有一定的适用场景，但是也有其局限性。（结论是基于微信小程序的示例代码做的解读，可能存在谬误。

文末有好奇心日报小程序的二维码，欢迎围观。

2016年11月25日 更新
更新一些最新的认识和进展。
首先微信小程序不是纯原生应用，是一种奇怪Hybrid模式，之前的观点是错的，那么为什么是奇怪的混合模式呢？看下图：

Paste_Image.png

上图中的辅助线表示一个单独的原生view（原生view：原生页面渲染的最小的组件，webivew、list、imageview都是它的子类），显然，除了app.json配置的组件之外，内容部只包含一个view，也就是说，内容部分并不是有多个原生view组合而成的，所以内容部分应该是微信定制化的一个webview组件。

更新一些新遇到的微信小程序的问题以及解决方案：
✦ 微信小程序的swiper可以设置vertical，文档不写也是醉了。
✦ 微信小程序的事件不能阻止，所以不能实现完美效果的fullpage，会出现上下拉扯的感觉，因为无法阻止父节点的touch事件。
✦ 最新的微信开发工具移除了promise，建议手动引入es6-promise。突然移除某些功能略坑啊。

// 将常规的网络请求封装成promise模式
import Promise from '../vendor/es6-promise.js';

function request(method = 'GET') {
    return function(url, data = {}) {
        return new Promise(function(resolve, reject) {
            wx.request({
                url,
                data,
                method,
                header: {
                    'Content-Type': 'application/json'
                },
                success: function(res) {
                    resolve(res.data)
                },
                fail: function(err) {
                    reject(err)
                }
            });
        })
    }
}

export const get = request('GET');
export const post = request('POST');
export const put = request('PUT');
export const del = request('DELETE');

✦ 对于原生API，想要promise的话，可以使用如下代码

import Promise from '../vendor/es6-promise.js';

module.exports = (api) => {
    return (options, ...params) => {
        return new Promise((resolve, reject) => {
            api(Object.assign({}, options, { success: resolve, fail: reject }), ...params);
        });
    }
}

// 使用
const getLocation = promisify(wx.getLocation);

2016年11月15日 更新
最近尝试了下小程序，之前的猜测和判断完全正确。
早先看到很多“权威人士”说是Hybrid模式，一度怀疑自己博客的准确性，担心误导别人，所以额外备注可能存在谬误，目前来看，这篇博客的判断比市场上大部分博客的判断都准确。

简单总结下观点：
✦ 微信小程序是原生应用，是React Native和weex类似的模式
✦ 微信小程序的生态除了官方提供的组件和API，几乎没有其他的组件。所以部分“复杂”的功能，开发起来真的很复杂。
✦ 微信小程序只能运行在微信中。
✦ 由于微信的限制，微信小程序应用场景极度有限。
大家想知道微信小程序能干什么？对比服务号就知道了，比如订票、航旅信息、ToDoList、天气日历、星座、理财、实时点菜系统等，核心是低频但重要的需求。而且微信不允许分享（导流），不允许链接（导流或广告），所以想要靠微信朋友圈爆发的小机灵被彻底被浇灭了，媒体也不适合微信小程序。

此外，不得不吐槽一下微信和微信小程序：
✦ 微信小程序的官方文档写得不完善，很多方面没有覆盖。
如何定义一个组件；
无法使用less或者sass之类的预编译；
wxml没得到主流编辑器的支持，导致开发速度偏慢；
想要解决less和wxml问题？可以参考这个：wxapp-redux-starter；

✦ 微信小程序的开发工具极不稳定。
和shadowsocks等VPN冲突；
经常无故卡死；
开发工具和真机表现偶尔会有差异；
有时候代码无故不生效，需要重启才行；
没有类似HMR的机制导致经常刷新；
调试工具不好用等等。

✦ 微信小程序的生态和问答社区几乎为零。
微信的生态为零，导致部分功能开发起来吃力，比如解析富文本。
微信的问答社区就更差了，遇到问题全靠猜，实在找不到办法就重启。

✦ 微信小程序的应用场景太受限，和微信的一贯保守风格很像，或许以后会慢慢放开，慢慢期待吧。

以上观点是站在一个普通开发者对微信小程序的看法，相反，从微信角度出发，某些限制和规范的确很有必要。希望大家客观对待微信小程序。

============ 分割线 ============

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

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

微信小程序主要为我们提供了两部分东西：底层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不同的是，微信小程序多半只能基于微信提供的组件进行个性化封装了，而不能基于系统组件进行个性化封装，原因很简单，因为微信就是一个“系统”。

微信是一个“系统”

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

// wx-picker.wxml文件
<view class="page">
    <view class="page__hd">
        <text class="page__title">picker</text>
        <text class="page__desc">选择器</text>
    </view>
    <view class="page__bd">
        <view class="section">
            <view class="section__title">地区选择器</view>
            <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
                <view class="picker">
                    当前选择：{{array[index]}}
                </view>
            </picker>
        </view>
        <view class="section">
            <view class="section__title">日期选择器</view>
            <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
                <view class="picker">
                    当前选择: {{date}}
                </view>
            </picker>
        </view>
    </view>
</view>

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

// 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文件
<import src="../common/header.wxml" />
<import src="../common/footer.wxml" />

<view class="container">
  <template is="header" data="{{title: 'choose/previewImage'}}"/>

  <view class="page-body">
    <view class="page-body-wrapper">
      <form bindsubmit="openLocation">
        <view class="page-body-form">
          <picker range="{{sourceType}}" bindchange="sourceTypeChange" value="{{sourceTypeIndex}}">
            <view class="page-body-form-picker">
              <view class="page-body-form-picker-key">图片来源</view>
              <view class="page-body-form-picker-value">{{sourceType[sourceTypeIndex]}}</view>
            </view>
          </picker>
          <picker range="{{sizeType}}" bindchange="sizeTypeChange" value="{{sizeTypeIndex}}">
            <view class="page-body-form-picker">
              <view class="page-body-form-picker-key">图片质量</view>
              <view class="page-body-form-picker-value">{{sizeType[sizeTypeIndex]}}</view>
            </view>
          </picker>
          <picker range="{{count}}" bindchange="countChange" value="{{countIndex}}">
            <view class="page-body-form-picker" style="border-bottom: none;">
              <view class="page-body-form-picker-key">数量限制</view>
              <view class="page-body-form-picker-value">{{count[countIndex]}}</view>
            </view>
          </picker>
        </view>
        <view class="images-wrapper">
          <text class="images-text">请选择图片</text>
          <view class="images-list">
            <block wx:for-items="{{imageList}}" wx:for-item="image">
              <image src="{{image}}" class="images-image" data-src="{{image}}" bindtap="previewImage"></image>
            </block>
            <image src="/image/plus.png" class="images-image images-image-plus" bindtap="chooseImage"></image>
          </view>
        </view>
      </form>
    </view>
  </view>

  <template is="footer" />
</view>

简单清晰wxml，居然让选择图片并预览实现起来这么简单。并且可以通过简单的template语法来引入其他wxml文件。

// image.js 文件
var sourceType = [ ['camera'], ['album'], ['camera', 'album'] ]
var sizeType = [ ['compressed'], ['original'], ['compressed', 'original'] ]

Page({
  data: {
    sourceTypeIndex: 0,
    sourceType: ['拍照', '相册', '拍照或相册'],

    sizeTypeIndex: 0,
    sizeType: ['压缩', '原图', '压缩或原图'],

    countIndex: 0,
    count: [1, 2, 3, 4, 5, 6, 7, 8, 9]
  },
  sourceTypeChange: function (e) {
    this.setData({
      sourceTypeIndex: e.detail.value
    })
  },
  sizeTypeChange: function (e) {
    this.setData({
      sizeTypeIndex: e.detail.value
    })
  },
  countChange: function (e) {
    this.setData({
      countIndex: e.detail.value
    })
  },
  chooseImage: function () {
    var that = this
    wx.chooseImage({
      sourceType: sourceType[this.data.sourceTypeIndex],
      sizeType: sizeType[this.data.sizeTypeIndex],
      count: this.data.count[this.data.countIndex],
      success: function (res) {
        console.log(res)
        that.setData({
          imageList: res.tempFilePaths
        })
      }
    })
  },
  previewImage: function (e) {
    var current = e.target.dataset.src

    wx.previewImage({
      current: current,
      urls: this.data.imageList
    })
  }
})

因为微信对这个API已经封装得很好了，所以使用起来只需要传入几个参数，绑定一下回调函数即可。

// image.css 文件
.images-wrapper {
  padding: 20rpx;
  background-color: #fff;
  margin-top: 20rpx;
}
.images-wrapper-text {
  font-size: 28rpx;
}
.images-list {
  display: flex;
  margin-top: 20rpx;
  flex-wrap: wrap;
}
.images-image {
  width: 150rpx;
  height: 150rpx;
  margin: 10rpx;
}
.images-image-plus {
  border: 1px solid #999;
}

同样，样式通过类似CSS的语法，从上面的rpx单位可以看出，这不是真正的CSS，我猜测是CSS的子集，类似RN。

开发微信小程序方便么？

微信小程序的开发目录结构

WX的开发目录结构也很清晰简单。

WX目录结构

入口文件就是最外层的app.js，app.json，app.wxss。
app.js 提供了入口文件的一些初始化和绑定。
app.json 提供了项目的结构和一些项目配置，微信之所以采用app.json的模式声明项目需要加载的页面和组件，应该是为了方便实现云端编译打包然后下发到微信吧。
app.wxss 就是样式啦。
page目录 放你需要实现具体功能的页面。
util 存放项目需要用到的一些工具函数。

// app.json
{
  "pages": [
      "page/component/component-pages/wx-picker/wx-picker",

      "page/API/image/image"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "小程序演示",
    "navigationBarBackgroundColor": "#fbf9fe",
    "backgroundColor": "#fbf9fe"
  },
  "tabBar": {
    "color": "#dddddd",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
      "pagePath": "page/component/index",
      "iconPath": "image/wechat.png",
      "selectedIconPath": "image/wechatHL.png",
      "text": "组件"
    }, {
      "pagePath": "page/API/index/index",
      "iconPath": "image/wechat.png",
      "selectedIconPath": "image/wechatHL.png",
      "text": "接口"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "connectSocket": 10000,
    "uploadFile": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

微信小程序的部署流程

微信小程序采用的基于微信的是原生开发，安装和使用应该都要很轻量，所以微信采用云端编译打包的方式，将编译后的文件发送到微信上，然后微信内置的解析器会解析这个文件并渲染。

简而言之，微信小程序的开发体验还算流畅，代码可读性也很高，也不需要做太多新的知识储备，但是有硬伤，后文会分析。

微信小程序适合你吗？

这一块就不细讲了，毕竟不是我擅长的，借用网上的分析，用两张图片告诉你微信小程序的适用场景。

行业区分

微信小程序适合什么

所以，微信小程序更适合用来做低频高需的服务，比如酒店订阅，火车票/机票订阅，招聘，理财等。

总结点什么？

每次的总结都是为了更快的结束写文章的“枯燥”过程，也为了让大家更快的看到文章。
以下代表个人观点，仅供参考，也欢迎讨论。

从产品层面来说，值得一试！

1. 微信提供了不错的底层API以及还算丰富的组件库，让小程序可以快速开发并且拥有原生体验，相对之前的公众号/服务号，体验更好。
2. 微信流量很大，对于部分中小产品来说，是一次机会。
3. 一些低频高需产品也许很适合，比如订票，用户打开页面，简单选择，然后微信支付，感觉还挺爽的。

从技术栈来说，我不喜欢！

1. 微信小程序是基于微信生态的，而这个生态目前太不成熟。
2. 只能在微信中运行，多半不支持在浏览器或者其他地方运行，也就是说，并没有减少产品的开发成本，反倒是多了一个开发流水线。
3. 新的语法糖，开发调试环境也不友好，开发者会有阵痛期。

YY一下，如果微信小程序的技术栈是RN而不是造一个轮子，那感觉才爽！！