騰訊 Omi 團隊釋出 mp-jsx - 原生小程式支援 JSX

當耐特發表於2019-04-01
JS

寫在前面

原生小程式插上 JSX 的翅膀

mp-jsx 是什麼？為什麼需要 mp-jsx？先列舉幾個現狀:

  • 目前小程式開發使用最多的技術依然是原生小程式
  • 原生小程式的 API 在不斷完善和進化中
  • JSX 是表達能力和程式設計體驗最好的 UI 表示式
  • JSX 可以表達一切想表達的 UI 結構也就能夠描述任意 WXML

所以，就有了 mp-jsx。 讓開發者直接在原生小程式使用 JSX 寫 WXML，實時編譯，實時預覽。

→ mp-jsx github 地址

騰訊 Omi 團隊釋出 mp-jsx - 原生小程式支援 JSX

  • JSX 代替 WXML 書寫結構，精簡高效
  • 對原生小程式零入侵
  • 支援 JS 和 TS
  • 實時編譯，實時預覽
  • 輸出 WXML 自動美化

效果預覽

騰訊 Omi 團隊釋出 mp-jsx - 原生小程式支援 JSX

立即開始

$ npm i omi-cli -g              
$ omi init-jsx my-app    
$ cd my-app        
$ npm start               
複製程式碼

接著把小程式目錄設定為 my-app 目錄便可以愉快地開始開發除錯了！

npx omi-cli init-jsx my-app 也支援(npm v5.2.0+)

生成的目錄和官方的模板一致，只不過多了 JSX 檔案，只需要修改 JSX 檔案就會實時修改 WXML。

也支援 typescript:

$ omi init-jsx-ts my-app             
複製程式碼

其他命令一樣。

npx omi-cli init-jsx-ts my-app 也支援(npm v5.2.0+)

JSX vs WXML

這裡是一個真實的案例說明 JSX 的精巧高效的表達能力:

編譯前的 JSX:

<view class='pre language-jsx'>
  <view class='code'>
    {tks.map(tk => {
      return tk.type === 'tag' ? <text class={'token ' + tk.type}>{
        tk.content.map(stk => {
          return stk.deep ? stk.content.map(sstk => {
            return <text class={'token ' + sstk.type}>{sstk.content || sstk}</text>
          }) : <text class={'token ' + stk.type}>{stk.content || stk}</text>
        })}</text> : <text class={'token ' + tk.type}>{tk.content || tk}</text>
    })}
  </view>
</view>
複製程式碼

編譯後 WXML:

<view class="pre language-jsx">
  <view class="code">
    <block wx:for="{{tks}}" wx:for-item="tk" wx:for-index="_anonIdx4">
      <block wx:if="{{tk.type === 'tag'}}"
        ><text class="{{'token ' + tk.type}}"
          ><block
            wx:for="{{tk.content}}"
            wx:for-item="stk"
            wx:for-index="_anonIdx2"
            ><block wx:if="{{stk.deep}}"
              ><text
                class="{{'token ' + sstk.type}}"
                wx:for="{{stk.content}}"
                wx:for-item="sstk"
                wx:for-index="_anonIdx3"
                >{{sstk.content || sstk}}</text
              >
            </block>
            <block wx:else
              ><text class="{{'token ' + stk.type}}"
                >{{stk.content || stk}}</text
              >
            </block>
          </block>
        </text>
      </block>
      <block wx:else
        ><text class="{{'token ' + tk.type}}">{{tk.content || tk}}</text>
      </block>
    </block>
  </view>
</view>
複製程式碼

老專案使用 mp-jsx

拷貝以下檔案到小程式根目錄:

  • _scripts 目錄所有檔案
  • package.json
  • gulpfile.js

設定 project.config.json 裡的 packOptions.ignore 忽略以上的檔案，然後:

$ npm install
$ npm start
複製程式碼

歡迎使用騰訊 Omi 團隊集合京東 O2Team 智慧聯合打造的 mp-jsx 大幅提高開發效率，Have fun!

Github

→ mp-jsx

相關文章