Weex 开发注意事项

上一篇简绍了weex 的一些基础知识和开发规范，这篇讲些实战中会遇到的坑，和开发技巧相关东西。

1、使用webpack 构建时的注意事项

    项目中使用的是webpack 3.X 版本，webpack现在已发布4.X 版本，但4.X 会将js banner(注释)放到单独License文件，这和weex在使用前端框架时需要标记banner不符合，暂未找到解决方案。   

// webpack插件定义
let webpackPlugins = [  
    // new webpack.optimize.UglifyJsPlugin({minimize: isProd}),
    // 实例化banner
    new webpack.BannerPlugin({
        banner: '// { "framework": "Vue" }\n',
        raw: true,
        exclude: 'Vue'
    })
];

2、vue 框架引入

weex框架默认集成了前端框架（vue, rax），所有在开发单文件组件时候，不需要再次引入vue，再次引入会如下报错。

import Index from './Index';
new Vue({
    el: '#app',
    render: h => h(Index)
})

   再次引入会有如下错误：    

3、<a>组件中的绑定事件

在官网<a>组件的介绍中是支持通用事件的，但在实际开发过程中发现，如果在<a> 上绑定click事件，如出现handler.value.replace 错误，如下在a 标签绑定一个showSearchBar 事件：

  <a slot="right"  class="g-right" v-on:click="showSearchBar()"></a>

出现的错误信息如下：

4、Class样式绑定

  vue开发中是支持对v-bind:class 传入对象的，也支持使用传入数组，以动态地切换 class：   

<div v-bind:class="{ active: isActive }"></div>

• native 中只支持传入数组方式：

<div v-bind:class="[activeClass, errorClass]"></div>

    在weex 中使用对象形式绑定class 会报typeError错误，错误信息如下：

• class 不支持多个分割线写法

   比如select-center-list-item 会提示 'SyntaxError: No identifiers allowed directly after numeric literal'

5、添加特定字体文件

在weex 如需要添加特定的字体文件，需引用dom 模块，如下：

const domModule = weex.requireModule('dom')
domModule.addRule('fontFace', {
    'fontFamily': "iconfont2",
    'src': "url('http://at.alicdn.com/t/font_1469606063_76593.ttf')"
});

6、子组件触发父组件传递事件

在vue开发中子组件可以通过emit 方法触发父组件；在weex开发中，使用this.$emit('functionName'); functionName 不支持带function-name 形式。

7、scroller 事件触发机制

• scroller 事件触发机制：loadmore -> loading
• refresh  ：pullingdown -> onrefresh
• Android 端scroller中使用loading 后，导致无法触发refresh 失效且 无法再次触发分页加载

scroller 组件一定得明确定义width , height

8、图片资源引用

     image 图片只能放网络上的地址，不能引用本地文件

9、获取当前页面地址

• web 端通过location 

/// #if !isNative
return window && window.location.href ? window.location.href : ''
/// #endif

• native端通过 weex.config

/// #if isNative
return weex.config.CrtUrl ? weex.config.CrtUrl : '
/// #endif

weex提供了一个快捷的方式获取当前页面的url的方法:weex.config.bundleUrl; 通过此方法 不管在网页还是在app 上  都可以获取到

10、文本元素

所有文本必须放在<text>标签中，放在其他元素不显示。