零基础使用weex,weex+android

本文介绍了如何从零开始搭建Android Weex工程,包括安装Node.js和weex-toolkit,创建Weex项目并将其集成到Android应用中。详细步骤包括初始化Weex项目、集成到Android项目、实现图片下载接口以及添加自定义组件。同时,文章提供了官方文档链接和GitHub源码参考,帮助开发者进一步扩展Android的功能。
摘要由CSDN通过智能技术生成

Android Weex工程搭建

https://weex.incubator.apache.org/guide/index.html

真的是入门就想放弃,文档少的可怜,翻“墙”找资料,看看墙里面资料,安心一丢丢.
本设备mac

第一部分

注意:⚠️这部分是weex,创建一个weex项目,在web平台渲染结果,并且可以将结果显示在模拟器上面

1.安装 Node.js,https://nodejs.org/en/
2.随着Node.js的安装,安装weex-toolkit全球CLI。
npm install weex-toolkit -g
【安装失败,?图所示】

~ npm install weex-toolkit -g
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules
npm ERR! path /usr/local/lib/node_modules
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall access
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
npm ERR!  {
    [Error: EACCES: permission denied, access '/usr/local/lib/node_modules']
npm ERR!   stack:
npm ERR!    'Error: EACCES: permission denied, access \'/usr/local/lib/node_modules\'',
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/usr/local/lib/node_modules' }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator (though this is not recommended).

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/xj.deng/.npm/_logs/2018-12-27T06_47_24_957Z-debug.log
➜  ~ sudo npm install webpack -g

用这个命令装: sudo npm install -g weex-toolkit@latest :全局安装

输入weex,下图表示安装成功

~ weex

Usage:

  $ weex <command>

Commands:

  debug         Start weex debugger
  config        Configure the global configuration file
  compile       Compile we/vue file
  create        Create a weex project
  preview       Preview a weex page
  platform      Add/remove/update ios/android platform
  plugin        Add/remove/create weex plugin
  run           Build your ios/android app and run
  update        Update weex package version
  remove        Remove a package from weex-toolkit
  xbind         Binding a thrid-part tool

  weex <command> --help      help on <command>

3.回到官网http://weex.apache.org/cn/guide/index.html初始化位置继续,很详细了!
懒得看的直接敲命令:

这条命令会向你命令行环境中注册一个 weex 命令。你可以用 weex create 命令来创建一个空的模板项目:

weex create awesome-app

命令执行完以后,在当前目录的 awesome-app 文件夹里就有了一个空的 Weex + Vue.js 项目。

下一步就是进入刚刚创建的文件夹,并且安装依赖,然后执行 npm start:

cd awesome-app
npm install
npm start

第二部分

注意:⚠️,这是Weex集成到Android项目中
官网:http://weex.apache.org/cn/guide/integrate-to-your-app.htmly
链接已经很详细了,附上自己写过的源码:
https://github.com/DeckeDeng/Weex-WXSample

实现图片下载接口,注意⚠️,该接口需要自己实现图片下载,第二部分完成,已经可以demo看到效果了

package com.weex.sample;

import android.widget.ImageView;

import com.taobao.weex.adapter.IWXImgLoaderAdapter;
import com.taobao.weex.common.WXImageStrategy;
import com.taobao.weex.dom.WXImageQuality;

/**
 * Created by lixinke on 16/6/1.
 */
public class ImageAdapter implements IWXImgLoaderAdapter {
   


  @Override
  public void setImage(String url, ImageView view, WXImageQuality quality, WXImageStrategy strategy) {
   
    //实现你自己的图片下载,否则图片无法显示。
  }
}
/**
 * 注意要在Manifest中设置android:name=".WXApplication"
 * 要实现ImageAdapter 否则图片不能下载
 * gradle 中一定要添加一些依赖,否则初始化会失败。
 * compile 'com.android.support:recyclerview-v7:23.1.1'
 * compile 'com.android.support:support-v4:23.1.1'
 * compile 'com.android.support:appcompat-v7:23.1.1'
 * compile 'com.alibaba:fastjson:1.1.45'
 */
public class MyApplication extends Application {
   

    @Override
    public void onCreate() {
   
        super.onCreate();
        InitConfig config = new InitConfig.Builder().
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值