我们用5分钟写了一个跨多端项目

.├── components // 包含各个组件├── pages // 包含各个页面├── app.js // 包含各个组件├── app.js  // 应用启动入口├── app.json // 全局配置├── app.wxss // 全局样式└── project.config.json // 项目配置文件

.├── dist // 各个端构建结果│   ├── alipay │   ├── baidu │   ├── wx │   ├── web  │   ├── weex │   └── config.json // 跨端配置map映射表├── node_modules // 第三方库├── mock // 模拟 接口数据 和 模板数据├── src  // 源代码开发目录│   ├── app // 应用启动入口│   ├── assets // 静态资源│   ├── components // 包含组件│   ├── pages  // 包含页面│   ├── store //数据管理│   └── router.config.json // 路由配置文件├── chameleon.config.js // 项目配置文件└── package.json // npm包配置文件

{  "miniprogramRoot": "./src",  "debugOptions": {}}

{  "pages": ["pages/index/index", "pages/logs/index"],  "window": {    "navigationBarTitleText": "Demo"  },  "networkTimeout": {    "request": 10000,    "downloadFile": 10000  }}

{  "navigationBarBackgroundColor": "#ffffff",  "navigationBarTextStyle": "black",  "navigationBarTitleText": "微信接口功能演示",  "backgroundColor": "#eeeeee",  "backgroundTextStyle": "light"}

// 设置静态资源的线上路径const publicPath = '//www.static.chameleon.com/static';// 设置api请求前缀const apiPrefix = 'https://api.chameleon.com';// 合并配置cml.config.merge({  wx: {    build: {apiPrefix}  },  alipay: {    build: {apiPrefix}  },  baidu: {    build: {apiPrefix}  },  web: {    dev: {      hot: true,      console: true    },    build: {      publicPath: `${publicPath}/web`,      apiPrefix    }  },  weex: {    build: {      publicPath: `${publicPath}/weex`,      apiPrefix    }  }})

<script cml-type="json">{  "base": {    "window": {      "navigationBarTitleText": "各个端共同title",    },    "permission": {      "scope.userLocation": {        "desc": "你的位置信息将用于小程序位置接口的效果展示"      }    }  },  "wx": {    "window": {      "backgroundTextStyle":"light",      "navigationBarBackgroundColor": "#fff",      "navigationBarTitleText": "差异化 title",      "navigationBarTextStyle":"black"    }  },  "baidu": {    "window": {      "backgroundTextStyle": "light"    }  },  "alipay": {      "window": {        "defaultTitle": "Chameleon"      }  }}</script>

<script cml-type="json">{  "base": {    "usingComponents": {      "navi": "/components/navi/navi",      "navi-npm": "cml-test-ui/navi/navi"    }  },  "wx": {  },  "alipay": {  },  "baidu": {  },  "web": {  },  "weex": {  }}</script>

{  "pages": ["pages/index/index", "pages/logs/logs"]}

{  "mode": "history",  "domain": "https://www.chameleon.com",  "routes":[    {      "url": "/cml/h5/index",      "path": "/pages/index/index",      "mock": "index.php"    },    {      "url": "/cml/h5/logs",      "path": "pages/logs/logs",      "mock": "logs.php"    }  ]}

