Introduction of framework

Mpx is an enhanced small program framework dedicated to improving the development experience of small programs. Through Mpx, we can develop the most advanced Web development experience (Vue + Webpack) to optimize the production performance of small programs. Mpx has the following excellent features:

  1. Data Response Characteristics (Watch /computed)
  2. Enhanced template syntax (dynamic component/style binding/class name binding/inline event function/bidirectional binding, etc.)
  3. Deep performance tuning (native custom components/setData based on dependency collection and data variation)
  4. Webpack compilation (NPM/loop dependencies /Babel/ESLint/ CSS precompilation/code optimization, etc.)
  5. Single-file component development
  6. State Management (Vuex specification/multi-instance/mergable)
  7. Cross team collaboration
  8. Logic reuse capabilities (Mixins)
  9. Scaffolding support
  10. Full support for applets’ own specifications
  11. Alipay small program support
<template>
  <! -- Dynamic Style -->
  <view class="container" wx:style="{{dynamicStyle}}">
    <! -- Data binding -->
    <view class="title">{{title}}</view>
    <! -- Calculate property data binding -->
    <view class="title">{{reversedTitle}}</view>
    <view class="list">
      <! Loop rendering, dynamic class names, event handling inline parameters -->
      <view wx:for="{{list}}" wx:key="id" class="list-item" wx:class="{{ {active:item.active} }}"
            bindtap="handleTap(index)">
        <view>{{item.content}}</view>
        <! -- Two-way data binding within a loop -->
        <input type="text" wx:model="{{list[index].content}}"/>
      </view>
    </view>
    <! Custom component fetch instance, bidirectional binding, custom bidirectional binding properties and events -->
    <custom-input wx:ref="ci" wx:model="{{customInfo}}" wx:model-prop="info" wx:model-event="change"/>
    <! -- Dynamic components, is passed component name string, usable components need to be registered in JSON, global registration is also in effect -->
    <component is="{{current}}"></component>
    <! -- Show/hide dom-->
    <view class="bottom" wx:show="{{showBottom}}">
      <! -- Template conditional compilation, __mpx_mode__ is the environment variable injected by the framework, and the template judged false will not be generated in dist-->
      <view wx:if="{{__mpx_mode__ === 'wx'}}">wx env</view>
      <view wx:if="{{__mpx_mode__ === 'ali'}}">ali env</view>
    </view>
  </view>
</template>

<script>
  import { createPage } from '@mpxjs/core'

  createPage({
    data: {
      // Dynamic styles and class names can also be returned using computed
      dynamicStyle: {
        fontSize: '16px'.color: 'red'
      },
      title: 'hello world'.list: [{content: 'All out'.id: 0.active: false
        },
        {
          content: 'Obscene growth, no waves'.id: 1.active: false}].customInfo: {
        title: 'test'.content: 'test content'
      },
      current: 'com-a'.showBottom: false
    },
    computed: {
      reversedTitle () {
        return this.title.split(' ').reverse().join(' ')}},watch: {
      title: {
        handler (val, oldVal) {
          console.log(val, oldVal)
        },
        immediate: true
      }
    },
    handleTap (index) {
      // The handler gets the index of the current click directly from the argument
      this.list[index].active = !this.list[index].active
    },
    onReady () {
      setTimeout(() = > {
        // Updates the data, as well as the associated calculated property reversedTitle
        this.title = 'Hello world'
        // The dynamic component switches from com-a to com-b
        this.current = 'com-b'
      }, 1000)}})</script>

<script type="application/json">
  {
    "usingComponents": {
      "custom-input": ".. /components/custom-input"."com-a": ".. /components/com-a"."com-b": ".. /components/com-b"}}</script>

<style lang="stylus">
  .container
    position absolute
    width 100%
</style>
Copy the code

Install and use

CD <project-name> # install dependency NPM I # development npm run watch # production npm run build -p CopyCopy the code

A simple example

The following is the use of MPX framework development of takeout applets page, project address: Github

The project is compatible with wechat applets, Alipay applets and Web pages. The project consists of two pages, one is the ordering page on the home page and the other is the product details page. The main content is mpX-enhanced apis for dynamic component-IS features, watch, computed, creating store container managed state, and so on.

Use feeling

Using MPX has the same features as having vUE syntax, including file structure, some enhanced API syntax, and responsive data. Framework is based on wechat syntax can be directly converted into other types of small programs. So as long as the micro channel native small program development can be directly used.

How does MPX cross ends? It can convert the instructions of wechat into those of other small programs. What if it encounters incompatible properties between cross-ends? At this point, we need to add context judgment to the syntax output for the specified end. If it is not cross-end small program only do micro channel small program can be used? It can be used because enhanced apis, such as watch, computed features that are often used, can lead to a better development experience.