开发

在项目 src 目录下进行开发。

通过现有小程序代码转换出快应用代码：

  • js：业务逻辑 js 代码通过工具自动转换兼容
  • 模板： wxml 业务手写转换直达号部分，文件名以 .tpl 作为后缀
  • 样式： wxss 业务手写转换直达号部分，文件名以 .style 作为后缀（样式支持写 scss）。对于 .scss 文件，两边可以共用。打包时小程序优先找 .wxss，找不到会找 .scss。快应用优先找 .style，找不到会找 .scss。

对于 API 的兼容：

  • 所有 wx 的 API 都可以调用，不兼容的 API，在 dev 和 beta 环境下，会 console.error 并有 toast 提示。
  • getApp、getCurrentPages 也已经兼容，可直接使用。
  • 关于路由，已经统一小程序与直达号路由名称和传参方式 ，必须按小程序的 API 进行调用（否则影响 getCurrentPages 获取结果）。（因为测试覆盖的场景不多，有问题及时沟通）
  • getStorageSync，setStorageSync 同步方法不支持。能改成异步尽量改成异步。

某页面的代码目录结构大概如下：

└── src
    └── pages
        └── home
            ├── home.js                // 页面 js
            ├── home.json              // 页面配置
            ├── home.style             // 快应用样式
            ├── home.tpl               // 快应用模板
            ├── home.wxml              // 小程序模板
            └── home.wxss              // 小程序样式

如何转换小程序 <template> 模板

由于快应用不支持小程序 <template> 模板语法。需要通过以下方式兼容：

将 .wxml 文件转换成对应的 .tpl 文件：

<template name="person">
  <view>
    <view>姓名：{{name}}</view>
    <view>年龄：{{age}}</view>
  </view>
</template>

// wxml -> tpl
// 以 <template>...</template> 作为根标签, name 属性可以省略：

// 可以省掉 name
<template>
  <div>
    <div>姓名：{{name}}</div>
    <div>年龄：{{age}}</div>
  </div>
</template>

使用 .tpl 文件，import 时候需要添加 name 属性，然后以 name 作为标签名，像快应用组件一样调用，src 只能用相对路径：

// 需要添加 name 作为标签名
<import name="person" src="../components/item"></import>
<template>
<div class="home">
  // 组件调用
  <person name={{name}} age={{age}}> </person>
  <text class="title">Hello {{title}}</text>
</div>
</template>

属性传递只能一一展开，不支持小程序的 data="{{...obj}}"：

<person name={{name}} age={{age}}></person>

如果传递函数需要绑定 this：

<person addAge={{addAge.bind(this)}}></person>

使用宏

代码宏

宏可以指定代码在特定平台打包时才会打包进最终代码中。

js、json、样式文件都可以使用宏：

//#if WX
const platform = 'wx';
//#elseif MIX
const platform = 'mix';
//#endif

.btn {
  @if $WX {
      background-color: #09ba07;
  } @else if $MIX {
      background-color: #ff0000;
  }
}

{
//# if WX
    "pages": [
        "pages/search/index",
    ],
//# elseif MIX
    "pages": [
        "pages/ucenter/login/login",
    ],
//# endif
    "asserts": [
        "images"
    ]
}

package.json 不能使用宏

WX 代表小程序平台，MIX 代表快应用平台。打包时指定 --mix，判断逻辑 WX 里的代码将会被删除。

文件名宏

所有文件包括 js、wxml、tpl、json、wxss、style、scss 文件名后都可以添加 @wx、@mix 平台后缀。

用户引入一个文件（例如 require('./util.js')），如果没找到这个文件，那么找 @平台 的文件（例如util@wx.js）。这样按平台引入文件，会在不增加包体积的同时，兼容两个平台。

工程化与目录结构

工程化的概念

一个快应用项目由三个模块组成：

  • 公共模块 mp_module_common
  • 首页模块 mp_home_xxx
  • 业务模块 mp_module_xxx

home_xxx 包括快应用的首页，common 模块主要是一些公共页面（我的、订单）及公共组件。 一般这两个模块是公司快应用项目必须的。

每个模块对应一个 git 工程。每个快应用也对应一个 git 工程 mp_app_xxx，在其 package.json 的 modules 里配置了组成该快应用所引用的模块。这样同一快应用，不同业务线在独立工程下开发，互不影响。

模块工程目录结构

.
├── README.md       # ReadMe
├── .micrapp_cache  # 编译中间产物目录
├── cache           # 编译后的代码目录
      └── mix       # 编译后快应用最终项目目录（类似官方工具 hap init <ProjectName> 出的目录）
├── node_modules
├── package.json    # 工程配置
├── libs            # 其他模块安装目录
└── src             # 源码路径

备注

一些不得不说的坑

  • 在直达号中， 根目录下的 common 目录不能用，工具会自动把 common 转换为 __common, 路由跳转时，也会自动转化。
  • 在直达号中，不能有 list.mix，这样的文件，因为 list 是保留字。。。。不明所以。。。。现在工具已经避免了这样的问题。遇到类似保留字情况，请和我们即时沟通。
  • 在构建过程中，我们会把 require('xxxx')，替换为 global.r(number)，然后在 入口文件里统一 require。为什么？因为多个页面，引同一个 js，会在每个页面里打包一份这个 js，会增大体积，因此在入口文件里，require 后挂在 global 上使用。

标签属性获取

小程序在组件中可以定义数据，这些数据将会通过事件传递给 SERVICE。 书写方式： 以 data- 开头，多个单词由连字符 - 链接，在 js 中以 event.currentTarget.dataset.xxx 获取。

直达号中获取方式为：event.target.attr.xxx, 所以工具转换方式为：

event.currentTarget.dataset.xxx => event.target.attr.dataXxx

如果源代码为：

var target = e.target || {};
var type = target.dataset && target.dataset.type;

工具无法识别转换，需要自己兼容。

公共组件传参变动

关于城市选择、日历组件传参有些变动。之前小程序参数名为 data，由于直达号接收参数方式不同，参数名不能用 data，故改为 mixData

安装 release 包前需清除缓存

因为开发包、release 包的签名不一样，需要清除应用数据。

设置 → 应用管理 → 清除快应用调试器所有数据及缓存 → 清除快应用引擎或者轻应用（每个手机不同）所有数据及缓存

发布系统 prod 发布的都是 release 包。

文档
分包