美文网首页Weex从入门到自宫
Weex 04 Weex中Android项目的生成和交互

Weex 04 Weex中Android项目的生成和交互

作者: _句号_ | 来源:发表于2018-02-11 18:34 被阅读0次

前言

本章介绍如何将Weex的项目导出Android,并实现Weex和Native的交互。

正文

导出Android项目

  1. 在项目中添加Android支持。在项目的目录下执行:
    weex platform add android
  2. 上述命令会在项目的platform文件夹下生成一个Android的文件夹,懂Android的同学进去一看就知道这是一个可以直接导入AndroidStudio的项目。


    生成的Android文件夹
  3. 直接导入AndroidStudio即可,首次导入过程需要下载许多依赖包,耐心等待即可。如果是前端的同学可以上AndroidStudio中文网,如果是Mac的话,配环境是相当容易的。

坑:

  • 添加平台时报错:
$ weex platform add android
error: unknown option `--telemetry'
  • 解决方法:
  1. 先安装 weexpack:npm install -g weexpack;
  2. 然后根据提示,weex update weexpack@1.0.18;
  3. 执行weex platform add Android。

Weex和Native的交互

在实际开发中,Weex的一些功能还是很难满足复杂的需求,比如微信支付等,可以考虑使用Android原生实现一个模块,然后在Weex中调用。
Weex实现了三种native端的扩展的方法:module,component,adapter。

  • module用于扩展非UI的功能的逻辑模块,比如微信支付,支付宝支付等。
  • component用于View的扩展,例如:RichTextview,RefreshListview 等。
  • Adapter扩展Weex对一些基础功能实现了统一的接口,可实现这些接口来定制自己的业务。例如:图片下载等。
  1. 在Android编写本地模块,实现逻辑。
    1. 模块必须继承WXMoudle;
    2. 方法需要加上注解@JSMethod(uiThread = true),括号内的uiThread决定方法是否在UI线程执行(客户端程序一般不在UI线程进行耗时操作)。
实现弹出Android原生的Toast
  1. 在Android的application中注册该模块。


    在Application中注册
  2. 在Weex中调用。
    1. 在<template>代码中添加点击按钮和事件:

      添加按钮
      2.在<Script>代码中调用:
      调用方法
  3. 如果程序底部显示了Toast,恭喜你,你已经掌握了moudle的使用流程了。

相关文章

网友评论

    本文标题:Weex 04 Weex中Android项目的生成和交互

    本文链接:https://www.haomeiwen.com/subject/qyoktftx.html