小程序开发到跨端

文件结构

小程序分为 app 和 page 两层。app 用来描述整个应用，page 用来描述各个页面。

app 由三个文件组成，必须放在项目的根目录。

文件	必填	作用
app.js	是	小程序逻辑
app.json	是	小程序全局设置
app.acss	否	小程序全局样式表

page 由四个文件组成，分别是：

文件类型	必填	作用
js	是	页面逻辑
axml	是	页面结构
acss	否	页面样式表
json	否	页面配置

注意： 为了方便开发者，支付宝小程序规定这四个文件必须具有相同的路径与文件名。

上面是支付宝小程序的文件命名规则，下面是微信小程序的规则。

文件	必填	作用
app.js	是	小程序逻辑
app.json	是	小程序全局设置
app.wxss	否	小程序全局样式表

文件类型	必填	作用
js	是	页面逻辑
wxml	是	页面结构
wxss	否	页面样式表
json	否	页面配置

微信文档连接
支付宝文档连接

都是小程序，规则都大同小异，而且每个页面都要包含：JS页面逻辑、样式文件、DOM结构和JSON配置文件。

可是作为熟悉vue开发的用户来说，我都习惯来单文件组件，也就是之前我们在写vue文件的时候可以把HTML模板、JS逻辑和CSS都写到一个文件里面，可是到了小程序非得搞得这么麻烦，必须要建几个不同的文件。

<!-- my-component.vue -->
<template>
  <div>This will be pre-compiled</div>
</template>
<script>
  data () {
    
    
    return {
    
    }
  }
</script>
<style>
  .bg {
    
    
    background: red;
  }
</style>

因此对于熟悉单文件写法的开发来说，这个改变会给我我们造成麻烦，于是乎发现找到来市面上的跨端框架-MPX，它的写法就是类似于单文件的写法。

一个重要的事情值得注意，关注点分离不等于文件类型分离。怎么看待关注点分离？，推荐大家vue文档中的部分介绍：https://cn.vuejs.org/v2/guide/single-file-components.html

MPX文档链接：地址

MPX的单文件写法和Vue十分类似

<!--对应wxml文件-->
<template>
  <view>hello mpx</view>
</template>
<!--对应js文件-->
<script>
</script>
<!--对应wxss文件-->
<style lang="stylus">
</style>
<!--对应json文件-->
<script type="application/json">
</script>

接下来带着大家一步一步接入MPX，一定会慢慢的喜欢这个框架。

注册小程序

之前已经介绍来文件的结构，不管是支付宝还是微信，每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。

// app.js
App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

不管是支付宝还是微信都使用App方法传入一个配置对象的形式注册小程序，但是生命周期各个平台存在差异化。

那么MPX框架如何注册小程序呢？MPX在 app.mpx 中调用createApp方法注册小程序。在MPX框架中文件的后缀是mpx结尾的。然后同样的在配置对象里面编写各个平台的生命周期。

// app.mpx 
createApp({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

那有人就会很好奇，各个平台都有的生命周期我们不担心，比如onLaunch微信和支付宝都有，但是各个平台中生命周期遇到不一致的怎么办呢？比如onThemeChange生命周期只在微信里面又，支付宝里面没有怎么办呢？MPX是如何转换的呢？

其实对于平台之间没有的API在MPX是不能转换，也就是说在转换的过程中MPX不能单独在支付宝里面自己实现一个onThemeChange生命周期让它在特定的时机去调用。只是平台支持的API平台才会执行，平台不支持的API不执行罢了。所以onThemeChange生命周期如果你在代码里面写了，在微信是可以调用执行的，在支付宝里面不会被调用执行，只有等到平台原生支持这个属性才可以执行。

注册页面

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

Page({
  data: {
    text: 'init data',
    array: [{msg: '1'}, {msg: '2'}]
  }
})

不管是微信还是支付宝都使用Page方法进行注册页面。在MPX中使用createPage方法进行注册页面。

createPage({
  data: {
    text: 'init data',
    array: [{msg: '1'}, {msg: '2'}]
  }
})

注册组件

Component(Object object)
创建自定义组件，接受一个 Object 类型的参数。

Component({

  behaviors: [],

  // 属性定义（详情参见下文）
  properties: {
    myProperty: { // 属性名
      type: String,
      value: ''
    },
    myProperty2: String // 简化的定义方式
  },

  data: {}, // 私有数据，可用于模板渲染

  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached: function () { },
    moved: function () { },
    detached: function () { },
  },

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
  ready: function() { },

  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show: function () { },
    hide: function () { },
    resize: function () { },
  },

  methods: {
    onMyButtonTap: function(){
      this.setData({
        // 更新属性和数据的方法与更新页面数据的方法类似
      })
    },
    // 内部方法建议以下划线开头
    _myPrivateMethod: function(){
      // 这里将 data.A[0].B 设为 'myPrivateData'
      this.setData({
        'A[0].B': 'myPrivateData'
      })
    },
    _propertyChange: function(newVal, oldVal) {

    }
  }

})

不管是微信还是支付宝都使用Component方法进行创建组件，只是里面的配置对象的参数有点不一样。

在MPX中使用createComponent创建组件。

使用自定义组件
声明好一个组件后，即可在其他页面上使用。

// /pages/index/index.json
{
  "usingComponents": {
    "my-component":"/components/index/index"
  }
}