App({  onLaunch(options) {    // Do something initial when launch.  },  globalData: 'I am global data'})

<script>import store from '../store/index.js'import routerConfig from '../router.config.json';
class App {  data = {    store,    routerConfig  }  created(res) {  }}
export default new App();</script>

// index.jsPage({  data: {    text: 'This is page data.'  },  changeText: function(e) {    // sent data change to view    this.setData({      text: 'CML'    })  }})

<script>class Index {  data = {    text: 'Chameleon'  }  methods = {    changeText: function(e) {      // sent data change to view      this.text = 'CML';    }  }  computed = {}  watch = {}};export default new Index();</script>

Component({  properties: {    myProperty: { // 属性名      type: String, // 类型（必填）      value: '' // 属性初始值（可选）    },    myProperty2: String // 简化的定义方式  },  data: {    text: ''  }, // 私有数据，可用于模板渲染
  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名  attached() { },   ready() { },  methods: {    onMyButtonTap() {      this.setData({        // 更新属性和数据的方法与更新页面数据的方法类似        text: 'wx'      })    }  }})

<script>class MyComponent {  props = {    myProperty: { // 属性名      type: String, // 类型（必填）      default: '' // 属性初始值（可选）    },    myProperty2: String // 简化的定义方式  }  data =  {    text: ''  } // 私有数据，可用于模板渲染
  beforeMount() {}  mounted() {}  methods = {    onMyButtonTap() {      this.text = 'cml'    }  }  computed = {}  watch = {}};export default new MyComponent();</script>

// index.jsPage({  onLoad(options) {    // Do some initialize when page load.  },  onReady() {    // Do something when page ready.  },  onShow() {    // Do something when page show.  },  onHide() {    // Do something when page hide.  },  onUnload() {    // Do something when page close.  },  onShareAppMessage() {    // return custom share data when user share.  }})

<script>class Index {  beforeCreate(query) {    // data数据挂载到this根节点上之前，以及methods所有方法挂载到实例根节点之前    // 注意：只用页面的 beforeCreate钩子 会返回页面query    console.log('App beforeCreate: 打开当前页面路径中的参数是 ', query)  }  created() {    // data,methods里面的这些events挂载完成    console.log('App created')  }  beforeMount() {    // 开始挂载已经编译完成的cml到对应的节点时    console.log('App beforeMount')  }  mounted() {    // cml模板编译完成,且渲染到dom中完成,在整个生命周期中只执行一次    console.log('App mounted')  }  beforeDestroy() {    // 实例销毁前    console.log('App beforeDestroy')  }  destroyed() {    // 实例销毁后    console.log('App destroyed')  }};export default new Index();</script>

<!--wxml--><view class="scroller-wrap">    <!--数据绑定-->  <view>{{message}}</view>  <!--条件渲染-->  <view wx:if="{{view == 'WEBVIEW'}}">WEBVIEW</view>  <view wx:elif="{{view == 'APP'}}">APP</view>  <view wx:else="{{view == 'MINA'}}">MINA</view>    <!--列表渲染-->  <view wx:for="{{array}}" wx:for-index="index" wx:for-item="item">{{item}}</view></view>

// page.jsPage({  data: {    message: 'Hello MINA!',    view: 'MINA',    array: [1, 2, 3, 4, 5]  },  onLoad() {    this.setData({      message: 'wx'    })  }})

<template><!--index.cml--><view class="scroller-wrap">    <!--数据绑定-->  <view>{{message}}</view>  <!--条件渲染-->  <view c-if="{{view == 'WEBVIEW'}}">WEBVIEW</view>  <view c-else-if="{{view == 'APP'}}">APP</view>  <view c-else="{{view == 'MINA'}}">MINA</view>    <!--列表渲染-->  <view c-for="{{array}}" c-for-index="index" c-for-item="item">{{item}}</view></view></template><script>class Index {  data =  {    message: 'Hello MINA!',    view: 'MINA',    array: [1, 2, 3, 4, 5]  }
  beforeCreate () {    this.message = 'cml'  }};export default new Index();</script>

<!--wxml--><view id="tapTest" data-hi="WeChat" bindtap="tapName">Click me!</view>

// page.jsPage({  tapName(event) {    console.log(event)  }})

<template>  <view id="tapTest" data-hi="WeChat" c-bind:tap="tapName">    <text>Click me!</text>  </view></template><script>class Index {  methods = {    tapName(e) {      // 打印事件对象      console.log('事件对象:', e);    }  }}export default new Index();</script>

/** common.wxss **/.small-p {  padding:5px;}

/** app.wxss **/@import "common.wxss";.middle-p {  padding:15px;}

/** common.css **/.small-p {  padding: 5px;}

<!-- app.cml --><style></style>

<template>  <view>    <view>view 基础组件</view>    <text>text 基础组件</text>  </view></template>

Component({  properties: {    // 这里定义了innerText属性，属性值可以在组件使用时指定    innerText: {      type: String,      value: 'default value',    }  },  data: {    // 这里是一些组件内部数据    someData: {}  },  methods: {    // 这里是一个自定义方法    customMethod() {}  }})

<script>class MyComponent {  props = {    // 这里定义了innerText属性，属性值可以在组件使用时指定    innerText: {      type: String,      value: 'default value',    }  }  data = {    // 这里是一些组件内部数据    someData: {}  }  methods = {    // 这里是一个自定义方法    customMethod() {}  }  computed = {}  watch = {}};export default new MyComponent();</script>

{  "usingComponents": {    "component-tag-name": "path/to/the/custom/component"  }}

<view>  <!-- 以下是对一个自定义组件的引用 -->  <component-tag-name inner-text="Some text"></component-tag-name></view>

<script cml-type="json">{  "base": {      "usingComponents": {        "component-tag-name": "path/to/the/custom/component"      }  }}</script>

<template><view>  <!-- 以下是对一个自定义组件的引用 -->  <component-tag-name inner-text="Some text"></component-tag-name></view></template>

<!-- 页面 page.wxml --><view>  <my-component bindcustomevent="onMyEvent"></my-component></view>

// 页面 page.jsPage({  methods: {    onMyEvent(e) {      console.log(e.detail) // 自定义组件触发事件时提供的detail对象    }  }})

<!-- 组件 my-component.wxml --><view>  <button bindtap="onTap">点击这个按钮将触发“myevent”事件</button></view>

// 组件 my-component.jsComponent({  methods: {    onTap() {      this.triggerEvent('customevent', {}) // 触发 自定义组件事件    }  }})

<!-- 页面 page.cml --><template>  <view>    <my-component c-bind:customevent="onMyEvent"></my-component>  </view></template><script>class Index {  methods = {    // 这里是一个自定义方法    onMyEvent(e) {      console.log(e.detail) // 自定义组件触发事件时提供的detail对象    }  }};export default new Index();</script><script cml-type="json">{  "base": {      "usingComponents": {        "my-component": "path/to/the/custom/component"      }  }}</script>

<!-- 页面 path/to/the/custom/component.cml --><template>  <view>    <button c-bind:tap="onTap">点击这个按钮将触发“myevent”事件</button>  </view></template><script>class MyComponent {  methods = {    // 这里是一个自定义方法    onTap() {      this.$cmlEmit('customevent', {}) // 触发 自定义组件事件    }  }};export default new MyComponent();</script><script cml-type="json"></script>

<script cml-type="json">{  "base": {      "usingComponents": {        "c-dialog": "cml-ui/components/c-dialog/c-dialog"      }  }}</script>

<!-- map.wx.cml --><template>  <origin-map    id="map"    longitude="113.324520"    latitude="23.099994"    controls="{{controls}}"    bindcontroltap="controltap"    style="width: 100%; height: 300px;"  ></origin-map></template>

try {  wx.setStorageSync('name', 'Hanks')} catch (e) {  console.error(e)}

import cml from 'chameleon-api'cml.setStorage('name', 'Hanks').then((res)=>{  console.log(res)},function(e){  console.error(e)})