Weex 原理之带你去蹲坑，kotlin 参数默认值

在<template>中排布需要渲染的控件，在<style>中指定控件的样式(当然你也可以直接在<template>中)，在<script>中写数据获取和处理逻辑等，是不是很简单， Don’t be shy，Let's fuck it ！

因为需要支持三端，Weex 在 Vue 的基础上阉割了一些标签、css 样式和事件，具体可见[与 Web 平台的差异](

)

其中，在 Android 和 IOS 上，<text> <image>等标签，其实是被编译为原生控件，这就是上面所说的 dom 解析，同时你也可以在原生端，自定义控件或者功能模块，然后注册到 weex 中使用，实际上 weex 提供的基础控件和功能模块并不多，但却很容易拓展，具体可见 [拓展原生端功能](

) 。

（ps 也不知道阿里是怕做多错多，还是懒）

说到这里，就需要说一说 Weex 的原生插件开发支持，这也是官方文档比较没整理好的原因，其实文档是有的：[Weex 插件开发文档](

)，如 Android 插件大致流程就是：

• weex plugin create命令创建插件。

• 在 android 目录的 library 下通过@WeexComponent(控件)、@WeexModule(非 UI 功能)、@WeexAdapter(weex 继承功能拓展)实现第三方支持。

• 将 library 发布到 maven （当然你也可以直接源码发布到 npm）

• 配置根目录的package.json然后发布到 npm

由此可见，weex 可以很方便的提供原生功能的拓展支持，但是由于社群较为薄弱，导致第三方插件缺失，有(hen)些(duo)时候你可能不得不自己着手，开发原生端的功能支持，这就对于跨平台开发而言，特别前端开发而言，就稍(te)显(bie)不友好了。

题外话 ：说到跨平台开发，也许你听说过cordova这位老大哥，它曾是早期的跨平台开发潮流，cordova提供丰富的原生插件和打包功能：通过 webview 把前端页面打包成一个 App，通过插件提供前端需要的原生接口，交互通过 webview 的 js 接口支持。为什么说起它呢，是因为 Weex 中，你可以看到很多cordova的影子，类似weex platform add android、weex plugin add xxx都有些cordova的味道。如下图，你如今依旧可以在 Weex 中找，寻找到cordova的存在感。

3、其他推荐

? [Vuex 和 Vue-Router](

) ，居家旅行必不可少。

• Vuex 类似 Redux，如果你没听说 Redux 不要紧，也不要怂，简单了说，Vuex 就是单页面下，帮你管理数据的框架。数据都存在 Vuex 的 store 中，你操作 store 更新数据，然后将 store 绑定到界面。它的用处在于可以在多个 vue 组件间，方便的同步数据，更新界面。

• Vue-Router 也是用于单页面下，指定跳到某个页面的管理工具，路由嘛，浅显易懂。

? [iconfont](

) ：矢量图标，少不了 iconfont，通过字库生成图标，资源丰富，绝对值得推荐。

? [weex-ui](

)： weex 中难得的良心官方封装库。

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开：qq.cn.hn/FTe 免费领取

? [eros](

) ：eros 不是框架，是基于 weex 封装、面向前端的 vue 写法的一整套 APP 开源解决方案，是由本木医疗大前端团队经过大量实践沉淀而出。。

四、深入填坑

1、ES6、ES7

说到 Javascript ，ES6、ES7 必须了解下。Weex 中默认就有对其支持，但是对于 async、await 等，还需要如下一些简单配置，然后 have fun 。

//命令行安装 npm install --save-dev babel-plugin-transform-runtime

//然后在.babelrc 文件中加入{"presets": ["es2015","stage-0"],"plugins": [ ["transform-runtime",{"helpers": false,"polyfill": false,"regenerator": true,"moduleName": "babel-runtime"}]]}

2、多页面

Weex 默认是单页面效果，也就是 Android 中一个 Activity 的概念，而单页面效果在原生上，跳转一多效果就会 web 了。既然叫 native，怎么可能如此 too young，所以这个时候，就需要修改默认的 webpack，让其支持 naive 多页面了?╮(╯▽╰)╭。

首先，要知道 Weex 真正运行的是，通过entry.js作为入口文件文件，通过 webpack，将.vue文件打包成index.js进行使用。Look，多页面的重点，就是将独立页面的.vue文件，生成多个 js 文件。

如上图，参考entry.js文件，创建一个 SecondPageEntry.js，作为 SecondPage.vue 的入口，用于 webpack 生成 SecondPage.js 页面。

