This issue recommends an open source small program cross-end unified solution. — chameleon.
R&D students not only pursue the flexibility of h5, but also pursue the performance closer to the original. In the face of entrance expansion, a single function of App client, wechat mini program, Alipay mini program, Baidu mini program, Android manufacturer alliance fast application, and other mini programs must be repeatedly implemented on each platform, and the development and maintenance costs will increase exponentially. There is an urgent need to maintain a set of code that can build a multi-entry solution, and Chameleon, Didi’s cross-end solution, has finally been released. Really focus on making a set of code run on multiple ends.
class=”pgc-h-arrow-right” data-track=”79″>
High development efficiency : original and powerful cross-end syntax checking function; The best engineering design in the industry
Good maintainability : original polymorphic protocol; Easily maintain a set of code across multiple ends
Progressive access : one-click export of native components; Pollution-free reference native components
strong scalability : based on polymorphic protocol, it can extend any underlying interface; Updates that do not strongly depend on the framework
Rich base libraries : unified CML Native SDK; Rich components, API libraries
Multi-end highly consistent : unified code, interface interaction, development process; Multi-level highly unified
class=”pgc-h-arrow-right” data-track=”6″>
The most basic concepts in software architecture design are “split” and “merge”. The meaning of split is “divide and rule”, which divides complex problems into a single problem to solve, such as the “microservitization” design of back-end business systems; The meaning of “merger” is to abstract and converge the same business requirements into one piece to achieve the purpose of high efficiency and high quality, such as the design of “middle service” in the back-end business system.
Chameleon belongs to the latter. By defining a unified language framework + unified polymorphic protocol, Chameleon can extract self-generated, continuous and maintainable “front-end and middle service” from multi-end (corresponding to multiple independent services) services.
class=”pgc-h-arrow-right” data-track=”39″>
Supported platforms: web, wechat mini program, Alipay Mini program, Baidu Mini program, android(weex), ios(weex), qq mini program, ByteDance mini program, fast application, continuous update
class=”pgc-h-arrow-right” data-track=”37″> cross-end target
Although each end environment is ever-changing, what always changes is the idea of MVVM architecture. Chameleon aims to unify the MVVM cross-end environment.
class=”pgc-h-arrow-right” data-track=”80″> Install
dependent environment
> node > = 8.10.0 > = < / span > < span class = "HLJS - number" > 5.6 < / span > < span class = "HLJS - number" >. 0 < / span > < / code > < / pre >
Install chameleon-tool
You are advised to use nvm to manage Node versions. yarn and cnpm are not supported for installation.
npm i -g chameleon-toolAfter successful installation, run cml-v to view the current version and cml-h to view the help documentation.
Create project and start
- execute cml init project
- Enter project name
- Wait for automatic execution of npm install dependency
- Switch to the project root directory and execute cml dev
- will automatically open the preview screen as follows:
Directory and file structure
├── chameleon.config.js // Project configuration file
├─ dist // ├─ dist
├── alipay // ├─ Alipay
├── baidu //
├── wx // ├── wx
├── tt //
├── qq // ├── QQ
├── xx //
├─ mock // ├─ mock
├── node_modules // npm package dependencies
├── package.json
└─ src // project source span
├── app // ├── app
├── components //
├── pages //
├─ route. config.json // Route configuration
└─ store // global state management editor plugin
- idea, WebStorm plugin CML Language Support
- VS Code plugin cml
- Atom plug-in languages-cml
- Sublime plugin under review, please look forward to…
Code example
<template>
<view>
<text>{{title}}</text><text>{{reversedTitle}}</text>
</view>
</template>
<script>
class Index {
data = {
title: "chameleon"
}
computed = {
reversedTitle: function () {
return this.title.split('').reverse().join('')
}
}
mounted() {}
destroyed() {}
}
export default new Index();
< /script> Those who have been engaged in web programming know that web programming uses a combination of HTML + CSS + JS. Similarly, chameleon uses CML + CMSS + JS.
- JS syntax is used to deal with the logical layer of the page. Compared with common web programming, this project aims to define the standard MVVM framework, which has a complete life cycle, watch, computed, data two-way binding and other excellent features, which can quickly improve the development speed and reduce the maintenance cost.
- CML (Chameleon Markup Language) is used to describe the structure of a page. We know that HTML is a set of standard semantic tags, for example, text is < span> The button is < button> . CML also has a standard set of tags, which we define as components, and CML provides users with a set of components. In addition, CML also supports template syntax, such as conditional rendering, list rendering, data binding, and so on. At the same time, CML supports the use of Vue-like syntax, so you can get started faster.
- CMSS(Chameleon Style Sheets) is a style language used to describe the structure of CML pages. It has most of the features of CSS, and can also support a variety of css preset language less stylus.
- CML adopts the same componented scheme, single-file organization mode, and life cycle as Vue. Meanwhile, data response capability is aligned with Vue, and data management capability is aligned with Vuex, which is very convenient for developers to start and maintain.
Through the above introduction to the development language, I believe you can see as long as you have the knowledge of web programming can quickly get started with the development of chameleon.
—END—
Open source protocol: Apache-2.0
