Taro開發微信小程序的初體驗

瞭解Taro

據說Taro是從幾個星期前開始的，在一次飯桌上，一個小夥伴說：「Hey， 你據說了Taro麼，據說只須要寫一套程序就能夠生成H5，小程序以及RN的代碼模板，而且相似於React的語法。」「哦？還有這麼好的事，趕忙研究一下。」

Taro初體驗

去官網，Github瞭解了一下，Taro是由京東·凹凸實驗室團隊開發的，在掘金上看到他們的發稿，大體歸(tu)納(cao)以下：

• 代碼組織與語法：微信小程序須要在js/wxss/wxml/json文件中來回切換
• 命名規範：微信文檔中的各類命名規範(駝峯、小寫中劃線、小寫連寫)，慘不忍睹
• 開發方式：不能加載npm包，不能使用Sass/less等預處理器以及手動的文件處理

原文在這裏：爲什麼咱們要用 React 來寫小程序 - Taro 誕生記

使用Taro

跑去官網，按照步驟，copy了demo運行了一下，大體以下：

npm install -g @tarojs/cli
taro init myApp

# H5端運行
$ npm run dev:h5
$ taro build --type h5 --watch

# 微信小程序端運行
$ npm run dev:weapp
$ taro build --type weapp --watch

起步在這裏：Get Started，大體這樣就能夠跑起來了，分別在瀏覽器和微信開發工具中運行了一下，均可以看到界面輸出，感受仍是不錯。

Taro語法

Taro的開發語法遵循React，基本上寫過React的都是很好上手。大體是這個樣子的：

import Taro, { Component } from '@tarojs/taro'
import Index from './pages/index'

import './app.scss'

class App extends Component {
  // 項目配置
  config = {
    pages: [
      'pages/index/index'
    ],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black'
    }
  }

  componentWillMount () {}

  componentDidMount () {}

  componentDidShow () {}

  componentDidHide () {}

  render () {
    return (
      <Index />
    )
  }
}

Taro感覺

如下是我本身我的的感覺，由於尚未在項目中應用，可能有些地方說得不太穩當，還望指出。

一端開發，多端生成

正如Taro本身所說的，只須要寫一個版本的代碼，就能夠編譯生成H五、微信小程序以及RN的代碼，在效率上確實會有所提高。

Non-Reacter的學習成本

若是做爲一個'Reacter'，那麼用Taro來開發項目的話確定是沒什麼上手難度的，可是若是是沒有寫過react項目的，那麼可能最開始仍是有學習成本。

文檔開發還有欠缺

對比了微信小程序官網和Taro的Gitbook文檔，大體上不少東西都是一一對應的，基本的許多場景均可以知足，可是也有欠缺。好比：組件中的RichText在Taro中就介紹不足，在Taro中(可能^_^)和微信小程序中分別是這樣調用的：

// Taro
<RichText nodes={nodes} onTap={this.tap} />

// 微信小程序
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>

文檔中缺少了nodes以及onTap方法的說明，這可能須要開發者本身調試。但實際上我按照微信小程序的方法加上onTap以後，控制檯是報方法未定義的錯誤，而實際上我是有寫的。【這點要是在實際開發中可能欲哭無淚，要麼就是引入其餘的庫或者本身手寫，無疑會增長開發成本以及風險】。

有人或許想說，我直接在生成的微信小程序代碼文件夾(dist)中加上不就能夠了，可是你可能不是太好改，由於代碼是這樣的：

建議與總結

若是你的項目足夠下，而且沒有運用到特別複雜的組件，而且有開發多端代碼的須要，你能夠嘗試使用Taro，由於即便你須要的組件沒有，也能夠在有限的時間內方便地寫出來，並且京東商城小程序貌似也是用Taro寫的，之後應該會有更多的支持。除此以外，暫時能夠先觀望觀望 O(∩_∩)O哈哈~