Last week, [email protected] was officially released, optimize the data update performance at the same time, support Baidu intelligent small program, really excited a, this “may” is the first community at the same time support three small program VUE framework. Let’s try it out.

Follow the document

The first part of the official documentation is a quick start to build a Megalo project.

The installation

$ npm install -g @megalo/cli
Copy the code

build

$ megalo megalo-yanxuan-demo
Copy the code

packaging

Wechat small program as the entrance

$ npm run dev:wechat
Copy the code

Now that a complete Megalo project is built, let’s move on to the source code

Transfer the WEEX project

I transferred from the previous WEEX demo project, Yanxuan – Weex-Demo, which involved the removal and conversion of many WEEX specific apis.

Network request

Take network requests as an example. Weex is a stream

let stream = weex.requireModule('stream');
export default {
    methods: {
        GET (api, callback) {
            return stream.fetch({
                method: 'GET'.type: 'json'.url: api
            }, callback)
        }
    }
}
Copy the code

Since applets have apis that provide network requests, this is modified as follows

export default {
    methods: {
        GET (api, callback) {
            let { platform } = this.$mp || {},
                request = (a)= >{}
            switch(platform) {
                case 'wechat':
                    request = wx && wx.request
                break;
                case 'alipay':
                    request = my && my.httpRequest
                break;
                case 'swan':
                    request = swan && swan.request
                break;
                default:
                break;
            }
            request && request({
                url: api,
                success: callback
            })
        }
    }
}
Copy the code

Similarly, there are changes to toast, Message and other components.

component

The

,

,

, and

components in weeX do not exist in small program components. Therefore, there are three solutions



  1. Customize a vue component with the same name
  2. Find a component for the applet to replace
  3. Cut the demand if you have to

Weex’s

component, for example, can be replaced with a small program

, fortunately, wechat, Alipay and Baidu small program are supported.

css

Weex container default width (viewport) is 750px, small programs based on 750rpx. So just convert the desired PX to RPX.

In addition, I have implemented a 1-pixel WPX, which can be replaced with PX.

Perform a three-way effect

Finally look at the transformation effect. Execute three terminals simultaneously

The effect was better than expected, without too many adaptations

Demo source code for everyone to play.

Which ones are transferable

As long as the existing project doesn’t do the following things, it can, in theory, be moved, just by updating the format slightly

  • Use vUE features not currently supported by Megalo
  • It involves browser-specific DOM operations such as Window, userAgent, location, getElementById, etc
  • Uses a third-party component library that uses DOM operations
  • Vue-router is used, but not supported. Procedure

However, the solution can be adjusted, the above features can be found in the community alternatives.

Just change it.

reference

Megalo Official Documentation Megalo — Netease Kaola Small Program Solution Megalo Github

Starting: zwwill/blog# 29

Author: Kiwa

Please indicate the source for reprinting