Weex is alibaba Group in April last year open source a use OF JS code writing, multi-end implementation of the open source framework. It is also one of the few large open source projects in China (the number of STARS currently exceeds 10K).

Write Once Run Everywhere

Weex’s purpose is to free up productivity, so that fewer people maintain less code. Weex is currently in intensive development and can be used for internal components, which is relatively rare. Since it is an open source project, everyone can contribute their own development components.

Weex components have two types. One is based on the provided API and Element to encapsulate and expand, similar to weex-percentage-circle. You don’t need any Android /iOS knowledge or skills to complete a simple component package. The other one, called tripartite extensions, is probably better, and it requires you to write support for all three platforms in order to implement certain features. It requires support for ios/ Android/Web. Of course, this is not a strict restriction, such as if you support The Web and ios, but there is a need for developers to develop apps that don’t require AndorID.

Let’s talk about the first one, which is actually pretty simple.

We just need to write a simple weex-demo.we file

<template>  
    <div><text>{{textstr}}</text></dv>  
</template>

<script>  
  export default { }
</script>

<style>  
 … you style
</style>
Copy the code

We just need to introduce it in our project

<template> <weex-demo textstr= "demo" ></weex-demo> </template> <script> require('./weex-demo.we '); </script>Copy the code

See weex-percentage-circle

The second one is a little more complicated.

In WEEX, components, apis, or loaders are extensions, so you don’t need to introduce weex packages. I’m going to focus on the extension to the Web. See below for Android and iOS. Andoird

iOS

How do I create a component

First we create a directory called Weex-photo-web. It is recommended that we use weex- when naming components, then add a specific name like photo and end with a specific platform like (-web). This constraint also makes it easier for other developers to quickly lock down third-party components that they need to use.

And then we initialize our project NPM init because most of the projects that we develop are probably going to be released in the future, so it’s recommended that we just start getting ready to release on NPM.

Next, we can create a new SRC directory to store our source code. Let’s create index.js under SRC. Here’s the basic contents of index.js.

  • We need to inherit weex.componentand override some methods.
  • We need to useWeex.registerComponentRegister the component
  • Export init method for component installation.
// Set the tag attribute const attr = {//... } // set the style const style = {//... } // Set the event response const event = {//... } function init (Weex) {const Component = weex.component.extend // The Component's constructor function Hello (data) { Component.call(this, data) } // extend the prototype Hello.prototype = Object.create(Component.prototype) extend(Hello.prototype, proto) // config the attributes, styles and events. extend(Hello.prototype, { attr }) extend(Hello.prototype, { style: extend(Object.create(Component.prototype.style), style) }) extend(Hello.prototype, { event }) Weex.registerComponent('weex-hello', Hello) } // export the init method. export default { init }Copy the code

For details, see Weex-Polaroid-photo

This is the basic structure for writing an extension component. The create method is covered in demo. There are other common methods that can be used:

  • CreateChildren Creates a child node

  • AppendChild Adds a node to the child node list

  • RemoveChild Removes the child node list

You can also check out the source code for more methods.

Using the component

After development, all we need to do is install the components on the Web side if we want to use them.

// import the original weex-html5.
import weex from 'weex-html5'  
import polaroidPhoto from 'weex-polaroid-photo-web'  
// install the component.
weex.install(polaroidPhoto)  
Copy the code

Then add this tag to the.we file.

<template> <div> <weex-polaroid-photo text="hello" src="txt-color:#fff; bg-color:green" value="WEEX" onclick="handleClick"> </weex-polaroid-photo> </div> </template>Copy the code

Develop a third-party module using WEEX

We create a Confirm module, which is essentially a simple wrapper around a pop-up box.

Const confirm = {// define the user login method. callbackId) { if(window.confirm(msg)) { this.sender.performCallback(callbackId) } }, } const meta = { confirm: [{ name: 'ask', args: ['string', 'function']}]} export default {init (Weex) {// Register this module. Weex.registerApiModule('confirm', confirm, meta) } }Copy the code

To use it, you just need to import modules

<template> <div> <div class="btn" onclick="handleClick"> <text>ask</text> </div> </div> </template> <script> var confirm  = require('@weex-module/confirm') module.exports = { methods: { handleClick: function () { confirm.ask('are u ok? ', function () { // ... do sth. in callback. }) } } } </script>Copy the code

Write after upgrading to VUE

WEEX has recently released a new version that supports vUE rendering on the Web, so we can write extensions like vue components:

<! -- sidebar.vue --> <template> <div class="sidebar"> <slot></slot> </div> </template> <style scoped> .sidebar { /* ... */ } </style> <script> export default { props: [], data () { return {} } } </script>Copy the code

Then we just register

Import Vue from 'Vue' import Sidebar from './path/to/ Sidebar. Vue 'Copy the code

Compatible with older weeX versions

If we need to support both VUE and older WEEX, we need to expose the same entry, and then use the component structure to dynamically instantiate window.vue.

See weex-ActionSheet

Use Weexpack for plug-in development

Weexpack is a command-line tool developed around WEEx that can be used for project creation and packaging, as well as plug-in development and use.

First let’s install Weexpack globally

npm install weexpack -g
Copy the code

Then we automatically create a standard plug-in project

weexpack plugin create  plugin-test  
Copy the code

Then the directory automatically contains our three-terminal directory structure

If it is a front end, we can develop it in a Web directory.

Similarly, we can use other people’s plug-ins in a basic project directory that we create

weexpack plugin add plugin-name  
Copy the code

We just need to find the name of the plug-in. Local directories are also supported

weexpack plugin add .. /weex-plugin-testCopy the code

reference

Weex – project. IO/doc/advance…

Yq.aliyun.com/articles/61…

Github.com/weexteam/we…