Weex 原理之带你去蹲坑 (1)，androidui 开发工具

说到 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 文件。

![入口 js](https://user-gold-cdn.xitu.io/2018/6/19/164185b73aeefea8?imageView2/0/w/1280/h/

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

960/ignore-error/1)

如上图，参考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();}

ActivityNotFoundException 问题：

<activityandroid:name=".xxxxxx"android:label="@string/app_name"android:screenOrientation="portrait"android:theme="@style/AppTheme.NoActionBar"><intent-filter><action android:name="com.taobao.android.intent.action.WEEX"/>

<category android:name="android.intent.category.DEFAULT"/><category android:name="com.taobao.android.intent.category.WEEX"/><action android:name="android.intent.action.VIEW"/>

<data android:scheme="http"/><data android:scheme="https"/><data android:scheme="file"/><data android:scheme="wxpage" /></intent-filter></activity>

• 13、多页面生成 js 时，import 的时候，需要指定.vue 后缀的。

• 14、如果是 webstorm，记得对.temp dist node_modules platforms 几个文件夹，右键设置 excluded，避免一直 indexing 和硬盘资源消耗。

• 15、@viewappear="onappear" @viewdisappear ="ondisappear" 类似 onPause 和 onResume

• 16、ios 实时看 log，可以先增加

-(void)redirectConsoleLog{#ifdef DEBUGNSString *documentDir = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES)[0];NSLog(@"documentPath : %@",documentDir);

//重定向 NSLogNSString* logPath = [documentDir stringByAppendingPathComponent:@"console.log"];freopen([logPath fileSystemRepresentation], "a+", stderr);