微信小程式就是一個類似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';

functionrequest(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檔案
<viewclass="page"><viewclass="page__hd"><textclass="page__title">picker</text><textclass="page__desc">選擇器</text></view><viewclass="page__bd"><viewclass="section"><viewclass="section__title">地區選擇器</view><pickerbindchange="bindPickerChange"value="{{index}}"range="{{array}}"><viewclass="picker">
                    當前選擇：{{array[index]}}
                </view></picker></view><viewclass="section"><viewclass="section__title">日期選擇器</view><pickermode="date"value="{{date}}"start="2015-09-01"end="2017-09-01"bindchange="bindDateChange"><viewclass="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檔案
<importsrc="../common/header.wxml" /><importsrc="../common/footer.wxml" /><viewclass="container"><templateis="header"data="{{title: 'choose/previewImage'}}"/><viewclass="page-body"><viewclass="page-body-wrapper"><formbindsubmit="openLocation"><viewclass="page-body-form"><pickerrange="{{sourceType}}"bindchange="sourceTypeChange"value="{{sourceTypeIndex}}"><viewclass="page-body-form-picker"><viewclass="page-body-form-picker-key">圖片來源</view><viewclass="page-body-form-picker-value">{{sourceType[sourceTypeIndex]}}</view></view></picker><pickerrange="{{sizeType}}"bindchange="sizeTypeChange"value="{{sizeTypeIndex}}"><viewclass="page-body-form-picker"><viewclass="page-body-form-picker-key">圖片質量</view><viewclass="page-body-form-picker-value">{{sizeType[sizeTypeIndex]}}</view></view></picker><pickerrange="{{count}}"bindchange="countChange"value="{{countIndex}}"><viewclass="page-body-form-picker"style="border-bottom: none;"><viewclass="page-body-form-picker-key">數量限制</view><viewclass="page-body-form-picker-value">{{count[countIndex]}}</view></view></picker></view><viewclass="images-wrapper"><textclass="images-text">請選擇圖片</text><viewclass="images-list"><blockwx:for-items="{{imageList}}"wx:for-item="image"><imagesrc="{{image}}"class="images-image"data-src="{{image}}"bindtap="previewImage"></image></block><imagesrc="/image/plus.png"class="images-image images-image-plus"bindtap="chooseImage"></image></view></view></form></view></view><templateis="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的開發目錄結構也很清晰簡單。

相關推薦