Mini program development to cross-end

File structure

The applet is divided into two layers: app and page. app is used to describe the entire application, and page is used to describe each page.

app consists of three files, which must be placed in the root directory of the project.

file	Required	effect
app.js	Yes	Applet logic
app.json	Yes	Mini Program Global Settings
app.acss	no	Mini Program Global Style Sheet

page is composed of four files, namely:

file type	Required	effect
js	Yes	Page logic
axml	Yes	Page structure
acss	no	Page style sheet
json	no	Page configuration

Note: For the convenience of developers, the Alipay applet stipulates that these four files must have the same path and file name.

The above is the file naming rules of Alipay applet, and the following is the rule of WeChat applet.

file	Required	effect
app.js	Yes	Applet logic
app.json	Yes	Mini Program Global Settings
app.wxss	no	Mini Program Global Style Sheet

file type	Required	effect
js	Yes	Page logic
wxml	Yes	Page structure
wxss	no	Page style sheet
json	no	Page configuration

WeChat document connection
Alipay document connection

They are all small programs with similar rules, and each page must contain: JS page logic, style files, DOM structure and JSON configuration files.

But as a user who is familiar with vue development, I am used to single file components, that is, when we were writing vue files, we could write HTML templates, JS logic and CSS into one file, but we had to do small programs. To be so troublesome, several different files must be created.

<!-- my-component.vue -->
<template>
  <div>This will be pre-compiled</div>
</template>
<script>
  data () {
    
    
    return {
    
    }
  }
</script>
<style>
  .bg {
    
    
    background: red;
  }
</style>

So for developers who are familiar with single-file writing, this change will cause us trouble, so I almost found a cross-end framework-MPX on the market, and its writing is similar to single-file writing.

An important thing to note is that separation of concerns does not mean separation of file types. How to treat separation of concerns? , I recommend that you part of the introduction in the vue document: https://cn.vuejs.org/v2/guide/single-file-components.html

MPX document link: address

MPX's single file writing is very similar to Vue

<!--对应wxml文件-->
<template>
  <view>hello mpx</view>
</template>
<!--对应js文件-->
<script>
</script>
<!--对应wxss文件-->
<style lang="stylus">
</style>
<!--对应json文件-->
<script type="application/json">
</script>

Next, I will take you step by step to access MPX, and you will gradually like this framework.

Register Mini Program

The structure of the file has been introduced before, whether it is Alipay or WeChat, each applet needs to call the App method in app.js to register the applet instance, bind life cycle callback functions, error monitoring, and page non-existent monitoring functions.

// app.js
App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

Both Alipay and WeChat use the App method to register a small program in the form of a configuration object, but the life cycle of each platform is different.

So how does the MPX framework register applets? MPX calls the createApp method in app.mpx to register the applet. In the MPX framework, the file suffix ends with mpx. Then write the life cycle of each platform in the configuration object in the same way.

// app.mpx 
createApp({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

Then some people will be curious. We don't worry about the life cycle of each platform, such as onLaunch WeChat and Alipay, but what should we do if the life cycle of each platform is inconsistent? For example, the life cycle of onThemeChange is only in WeChat, but what if there is no Alipay? How is MPX converted?

In fact, MPX cannot convert APIs that are not between platforms, which means that MPX cannot implement an onThemeChange life cycle in Alipay alone during the conversion process so that it can be called at a specific time. Only API platforms supported by the platform will be executed, APIs not supported by the platform will not be executed. So if you write the onThemeChange life cycle in the code, it can be called and executed in WeChat, but it will not be called and executed in Alipay. It can only be executed when the platform natively supports this attribute.

registration page

Page (Object object)
Register a page in the applet. Accepts an Object type parameter, which specifies the initial data, life cycle callback, event handling function, etc. of the page.

Page({
  data: {
    text: 'init data',
    array: [{msg: '1'}, {msg: '2'}]
  }
})

Both WeChat and Alipay use the Page method to register the page. Use createPage method to register page in MPX.

createPage({
  data: {
    text: 'init data',
    array: [{msg: '1'}, {msg: '2'}]
  }
})

Registered components

Component (Object object)
creates a custom component that accepts an Object type parameter.

Component({

  behaviors: [],

  // 属性定义（详情参见下文）
  properties: {
    myProperty: { // 属性名
      type: String,
      value: ''
    },
    myProperty2: String // 简化的定义方式
  },

  data: {}, // 私有数据，可用于模板渲染

  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached: function () { },
    moved: function () { },
    detached: function () { },
  },

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
  ready: function() { },

  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show: function () { },
    hide: function () { },
    resize: function () { },
  },

  methods: {
    onMyButtonTap: function(){
      this.setData({
        // 更新属性和数据的方法与更新页面数据的方法类似
      })
    },
    // 内部方法建议以下划线开头
    _myPrivateMethod: function(){
      // 这里将 data.A[0].B 设为 'myPrivateData'
      this.setData({
        'A[0].B': 'myPrivateData'
      })
    },
    _propertyChange: function(newVal, oldVal) {

    }
  }

})

Both WeChat and Alipay use the Component method to create components, but the parameters of the configuration objects inside are a bit different.

Use createComponent to create components in MPX.

Use custom components Once
a component has been declared, it can be used on other pages.

// /pages/index/index.json
{
  "usingComponents": {
    "my-component":"/components/index/index"
  }
}