安卓接入weex的sdk
说明：接入方式网上可以找到很多,这里说的是我们真是项目的使用和交互，因为某些原因不能贴代码，此文章只能当做思路
1.接入形式
在安卓中是已lib的形式引入,build.gradle中
//weex sdk
api 'org.apache.weex:sdk:0.28.0'
//binding-x
implementation 'com.alibaba.android:bindingx-core:1.1.5'
implementation 'com.alibaba.android:bindingx_weex_plugin:1.1.4'
2.weex界面创建和在运行发布
(1)使用开发工具
webstorm(我自己用)，vscode，自己选择
(2)创建界面，我们的工程中
1.src---->pages---->中创建vue文件，简单点就复制一个，删掉别人的代码，div写个title看看
2.创建界面完成后再src的index.vue中添加page = require('@/pages/你刚才创建的界面名字');
3.上面两个完成在package.json文件中加入
"你刚才创建的界面名字": "cross-env NODE_ENV=development PAGE_NAME=你刚才创建的界面名字 webpack-dev-server --progress",
接着添加pack打包
"pack:dkstockpool:axg": "cross-env NODE_ENV=common PAGE_NAME=dkstockpool BUNDLE_ID=你新建的文件名称webpack &&MINSUPP_VERSION='1.2.0' BUNDLE_ID=你新建的文件名称APP_ID= ZIP=true BUNDLE_VERSION='' node ./deploy",
运行
npm start
发包：webstorm，直接运行
4.实现一个简单的weex界面
(1).ui部分：
<template>
<div class="container">
<div class="header">
<text class="headerText">title</text>
</div>
省略代码
</div>
</template>
(2).数据逻辑部分：
<script>
import xx from 'xxx';
const modal = weex.requireModule('modal');
const commonModule = weex.requireModule('WXCommonModule');
export default {
name: 'xxx',
components: {
xxx,
2xx
},
computed: {
...mapGetters(['userInfo'])
},
data: () => ({
}),
created () {
涉及代码不便展示
},
methods: {
getPaddingTop () {
},
onRefresh (tabRefresh) {
// 获取列表数据
this.refreshData();
},
refreshData (t) {
},
formatDate (date) {
if (typeof date === 'string') {
date = new Date(date.replace(/-/g, '/')).getTime()
}
return util.formatTime(date, 'Y-M-D h:m')
},
isSuccess (res) {
return res && res.code === 0;
},
}
};
</script>
(3).样式部分:
<style scoped>
.header {
}
</style>
(4).部分说明
使用：import引入，在添加components组件名称
components: {
xxx,
}
关于属性：props就是定义属性
props: ['currentItem', 'isAdd']
还有一种写法,带默认值
props: {
backgroundColor: {
type: String,
default: '#fff'
},
refreshEnable: { // 刷新是否可用
type: Boolean,
default: true
},
loadMoreEnable: { // 加载更多是否可用
type: Boolean,
default: true
}
......
}
没全部贴出来
有关于页面的编写的使用标签就自行百度了
(5).数据部分说明
<script>标签中包含：引入import使用得组件，定义的全局常量const，export default内容components，data，created，methods等
(6).样式部分说明
<style scoped>标签，scoped表示在当前使用，可以看到样式是：.加名字，给到class，h5的class样式写法，还要在ui样式中加style的写法如
:style="{color:(curIdx===index?'#2C87FE':'#666D80')}"
5.weex和原生(安卓)交互
1）.weex跳转原生
WxRouter中使用到了
let wxRouter = weex.requireModule('WXRouter');
(3).WXRouter是在安卓中定义的类WxRouterModule的注册名
//路由模块
put("WXRouter", WxRouterModule.class);
上面说的比较零散，详细说明：我们在安卓中定义WxRouterModule类来继承WXModule，添加方法routerWithURLStr(String path, Map<String, Object> params)，注意这是和weex桥接的方法要加@JSMethod()注解，这个方法中实现了weex跳转安卓原生的功能
代码：
public class WxRouterModule extends WXModule {
public static final String TAG = "";
public static final String XXX = "";
private Context context;
@JSMethod()
public void routerWithURLStr(String path, Map<String, Object> params) {
if (context == null) context = mWXSDKInstance.getContext();
path = path.substring(path.lastIndexOf('/') + 1);
RouterEnum routerEnum = RouterEnum.getRouterByName(path);
}
allSkip
}
//万能跳转
private void allSkip(Map<String, Object> params) {
}
}内容被删除，可以看工程中的
可以看到上面是weex跳转到原生的方法，可以接受来自weex的参数
注册代码
public class WeexCustom {
public static HashMap<String, Class<? extends WXModule>> modules = new HashMap<String, Class<? extends WXModule>>(){{
//替换掉 sdk 中的 modal，因为 toast 有 bug
put("modal", WXCustomModalModule.class);
//路由模块
put("WXRouter", WxRouterModule.class);
put("WXCommonModule", WXCommonModule.class);
}};
public static HashMap<String, Class<? extends WXComponent>> components = new HashMap<String, Class<? extends WXComponent>>(){{
}};
}
注意必须注册，每定义一个module都要注册,
原生跳转weex
1.我们定义了WxActivity用来承载weex界面，有startWithId通过bundleId，和startWithUrl通过url。
2.如果我们是重weex跳转的界面还是weex，使用的是WxRouterModule，实现在routerWithURLStr的case WEEX_PAGE:
3.如果我们使用得是原生跳转到weex，使用得是QuotationNavigator的toWxActivity或toWxActivityWithUrl，可以看原生代码
3).weex获取原生数据
1.通过JSCallback的invoke，在dk股票池中获取已添加只选的列表和添加自选从操作都是这种方式
详细说明：定义WXCommonModule类，定义addOption(Map<String, String> stock, JSCallback callback)添加自选和fetchStockCustom(JSCallback callback)方法
在weex中
const commonModule = weex.requireModule('WXCommonModule');
commonModule调用原生定义的方法
2.通过JSCallback的invokeAndKeepAlive，长连接
在weex中
AAAModule.subscribe(param, false, (res) =>{})
总结交互
首先在原生要添加相应的module继承WXModule，即TargetModle。然后必须注册。
在TargetModle中添加通过@JSMethod()修饰的方法
如果接收weex传递的数据在方法中定义参数，如果是传值给weex，使用JSCallback
JSCallback两个方法invokeAndKeepAlive和invoke
invokeAndKeepAlive是长连接的方法，当数据发生改变相应的weex就回接收改变
invoke是一次触发，需要触发时机
网友评论