什么？webpack 没听说过怎么办，No problem，你只需简单的修改，一知半解完全可以胜任。如下图，我们主要需要修改webpack.common.conf.js文件，

可以看出，webpack.common.conf.js中，其实是区分了 webConfig 和 weexConfig 的不同打包方式。如下图，其中 weexEntry 就是我们需要修改的地方，可以看到本来已经有 index 和 entry.js 存在了。

最后我们需要通过 navigator 来实现跳转，我们需要知道，要跳转的 js 文件在哪里，如下代码演示，如何实现 navigotor 的 native 跳转，完整兼容三端跳转请移步 demo 项目。

//获取当前 js 文件所在完整路径 let bundleUrl = this.$getConfig().bundleUrl;bundleUrl = String(bundleUrl);let nativeBase;//android 一般位于 file://assets 目录下 let isAndroidAssets = bundleUrl.indexOf('file://assets/') >= 0;//ios 一般位于一般带有 file 开头，带有 WeexDemo.applet isiOSAssets = bundleUrl.indexOf('file:///') >= 0 && bundleUrl.indexOf('WeexDemo.app') > 0;if (isAndroidAssets) {nativeBase = 'file://assets/dist/';} else if (isiOSAssets) {nativeBase = bundleUrl.substring(0, bundleUrl.lastIndexOf('/') + 1);} else {let host = 'localhost:8080';let matches = ///([^/]+?)//.exec(bundleUrl);if (matches && matches.length >= 2) {host = matches[1];}nativeBase = 'http://' + host + '/index.html?page=./dist/';}return nativeBase;

3、样式 sass\scss

[sass](

)，后期必不可少的利器。

当你的 weex 项目不断变大，一些样式共享，公共颜色，大小尺寸等的管理，就是你需要面对的问题。

这时候 sass 和 scss 就可以起到很大的作用。最大优点是，它可编程，支持定义变量，而且不像阉割后的 css 一样，var()这种写法无法在 native 下得到支持，这时候 sass 的效果绝对让你回味无穷。

使用[sass](

)也十分简单，简单配置下 webpack，sass 的语法也十分容易上手，只需十分钟了解下就可以愉快的享用这块糖了。

• 先安装 sass 依赖：

npm install node-sass;npm install sass-loader; //依赖 node-sass

• 之后webpack.common.conf.js中配置 loader，如下图，在两个 module 处，增加红框配置。

• 最后用 import 引入的 sass 文件进行加载，详细可查看 demo 工程。

//也可以 lang="scss"<style lang="sass">//导入写好的文件 @import "./style.scss";</style>

五、蹲坑

其实就是问题集锦，记录一些开发过程中遇到的问题，相信你会喜欢：

• 1、关于 vue 的<scrpit>标签内，weex.requireModule(包括插件 weex-ui)中，在全局获取返回 null 的原因，是因为 entry.js 中的 router 对象,不能用 import 和 export default，只能用 require 和 module.exports 配合。

• 2、es6 一些语法问题，如 async 和 await，可以用"babel-plugin-transform-runtime"，在.babelrc 中设置。

{"presets": ["es2015","stage-0"],"plugins": [ ["transform-runtime",{"helpers": false,"polyfill": false,"regenerator": true,"moduleName": "babel-runtime"}]]}

• 3、export default 和 require 混合使用的时候，会多一个 default 对象，比如 this.$store.default.state 这样才对的问题。

• 4、自定义的 js 文件类中，不能使用全局的weex.requireModule。

• 5、使用 weex-ui 的 tabbar 结合是，<list>必须有高度，或者 overflow 属性为 scroll 才能滑动，而且 overflow 的位置必须是不会影响其他页面位置。

• 6、全屏默认 height 1334 和 width 750，但是记得减去 32 大概高度的 statusbar。

• 7、list 的 loadmore，必须给 list 设置高度样式，才能在 web 中正常触发。

• 8、text 的</text>结束标签换行，在 debug 下可能会出现样式问题。

• 9、生命周期在 web 中与 android 等不同，比如 activated 等。

• 10、()=> {}对于 this 可能获取存在的不同，尽量用 function(){}。

• 11、多页即创建多个类似 entry.js 的入口文件，在 webpack 下配置 weex 的打开生成的 js 文件，用于 navigator 跳转，通过 url 传值。

• 12、android 多页面打开失败

android.os.FileUriExposedException 问题：

在你的 Application 中添加：if (Build.VERSION.SDK_INT>=18) {StrictMode.VmPolicy.Builder builder = new StrictMode.VmPolicy.Builder();StrictMode.setVmPolicy(builder.build());builder.detectFileUriExposure();}