# 多端适配

# 设计稿尺寸单位

框架默认开启 px 单位转换功能，在小程序中会转换为 rpx，在 H5 中会转换为 rem。

将编译配置中 designWidth 设置为实际设计稿的宽度值，在开发汇总书写尺寸即可按照 1:1 的关系来进行书写，即从设计稿上量的长度 100px，那么尺寸书写就是 100px。详细设置参考【编译配置】。

# 特性支持

# 全局方法

# 配置

# App

tabBar

tabBar.list: Array<item: Object>

list 接受一个数组，tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：

window

# Page

# 生命周期和事件方法

Mars (在 Page 和 Componet 上)支持完整的 Vue 生命周期和小程序生命周期，对应的映射关系如下，建议开发者使用 Vue 生命周期来开发。

# App

# 页面 Page

# 组件 Component

# 特性

# Component 构造器

这里只列出小程序特有的特性，生命周期和 Vue 单文件组件具有的特性请参考上述【生命周期和页面方法】以及【Vue 特性支持 - 自定义组件】。

# 多端不同业务逻辑适配方法

1、JS 逻辑适配

环境判断条件：process.env.MARS_ENV

if (process.env.MARS_ENV === 'h5') {
    // 此代码块里的内容只渲染到h5端
    // todo ...
}
else if (process.env.MARS_ENV === 'swan') {
    // 此代码块里的内容只渲染到swan端
    // todo ...
}
else if (process.env.MARS_ENV === 'wx') {
    // 此代码块里的内容只渲染到wx端
    // todo ...
}

2、template 逻辑适配

通过模板<template-mars target="h5/swan/wx">判断

<template-mars target="h5" > // 在H5端渲染为<template>
    ...
</template-mars>

<template-mars target="swan"> // 在swan渲染为<block>，wx同理
    ...
</template-mars>

3、style 逻辑适配

通过<style target="h5/swan/wx">判断 style 标签不需要写scoped 编译过程统一加

<style target="swan/wx">
// 此处的style 会与其他style 按顺序合并到一个 style标签，编译到swan/wx
</style>

<style target="h5">
// 此处的style直接编译到H5端，单独style标签存在
</style>