# 与小程序的差异

# 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>
1
2
3
4
5
6

js 文件中

使用快应用的 api 固有的前缀为qa. ,例如: qa.canIUse, qa.getSystemInfo

: 如果是使用小程序转化工具转化的快应用,工具会把 wx 前缀替换为快应用的 qa 前缀(特殊写法的 wx 可能会漏转)

# 特别强调

1. 动态 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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

正确的做法如下:

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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

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

总结如下:

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

// 但支持
require("./utils" + subpath);
// 推荐的写法
require("./utils/foo");
1
2
3
4
5
6
7
8

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

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

3.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"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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

4. 目前不支持的接口

  1. onWifiConnected
  2. connectSocket

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

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

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

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

对于以下 template

<template name='msgBox'>
  <view class='msg-box'>
    <text>message: {{ message }}</text>
  </view>
</template>
1
2
3
4
5

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

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

两者都支持以下写法

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

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

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

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

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

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

典型场景 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>
1
2
Page({
  data: {
    valueData: "selected",
    checkedData: false
  },
  changeValue(e) {
    this.setData({
      isChecked: false
    });
  }
});
1
2
3
4
5
6
7
8
9
10
11

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

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

  • Android 5
  • Android 6

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

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

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

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

自定义组件 comp 的 qxml 文件:

<view>banana</view>
<view>apple</view>
<view>pear</view>
1
2
3

页面的 qxml 文件:

<view class="first">
  <comp/>
</view>
1
2
3

dom 结构:

drawing

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

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

页面的 qxml 文件:

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

页面的 css 文件:

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

.second {
  height: 200px;
  background-color: darkorange;
}
1
2
3
4
5
6
7
8
9

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

13. button 组件

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

14. input 组件

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

15. p 标签

p 标签是块级元素 。

16. 登录和支付

登录和支付与微信存在差异,具体支付流程请参考:快应用接入微信支付

# 组件与小程序的差异

一级分类
二级分类
小程序转快应用工具不支持属性
视图容器 scroll-view enable-flex,enable-back-to-top
swiper skip-hidden-item-layout ,easing-function
cover-view scroll-top
表单组件 button open-type,lang, session-from,send-message-title,send-message-path,send-message-img,app-parameter,show-message-card,bindgetuserinfo,bindcontact,bindgetphonenumber,binderror,bindopensetting,bindlaunchapp,binderror,bindopensetting,bindlaunchapp
editor 组件暂不支持
form report-submit,report-submit-timeout
input auto-focus,bindinput的参数keyCode,bindfocus的参数height ,bindkeyboardheightchange
textarea auto-focus,fixed, bindfocus的参数height,bindlinechange的参数height 和 heightRpx, bindinput的参数keyCode ,bindkeyboardheightchange
地图 map covers, skew,subkey,layer-style ,marker,aria-label,enable-3D,enable-satellite,enable-traffic,bindregionchange的参数causedBy
画布 canvas type,canvas-id,disable-scroll,bindtouchstart,bindtouchmove,bindtouchend,bindtouchcancel,bindlongtap,binderror
视频 video duration,danmu-list,danmu-btn,enable-danmu,loop,muted,initial-time page-gesture, direction, show-progress,show-fullscreen-btn,show-play-btn,show-center-play-btn,enable-progress-gesture ,show-mute-btn,title,play-btn-position,enable-play-gesture,auto-pause-if-navigate,auto-pause-if-open-native,vslide-gesture,vslide-gesture-in-fullscreen,ad-unit-id,bindwaiting ,bindprogress,bindloadedmetadata

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

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

# 一些建议

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

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

在线客服