Weex原理之带你去蹲坑，2024最新Android笔经

最新推荐文章于 2024-10-17 23:19:35 发布

前端漫画书

最新推荐文章于 2024-10-17 23:19:35 发布

阅读量851

点赞数 29

分类专栏： 2024年程序员学习文章标签： android

本文链接：https://blog.csdn.net/m0_61549353/article/details/137184625

版权

2024年程序员学习专栏收录该内容

262 篇文章 0 订阅

订阅专栏

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

如上图，参考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.app
let 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”

五、蹲坑

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

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问题：

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 DEBUG
NSString *documentDir = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES)[0];
NSLog(@“documentPath : %@”,documentDir);

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数Android工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。