微信小程序，一個有局限的類似 React Native 輪子！

PXYJod 8年前發布 | 23K 次閱讀移動開發 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應該只能基于微信提供的組件進行個性化封裝了，而不能基于系統組件進行個性化封裝，原因很簡單，因為微信就是一個“系統”。

我們挑一個稍微復雜的組件示例來分析分析：

// 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 存放項目需要用到的一些工具函數。

微信小程序的部署流程

微信小程序采用的基于微信的是原生開發，安裝和使用應該都要很輕量，所以微信采用云端編譯打包的方式，將編譯后的文件發送到微信上，然后微信內置的解析器會解析這個文件并渲染。

簡而言之，微信小程序的開發體驗還算流暢，代碼可讀性也很高，也不需要做太多新的知識儲備，但是有硬傷，后文會分析。

微信小程序適合你嗎？

這一塊就不細講了，畢竟不是我擅長的，借用網上的分析，用兩張圖片告訴你微信小程序的適用場景。

行業區分

微信小程序適合什么

所以，微信小程序更適合用來做低頻但重要的服務，比如酒店訂閱，火車票/機票訂閱，招聘，理財等。

總結點什么？

每次的總結都是為了更快的結束寫文章的“枯燥”過程，也為了讓大家更快的看到文章。

以下代表個人觀點，僅供參考，也歡迎討論。

從產品層面來說，值得一試！

微信提供了不錯的底層API以及還算豐富的組件庫，讓小程序可以快速開發并且擁有原生體驗，相對之前的公眾號/服務號，體驗更好。
微信流量很大，對于部分中小產品來說，是一次機會。
一些不需要用戶留存，但又是剛需的產品也許很適合，比如訂票，用戶打開頁面，簡單選擇，然后微信支付，感覺還挺爽的。

從技術棧來說，我不喜歡！

微信小程序是基于微信生態的，而這個生態目前太不成熟。
只能在微信中運行，多半支持在瀏覽器或者其他地方運行，也就是說，并沒有減少產品的開發成本，反倒是多了一個開發流水線。
新的語法糖，開發調試環境也不友好，開發者會有陣痛期。

YY一下，如果微信小程序的技術棧是RN而不是造一個輪子，那感覺才爽！！

來自：http://www.jianshu.com/p/060c6f3dd4e8

本文由用戶 PXYJod 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1474596304045.html

移動開發 React Native

微信小程序，一個有局限的類似 React Native 輪子！

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

開發微信小程序方便么？

微信小程序適合你嗎？

總結點什么？

相關經驗

相關資訊

相關文檔

目錄