简单描述一下公司使用weex初衷和记录weex开发中遇到的问题,用作以后回顾;
微信图片_20190826092623.png
移动端最大的缺点就是更新版本,整包下载真的是不友好,考虑到公司部分业务,只能着手从随时可以改,所有东西控制在手上,了解到了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代码,
微信图片_20190826093932.png
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.<web> 用于在 WEEX 页面中显示由 src 属性指定的网页内容。
17.只有 <span>, <a> and <image> 可以包含在 <richtext> 标签里。<span> and <a> 会被显示为 display:inline，而 <image> 会被显示为 display:inline-block。<image>不可以在嵌入子元素
18.Weex 支持四种伪类：active, focus, disabled, enabled,所有组件都支持 active, 只有 input 组件和 textarea 组件支持 focus, enabled, disabled
19.refresh 只有在scroller和list，waterfall才有效果
20.class动态样式，用数组模式，对象模式不支持
21.多页面需要在webpack里面配置多入口
微信图片_20190826095327.png
在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标签拦截 清单文件里面添加
代码块
<activity
android:name="com.weex.app.WXPageSampleActivity"
android:label="@string/app_name"
android:screenOrientation="portrait">
<intent-filter>
<action android:name="android.intent.action.VIEW"/>
<action android:name="com.alibaba.weex.protocol.openurl"/>
<category android:name="android.intent.category.BROWSABLE"/>
<category android:name="android.intent.category.DEFAULT"/>
<category android:name="com.taobao.android.intent.category.WEEX"/>
<data android:scheme="http"/>
<data android:scheme="https"/>
<data android:scheme="file"/>
<data android:scheme="wxpage" />
</intent-filter>
</activity>
23.WXEnvironment 全局环境变量 platform安卓大小写问题,官方文档给的是Android,但是我在打印发现是小写的android,
24.不支持<img/> 需要用<image/>
25.对于iOS手机,刘海屏的适配,从iPhone X之后的水果手机全部都带有刘海屏,weex上适配就需要做了,
查看苹果deviceModel值 查看苹果deviceModel值,从Iphone X之后都是刘海屏,
代码块
<div :class="['wrapper', isipx?'w-ipx':'']">
<div class="auto-flex">
<router-view/>
</div>
</div>
</div>
<script>
export default {
name: 'App',
data () {
return {
}
},
computed:{
isipx:function () {
return weex && (weex.config.env.deviceModel === 'iPhone10,3' ||weex.config.env.deviceModel === 'iPhone10,6'
||weex.config.env.deviceModel === 'iPhone11,8' ||weex.config.env.deviceModel === 'iPhone11,2'
||weex.config.env.deviceModel === 'iPhone11,4'||weex.config.env.deviceModel === 'iPhone11,6');
//https://www.theiphonewiki.com/wiki/List_of_iPhones查看苹果deviceModel值,从Iphone X之后都是刘海屏
}
},
}
</script>
<style scoped>
.wrapper{
flex-direction: column;
}
.w-ipx{
bottom:40px;
margin-top: 20px;
margin-bottom: 10px;//具体的样式自己来调
}
</style>
26.weex前端js和移动端通讯,例如,填写手机号码的时候,需求是需要我跳转到手机通讯录然后选择手机号,带回联系人姓名和手机号,这个需求,从weex前端看是没发做到的,移动端以安卓为例6.0以后访问通讯录是需要动态权限,iOS更不用说也是需要权限的,所以js前端和移动端通讯就得通讯了,基本思路:weex官方扩展能力 在扩展安卓和iOS里面,有介绍使用module进行能力扩展,基本介绍看官方文档,言归正传,继续调用通讯录的介绍,先获取通讯录权限,然后再去做相对应的操作,具体代码如下:
先来看张Android结构图
61bd9a178cdef3aa96fae6bb1959b39.png
在extend文件夹下有一个WXEventModel文件,这是是系统官方生成的,我们只需要创建自己的module就好了
安卓=> 获取联系人的代码 这个哥们写的有点小问题,没有去拿权限,在open方法里面添加6.0动态权限获取就好了,完美解决
iOS=> iOS回调参照
网友评论