简单描述一下公司使用weex初衷和记录weex开发中遇到的问题,用作以后回顾;
移动端最大的缺点就是更新版本,整包下载真的是不友好,考虑到公司部分业务,只能着手从随时可以改,所有东西控制在手上,了解到了weex,渲染效果比原生壳+H5效果好,但是没有纯原生好,介于2者之间,主要在使用上是Vue.js就能很容易上手,当然坑也是有很多,简单记录一下,顺便也提供暂时的解决思路.
一些常用的指令参考官网 weex开发
1.创建完成项目,生成android代码用Android Strudio 会有一些配置上的错误,不过都是一些版本号不对的问题,weex官方生成的Android项目包有好几个问题,不过对于安卓老手能很轻松的解决,不懂得哥们,就复制错误代码到百度搜一搜,很简单,都是一些gradle版本的问题,废话不多说,直接开搞weex,在Android里面更改 utils文件下面的AppConfig里面的有配置是走本地的js文件还是走线上的,我们要动态部署服务端,肯定是走线上的,修改app_config.xml里面launch_locally为false ,launch_url改为服务端部署的地址,就ok了,然后愉快的开发js代码,
2.weex-ui组件库,当然官方也提供了组件库,git上大佬有总结 weex-ui组件库汇总
3.weex不支持路由组件动态加载 (坑!!!!!)
4.不建议用router-link 要用div+编程式导航
5.样式不支持缩写 border,background,margin,padding
6.不支持z-index,但是元素越往后层级越高
7.元素会自动绑定样式weex-ct 默认flex竖直排列
8.border-radius要用绝对像素值
9.只支持线性渐变
10.文本要用text包起来,渲染成p 标签
11.box-shadow只支持ios
12.image 定义圆角无效，// ios有效，Android无效
13.text标签的margin,padding会被覆盖,用!important
14.a组件不要添加click事件，指向weex打包后的一个js地址,无法跳转html（用web实现）
15.waterfall不支持web
16.
17.只有 , and
18.Weex 支持四种伪类：active, focus, disabled, enabled,所有组件都支持 active, 只有 input 组件和 textarea 组件支持 focus, enabled, disabled
19.refresh 只有在scroller和list，waterfall才有效果
20.class动态样式，用数组模式，对象模式不支持
21.多页面需要在webpack里面配置多入口
在webpack里面代码段 注意我的目录是在src下面的pages目录下写页面
代码块
//循环生成多个页面
function walk(dir) {
dir = dir || '.';
const new_path = __dirname.slice(0,-8)
const directory = path.join(new_path, 'src/pages', dir);
const fileArr = ['entry.js','router.js'];
fs.readdirSync(directory)
.forEach((file) => {
const fullpath = path.join(directory, file);
// const stat = fs.statSync(fullpath);
const extname = path.extname(fullpath); // 类型
const basename = path.basename(fullpath); // 文件名
if(extname==='.js'&& !fileArr.includes(basename)){
const File = path.join(vueWebTemp, `pages/${basename}`);
const routerFile = path.join(vueWebTemp, config.routerFilePath)
fs.outputFileSync(File, getEntryFileContent(helper.root(`pages/${basename}`), routerFile));
const name = basename.slice(0,-3);
webEntry[name] = File;
weexEntry[name] = helper.root(`pages/${basename}`);
}
});
}
walk();
22.Android的navigator跳转需要用local标签拦截 清单文件里面添加
代码块
23.WXEnvironment 全局环境变量 platform安卓大小写问题,官方文档给的是Android,但是我在打印发现是小写的android,
24.不支持 需要用
25.对于iOS手机,刘海屏的适配,从iPhone X之后的水果手机全部都带有刘海屏,weex上适配就需要做了,
查看苹果deviceModel值 查看苹果deviceModel值,从Iphone X之后都是刘海屏,
代码块