如何注册

如何注册程序

小程序注册程序

在小程序项目里面，App() 函数用来注册一个小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。

示例代码

  1. App({
  2.   onLaunch(options) {
  3.     // Do something initial when launch.
  4.   },
  5.   globalData: "I am global data"
  6. });

cml 注册程序

示例代码

  1. <script>
  2.   import store from "../store/index.js";
  3.   import routerConfig from "../router.config.json";
  5.   class App {
  6.     data = {
  7.       store,
  8.       routerConfig
  9.     };
  10.     created(res) {}
  11.   }
  13.   export default new App();
  14. </script>

细心的你会发现，

小程序中app.json app.js app.wxss和 src/app/app.cml的对应关系如下

小程序 app.jscml 项目 src/app/app.cml
app.js<script></script>
app.wxss<style></style>
app.json<script cml-type="json"></script>

如何注册页面

小程序注册页面

在小程序项目里面，Page(Object) 函数用来注册一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。

示例代码：

  1. // index.js
  2. Page({
  3.   data: {
  4.     text: "This is page data."
  5.   },
  6.   changeText: function(e) {
  7.     // sent data change to view
  8.     this.setData({
  9.       text: "CML"
  10.     });
  11.   }
  12. });

cml 注册页面

示例代码

  1. <script>
  2.   class Index {
  3.     data = {
  4.       text: "Chameleon"
  5.     };
  6.     methods = {
  7.       changeText: function(e) {
  8.         // sent data change to view
  9.         this.text = "CML";
  10.       }
  11.     };
  12.     computed = {};
  13.     watch = {};
  14.   }
  15.   export default new Index();
  16. </script>

如何注册组件

小程序注册组件

在小程序项目里面，Component(Object) 构造器可用于定义组件，调用 Component 构造器时可以指定组件的属性、数据、方法等。

示例代码

  1. Component({
  2.   properties: {
  3.     myProperty: {
  4.       // 属性名
  5.       type: String, // 类型（必填）
  6.       value: "" // 属性初始值（可选）
  7.     },
  8.     myProperty2: String // 简化的定义方式
  9.   },
  10.   data: {
  11.     text: ""
  12.   }, // 私有数据，可用于模板渲染
  14.   // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  15.   attached() {},
  16.   ready() {},
  17.   methods: {
  18.     onMyButtonTap() {
  19.       this.setData({
  20.         // 更新属性和数据的方法与更新页面数据的方法类似
  21.         text: "wx"
  22.       });
  23.     }
  24.   }
  25. });

cml 注册组件

示例代码

  1. <script>
  2.   class MyComponent {
  3.     props = {
  4.       myProperty: {
  5.         // 属性名
  6.         type: String, // 类型（必填）
  7.         default: "" // 属性初始值（可选）
  8.       },
  9.       myProperty2: String // 简化的定义方式
  10.     };
  11.     data = {
  12.       text: ""
  13.     }; // 私有数据，可用于模板渲染
  15.     beforeMount() {}
  16.     mounted() {}
  17.     methods = {
  18.       onMyButtonTap() {
  19.         this.text = "cml";
  20.       }
  21.     };
  22.     computed = {};
  23.     watch = {};
  24.   }
  25.   export default new MyComponent();
  26. </script>