小程序开发到跨端

文件结构

小程序分为 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页面配置

微信文档连接[1] 支付宝文档连接[2]

都是小程序,规则都大同小异,而且每个页面都要包含: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文档链接:地址[3]

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: {}, // 私有数据,可用于模板渲染


  methods: {
    onMyButtonTap: function(){
      this.setData({
        // 更新属性和数据的方法与更新页面数据的方法类似
      })
    }
  }


})

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

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

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


到现在为止我们已经掌握了跨端框架的基本用法,它决绝了各个平台之间文件类型不同的问题,其实这只是一部分的知识,框架还有很多增强的东西,比如计算属性和侦听函数watch在MPX中一样能使用,关于这部分知识在下篇文章中介绍。

References

[1] 微信文档连接: https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html
[2] 支付宝文档连接: https://opendocs.alipay.com/mini/framework
[3] 地址: https://didi.github.io/mpx/single/what-is-single-file.html#%E4%BB%8B%E7%BB%8D

展开阅读全文
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值