Команда Tencent Omi выпустила mps — нативный апплет с крыльями JSX, Less и Cloud

написать впереди

Родной апплет с крыльями JSX, Less и Cloud

что такое мпс? Зачем тебе мп? Вот несколько актуальных ситуаций:

В настоящее время наиболее используемой технологией для разработки апплетов по-прежнему являются нативные апплеты.
API родного апплета постоянно улучшается и развивается
JSX — лучшее выражение пользовательского интерфейса для выразительности и опыта программирования.
JSX может выразить любую структуру пользовательского интерфейса, которую вы хотите выразить, и может описать любую структуру WXML.

Итак, есть мп. Позвольте разработчикам напрямую использовать JSX для написания WXML в собственном апплете, компиляции в реальном времени и предварительного просмотра в реальном времени.

→ mps адрес гитхаба

JSX заменяет WXML для написания структуры, лаконичной и эффективной.
Нулевое вторжение в собственный апплет
Поддержка JS и TS
Живая компиляция, предварительный просмотр в реальном времени
Автоматическое украшение вывода WXML
Поддержка меньшего вывода 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 больше, а WXML будет изменяться в режиме реального времени только путем изменения файла JSX.

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 напрямую задается как каталог инструментов разработчика WeChat.

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

Задайте для packageOptions.ignore в project.config.json игнорирование вышеуказанных файлов, а затем:

$ npm install
$ npm start

соглашение МП

Менее распространенный файловый каталог должен быть размещен на обычном, при использовании без записи @ import путь.

Github

→ мпс