Weex开发入门Native交互篇(安卓)

安卓接入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).数据部分说明

(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是一次触发，需要触发时机