# 与小程序的差异

# qa 前缀

在 .qxml 文件中。

<!--列表渲染 qxml-->
<view qa:for="{{array}}"> {{item}} </view>
<!--条件渲染 wxml-->
<view qa:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view qa:elif="{{view == 'APP'}}"> APP </view>
<view qa:else="{{view == 'MINA'}}"> MINA </view>

在 js 文件中，使用快应用的 api 固有的前缀为qa.，例如： qa.canIUse, qa.getSystemInfo

注： 如果是使用小程序转化工具转化的快应用，工具会把 wx 前缀替换为快应用的 qa 前缀（特殊写法的 wx 可能会漏转）

# 特别强调

1、不支持小程序如下能力的转换：

• 数据上报
• 数据分析
• 收货地址
• 卡券
• 发票
• 生物认证
• 微信运动
• 性能
• 订阅消息
• 微信红包
• 云开发
• 插件

2. 登录和支付

登录和支付与微信存在差异，具体登录流程请参考：快应用接入账号服务，支付流程请参考：快应用接入微信支付

3. 动态 require 需要指明路径前缀，例如：

如下为错误的写法，因为""不是路径前缀

const mods = [
  {
    name: "foo",
    path: "./utils/foo.js"
  },
  {
    name: "bar",
    path: "./utils/bar.js"
  }
];
let exports = {};
for (let mod in mods) {
  exports[mods[mod].name] = require("" + mods[mod].path);
}

正确的做法如下：

const mods = [
  {
    name: "foo",
    path: "foo.js"
  },
  {
    name: "bar",
    path: "bar.js"
  }
];
let exports = {};
for (let mod in mods) {
  exports[mods[mod].name] = require("./utils/" + mods[mod].path);
}

对于这个例子，还有更简洁的写法

const mods = ["foo", "bar"];
let exports = {};
for (let modName in mods) {
  exports[modName] = require("./utils/" + modName);
}

总结如下：

// 以下写法均不支持
require("" + modPath);
require(modPath);

// 但支持
require("./utils" + subpath);
// 推荐的写法
require("./utils/foo");

推荐使用静态引用的方式。静态引用模块的代码，在编译阶段将得到尽可能大的优化，构建 工具仅打包引用到的文件，提高运行时的执行效率。

4. 真机调试功能尚不完全可用

5.app.json 中的必填字段

项目根目录下有一个 app.json 文件，其中有几项是必填配置项，详细如下：

{
  "package": "com.example.demo",// 必填 包名
  "name": "demo", // 必填 应用名称
  "icon": "assets/images/logo.png", // 必填 图标的路径-用于保存桌面图标时显示
  "versionName": "1.0", //非必填 应用版本名称
  "versionCode": 1, // 必填 应用版本号
  "minPlatformVersion": 1051,  //必填 快应用引擎最低版本号（不能低于1051）
  "pages": [ // 必填 页面路由，查找页面文件的位置
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": { // 非必填 用于设置状态栏、导航条、标题、窗口背景色
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  }
}

【注意】： minPlatformVersion 的版本号不能低于 1051

6. 目前不支持的接口

1. onWifiConnected
2. connectSocket

7. <template> 标签中 data 属性的数据绑定

模板中数据绑定使用的是“Mustache”语法 (双大括号) 的文本插值：

<template is="msgBox" data="{{message: 'message'}}"/>

小程序将分隔符{{,}}当做表达式的一部分,我们认为这是一个设计错误，因为分隔符也可以设计成[[,]],((,))。所以在以下场景我们更推荐使用正确的写法。

对于以下 template

<template name='msgBox'>
  <view class='msg-box'>
    <text>message: {{ message }}</text>
  </view>
</template>

对 <template> 标签中 data 属性的进行数据绑定，以下两种写法，微信小程序只支持第一种写法，小程序转快应用工具都支持，但是更推荐第二种正确的插值表达式写法。

<view style="border: 5rpx solid red;">
  <template is='msgBox' data='{{ ...data }}'></template>
  <template is='msgBox' data='{{ data }}'></template>
</view>

两者都支持以下写法

<view style="border: 5rpx solid blue;">
  <template is='msgBox' data='{{ message: "message" }}'></template>
</view>

微信小程序不支持下面这种写法, 小程序转快应用工具支持

<view style="border: 5rpx solid green;">
  <template is='msgBox' data='{{ {message: "message"} }}'></template>
</view>

微信小程序、小程序转快应用工具均不支持下面这种写法

<template is='msgBox' data='{{ "message" }}'></template>

8.组件属性多次设置同一个值将不会触发组件视图更新

典型场景 1，movable-view 组件。首先通过 js 设置 scale 为 2，然后双指缩放 movable-view，最后再通过 js 设置 scale 为 2。 最后一步将不会触发 movable-view 组件的视图的更新，因为运行时记录的 scale 值一直都是 2。

典型场景 2，checkbox 组件。首先给和 checked 属性绑定的 checkedData 赋值 false，再通过点击 checkbox 使其勾选，但此时 data 中的 checkedData 仍然是 false，所以当点击 button 的时候，checkbox 的勾选不会被取消。此时可以通过 checkbox-group 的 bindchange 事件让视图中的更新实时更新到数据中。

 <checkbox value="{{valueData}}" checked="{{checkedData}}"></checkbox>
 <button bindtap="changeValue" type="primary">改变 checked</button>

Page({
  data: {
    valueData: "selected",
    checkedData: false
  },
  changeValue(e) {
    this.setData({
      isChecked: false
    });
  }
});

9.部分机型截屏监听事件无效

目前发现在部分机型上面可以正常截屏，但是截屏监听事件无效。已知机型如下：

• Android 5
• Android 6

10. chooseVideo 接口不支持默认唤起前置摄像头

11. class 不能作为自定义组件<template>的 property

12. 原有快应用使用微信小程序转快应用工具转换后：getSavedFileList 接口在升级后有可能没有办法获取之前保存的文件，可以通过qa.getSavedFileInfo(Object object)查询之前保存的某个文件

13. 不支持自定义组件的多根节点

自定义组件 comp 的 qxml 文件：

<view>banana</view>
<view>apple</view>
<view>pear</view>

页面的 qxml 文件：

<view class="first">
  <comp/>
</view>

dom 结构：

自定义组件 comp 多包了一层 q-view 。建议不要使用多个根节点的自定义组件。

14. q-page 标签的高度是由其内部元素的高度撑起来的

页面的 qxml 文件：

<view class="first"></view>
<view class="second"></view>

页面的 css 文件：

.first {
  height: 100px;
  background-color: darkgreen;
}

.second {
  height: 200px;
  background-color: darkorange;
}

此时 q-page 的高度是两个 view 的高度之和，即 300px 。建议给 q-page 内的元素设置合适的高度。

15. button 组件

button 组件的默认宽度是 100% 。

16. input 组件

input 组件的默认宽度是 100% 。

17. p 标签

p 标签是块级元素 。

# 组件与小程序的差异

18. 不支持navigate到未在 app.json 中定义的页面

小程序转快应用工具目前不支持navigate到未在 app.json 中定义的页面，修改未在 app.json 中定义的页面的内容也不会触发重新编译。

# 一些建议

• 不要混合使用 ES6 import 和 commonjs exports；

• 目前不支持同层渲染，因此在写页面时，不要让原生组件和前端组件在位置上重叠，否则原生组件会盖在重叠区域之上；