騰訊 Omi 團隊發佈 mps - 原生小程序插上 JSX 、Less 和 Cloud 的翅膀

寫在前面

原生小程序插上 JSX 、Less 和 Cloud 的翅膀

mps 是什麼？爲何須要 mps？先列舉幾個現狀:

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

因此，就有了 mps。 讓開發者直接在原生小程序使用 JSX 寫 WXML，實時編譯，實時預覽。

→ mps github 地址

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

效果預覽

當即開始

$ npm i omi-cli -g              
$ omi init-mps my-app    
$ cd my-app        
$ npm start               
複製代碼

接着把小程序目錄設置爲 my-app 目錄即可以愉快地開始開發調試了！

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

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

也支持 typescript:

$ omi init-mps-ts my-app             
複製代碼

其餘命令同樣。

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

mps-cloud

mps 也支持雲開發：

$ npm i omi-cli -g              
$ omi init-mps-cloud my-app    
$ cd my-app/miniprogram  
$ npm install    
$ npm start               
複製代碼

使用雲開發沒有 dist 目錄，直接把當前的 my-app 設置爲微信開發者工具的目錄。

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> 複製代碼

老項目使用 mps

拷貝如下文件到小程序根目錄:

• _scripts 目錄全部文件
• package.json
• gulpfile.js

設置 project.config.json 裏的 packOptions.ignore 忽略以上的文件，而後:

$ npm install
$ npm start
複製代碼

mps 約定

公共的 less 文件必須放在 common-less 目錄，@import 使用的時候不須要寫路徑。

推薦搭配

既然用了原生小程序的方案，全部能夠輕鬆使用 mps + omix 搭配一塊兒使用。

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

Github

→ mps