认识达内从这里开始

认真做教育专心促就业

太原前端编程开发Weex框架实践案例

发布：太原达内教育官网
来源：互联网
时间：2019-01-09 08:09

前端开发除了需要掌握编程开发语言和开发方式以外，同时我们也要了解不同功能的编程开发前端框架，下面我们就通过案例分析来了解一下具体内容吧。

太原前端编程开发Weex框架实践案例

开发单独页面

Weex的一个优势就是能快速开发并上线一个可以运行于三端的页面，为此效率就很重要。所以，本人要推荐Weex的开发利器weex-toolkit。它可以通过npm安装到你本机的全局环境中(npm i weex-toolkit -g)，从此你的开发环境下就多了一个神奇的命令weex。

搭建完整工程

不过，对于我们这些苦逼的前端工程师来说，现在任何一个活动都没法用一个简单页面来搞定了，更不用说复杂的产品。所以，一个大而美的工程才能填补心中的阴影。

文件目录结构

Weex默认的文件结构是要求所有相关的we文件都在同一级目录下，以便能准确的找到依赖的组件。

引用标准JS文件

有了webpack的助力，在we文件中，也能轻松使用一个符合CommonJS规范的JS文件。

在实际进行Weex开发时，不免遇到一些令人困惑的问题。另外，也有可能写的代码没那么精湛而使得工程质量或产品性能达不到预期。笔者作为js-framework的主要开发者之一，虽然也没写过多少产品代码，但凭借对js-framework的深入理解，以及对众多业务当中槽点的剖析，尽量给大家呈现一些开发上的实践方案。不求佳，但求实用。

调用native提供的模块方法

Weex的代码本身是运行在js的runtime下的，所以为了和native进行通讯，就需要借由hybrid的方式。其中，对于native提供的一系列模块方法，就需要用一种特殊，但直观的方式来调用。

慎用或不用异步函数

为了解释异步函数的在Weex中的危害，先要理解在Weex中产生的两类task。一类，是由Weex控制的js和native交互时产生的task(以下简称Weex的task)，比如一系列异步调用native模块方法，或者点击事件等。一类，是系统原生的task(以下简称原生的task)，比如setTimeout，Promise。在Weex的task中更新数据时，Weex可以自动更新View。而在原生的task中，因为Weex丧失了控制权，所以无法做到自动更新。

搞定子组件的数据绑定

趁热打铁，来说下子组件的数据绑定。因为数据绑定也是通过属性来定义的，所以先要遵循上一段所说的规则。

绑定数据通过属性来定义，不仅需要在使用的元素上指定属性并绑定父组件中的数据，也要在子组件的data中指定对应的键，并且元素上的属性和子组件中的键名的对应规则是：如果属性中有连接符，则键名为去掉连接符后的驼峰写法，否则全部以小写命名。

【免责声明】本文系本网编辑部分转载，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与管理员联系，我们会予以更改或删除相关文章，以保证您的权益!

< 上一篇：常见的六种互联网网络攻击表现形式

下一篇：如何做好社群运营避免成为广告群 >