• 常见问题解答
    • 如何查阅旧文档？
    • Windows 指令错误
    • Android Studio 中 Gradle 错误
    • 使用本地图片
    • Windows 错误 The header content contains invalid characters （头中包含非法字符）
    • Playground 应用在扫面后什么都没有显示（白屏）
    • 关于 ECMAScript 版本问题
    • 前端依赖
    • iOS 文本 line-height 样式不正常
    • Android 只支持 overflow:hidden
    • 如何取消 750 像素自适应并以宽高比计算真实像素？
    • 如何在 JavaScript 中检测是否支持某个原生的 module/component
      • 检测原生 module
      • 检测原生 component
    • 如何在 pages 之间传递数据
    • 父子组件之间进行 repeat 操作

    常见问题解答

    如何查阅旧文档？

    你可以通过文档左侧目录最后一项 “旧文档” 进入对于的历史文档页面。也可以直接访问以下链接访问：

    • Guide
    • 手册
    • 高阶知识
    • 工具

    Windows 指令错误

    请先安装 Git for Windows，在 For Windows 中查看更多信息。

    Android Studio 中 Gradle 错误

    下载 license-gradle-plugin.jar 可能引发一些错误，比如 链接被重置（Connection reset） 和 证书无效（peer not authenticated） 。这可能是由于网络问题导致的，请尝试使用代理或VPN。

    使用本地图片

    Weex 的原生运行机制支持从设备中加载图片，你只需要设置文件 url，例如 file:///sdcard/image_new0.png 这样的格式。但是 Weex 暂时还不支持加载你工程中的图片文件。

    Windows 错误 The header content contains invalid characters （头中包含非法字符）

    这是由于 weex-toolkit 的依赖 http-server 导致的，http-server 的老版本在中文 windows 中的支持不是很好。我们已经修复了这个问题，请在使用前升级 weex-toolkit 版本。

    Playground 应用在扫面后什么都没有显示（白屏）

    最好的方法是查看 debug 日志来查找原因，你可以按照 这篇文档 中的说明来查明导致这一问题的原因。

    关于 ECMAScript 版本问题

    Weex 在 iOS 中使用 JSCore ，在 Android 中使用 v8，因此他们都支持 ECMAScript 5。另外，我们还在原生环境中加了一些 polyfills：

    • Promise in iOS/Android
    • Timer APIs (setTimeout/clearTimeout/setInterval/clearInterval`) in iOS/Android
    • console in iOS/Android

    在浏览器中我们暂时是包含了一个 Promise 的 polyfill。

    在未来，开发者可以选择是否通过 configurations 来导入一个 polyfill。

    你也可以通过带有 webpack 的 babel 来写 ES6，这个加载器能够自动将 ES6 转换为 ES5。

    如果你还想要更多的 ES6 polyfills，你可以把他们引入到 JS Bundle 中。

    前端依赖

    在 Weex 中你有很多方法来 import/require 一个组件或者一个 JS 模块。以 ES5 为例：

    • require('xxx.js') : 依赖一个 JS 文件
    • require('npm-module-name') : 依赖一个 NPM 模块
    • require('xxx.we') : 包含一个 .we 文件来注册一个 Weex 自定义组件
    • require('@weex-module/xxx') : 依赖一个 Weex 原生模块。注意这只支持 *.we 文件而不支持 *.js 文件。如果你想要在一个 *.js 文件中使用 Weex 原生模块，暂时你可以这样写：
    1. // use this piece of code below to get Weex native module "modal"
    2. var modal
    3. __weex_define__('@weex-temp/x', function (__weex_require__) {
    4.   modal = __weex_require__('@weex-module/modal')
    5. })
    7. // use APIs in "modal" module
    8. modal.toast({message: 'hello'})

    以后我们会给大家带来一个更好的设计。

    iOS 文本 line-height 样式不正常

    line-height 样式在 <text> 组件中的表现与 H5 和 Android 不同，文本不会在行内居中，而是贴近行底部，因为这里使用的 iOS 原生 API。我们正在努力优化，与其他两端保持一致。

    Android 只支持 overflow:hidden

    overflow 样式在 Android 默认为 hidden 并且无法修改，原因是 Android View framework 限制。这个问题只出现在 Android 端，iOS 端和 H5 正常。

    如何取消 750 像素自适应并以宽高比计算真实像素？

    this.$getConfig() 方法会返回一个对象，这个对象的 deviceHeight 和 deviceWidth 属性即实际设备宽度/高度（以像素为单位），而不是以 750 适配的。

    因此，您可以使用它们来计算实际像素的宽度/高度。

    假设您需要显示固定为 88 px 的导航栏，该导航栏的高度将是：

    1. var height = 88 * 750 / env.deviceWidth

    如何在 JavaScript 中检测是否支持某个原生的 module/component

    检测原生 module

    1. var xxx = require('@weex-module/xxx')
    2. if (xxx) {
    3.   // todo: use this module
    4. }
    5. else {
    6.   // todo: handle the exception
    7. }

    检测原生 component

    1. <template>
    2.   <component is="{{type}}"></component>
    3. </template>
    5. <script>
    6.   var type = 'xxx'
    7.   var xxx = require('@weex-component/xxx')
    8.   if (!xxx) {
    9.     type = 'div' // downgrade to <div>
    10.   }
    11.   module.exports = {
    12.     data: function () {
    13.       return {
    14.         type: type
    15.       }
    16.     }
    17.   }
    18. </script>

    如何在 pages 之间传递数据

    如果你有两个页面，A 页面和 B 页面

    1. A -> B，使用 getConfig api or storage module 传递数据；
    2. B -> A，使用 storage module 传递数据。

    父子组件之间进行 repeat 操作

    如果你有需求，在父子组件之间进行 repeat 操作，需要注意，必须严格按照官网文档的语法来书写代码。如果缺少子组件定义 data 数据，或者是没有指定需要向下传递的 props，都会导致页面不正常渲染。

    错误示例：

    1. <element name="child">
    2.   <template>
    3.     <div>
    4.       <text style="font-size:100">{{title}}</text>
    5.     </div>
    6.   </template>
    7. </element>
    9. <template>
    10.   <div>
    11.     <child repeat="item in lists"></child>
    12.   </div>
    13. </template>
    14. <script>
    15.   module.exports = {
    16.     data: {
    17.       lists: [
    18.         { title: 'A' },
    19.         { title: 'B' },
    20.         { title: 'C' }
    21.       ]
    22.     },
    23.     ready: function () {
    24.       this.lists.splice(0, 1)
    25.     }
    26.   }
    27. </script>

    以上示例的理想执行情况，应该是页面上第一个元素 A 被删除，剩下 B、C 两个元素。
    但是，由于错误的写法，导致列表执行 splice 操作之后，出现错误的更新情况：页面最后一个元素 C 被删除。

    正确的写法如下：

    1. <element name="child">
    2.   <template>
    3.     <div>
    4.       <text style="font-size:100">{{title}}</text>
    5.     </div>
    6.   </template>
    8.   <script>
    9.     module.exports = {
    10.       data: {
    11.         title: null
    12.       }
    13.     }
    14.   </script>
    15. </element>
    17. <template>
    18.   <div>
    19.     <child repeat="item in lists" title="{{ item.title }}"></child>
    20.   </div>
    21. </template>
    22. <script>
    23.   module.exports = {
    24.     data: {
    25.       lists: [
    26.         { title: 'A' },
    27.         { title: 'B' },
    28.         { title: 'C' }
    29.       ]
    30.     },
    31.     ready: function () {
    32.       this.lists.splice(0, 1)
    33.     }
    34.   }
    35. </script>

    在线示例请见：

    • 错误示例