美文网首页
Weex项目的创建

Weex项目的创建

作者: 暮染1 | 来源:发表于2018-05-30 16:39 被阅读23次

可以根据Weex官方文档的教程进行操作:官网教程

  1. 先安装node.js: 在 Node.js 官网 下载可执行程序直接安装即可。
  2. 检查node.js是否安装成功:
    node_v.png
    通常,安装了 Node.js 环境,npm 包管理工具也随之安装了。因此,直接使用npm来安装 weex-toolkit。

npm 是一个 JavaScript 包管理工具,它可以让开发者轻松共享和重用代码。Weex 很多依赖来自社区,同样,Weex 也将很多工具发布到社区方便开发者使用。

  1. 初始化 weex-toolkit

npm install -g weex-toolkit
weex -v //查看当前weex版本

如果npm版本过低可以直接更新到最新版本


npm_update.png
  1. 初始化weex项目

weex create myTest

weex_init.png

接着安装依赖

npm install

5.启动开发环境

npm start // 启动项目 (注意,不是 npm run dev ,不是 npm run dev ,不是 npm run dev 。 重要的事情说三遍 )

npm_start.png
start_demo.png

集成 Devtools 到 Android

  1. 添加依赖——Gradle 依赖

dependencies {
/接入weex inspector/
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.46.android'
compile 'com.taobao.android:weex_sdk:0.5.1@aar'
}

  1. 初始化
public class WXApplication extends Application {

  @Override
  public void onCreate() {
    super.onCreate();
    InitConfig config=new InitConfig.Builder().setImgAdapter(new ImageAdapter()).build();
    WXSDKEngine.initialize(this,config);
  }
}
  1. 将相关的js文件复制到asserts文件夹下;开始渲染
package com.weexdemo;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;

import com.taobao.weex.IWXRenderListener;
import com.taobao.weex.WXSDKInstance;
import com.taobao.weex.common.WXRenderStrategy;
import com.taobao.weex.utils.WXFileUtils;

public class MainActivity extends AppCompatActivity implements IWXRenderListener {

    WXSDKInstance mWXSDKInstance;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWXSDKInstance = new WXSDKInstance(this);
        mWXSDKInstance.registerRenderListener(this);
        /**
         * WXSample 可以替换成自定义的字符串,针对埋点有效。
         * template 是.we transform 后的 js文件。
         * option 可以为空,或者通过option传入 js需要的参数。例如bundle js的地址等。
         * jsonInitData 可以为空。
         * width 为-1 默认全屏,可以自己定制。
         * height =-1 默认全屏,可以自己定制。
         */
        mWXSDKInstance.render("WXSample", WXFileUtils.loadFileContent("hello.js", this), null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);
    }

    @Override
    public void onViewCreated(WXSDKInstance instance, View view) {
        setContentView(view);
    }

    @Override
    public void onRenderSuccess(WXSDKInstance instance, int width, int height) {

    }

    @Override
    public void onRefreshSuccess(WXSDKInstance instance, int width, int height) {

    }

    @Override
    public void onException(WXSDKInstance instance, String errCode, String msg) {

    }


    @Override
    protected void onResume() {
        super.onResume();
        if (mWXSDKInstance != null) {
            mWXSDKInstance.onActivityResume();
        }
    }

    @Override
    protected void onPause() {
        super.onPause();
        if (mWXSDKInstance != null) {
            mWXSDKInstance.onActivityPause();
        }
    }

    @Override
    protected void onStop() {
        super.onStop();
        if (mWXSDKInstance != null) {
            mWXSDKInstance.onActivityStop();
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        if (mWXSDKInstance != null) {
            mWXSDKInstance.onActivityDestroy();
        }
    }
}

4.运行之后可看见加载出hello world


weex_hello.png

附上github上的sample

相关文章

  • Weex项目的创建

    可以根据Weex官方文档的教程进行操作:官网教程 先安装node.js: 在 Node.js 官网 下载可执行程序...

  • Weex项目的创建

    Weex环境创建 可以根据Weex官方文档的教程进行操作官网教程 具体的创建步骤如下: 1. 先检查是否安装nod...

  • weex命令

    1,创建weex项目脚手架 weex create— 创建 weex 工程项目 2,增加/删除平台 weex pl...

  • Swift 中的 weex

    weex ios 集成参阅:Weex学习与实践:iOS原理篇 swift集成weex 首先将weexsdk集成到项...

  • Weex入门(3)创建

    创建WEEX项目 先cd到目标文件夹下 $ weex create helloweex,创建过程中,会要求填写一堆...

  • VS Code解除格式警告

    警告来源 在我们创建vue项目的时候,例如weex项目是,会提示我们是否使用严格模式ESLint,一旦我们选择使用...

  • 🐱[Weex] 一、Weex项目的搭建

    【前言】 本节主要介绍如何快速的创建一个名为"helloweex"的Weex工程。 1. 首先选择要创建工程到哪个...

  • weex开发过程遇到的各种坑

    无法 pod update 当我们完成了项目的创建 运行weex run ios想在模拟器上看一下发现报这个错,原...

  • Weex之helloworld

    1.创建weex工程搭建好环境以后,进入命令行创建weex工程 后面会紧跟一系列的要你确认的步骤,比如工程名,作者...

  • vue-weex 仿穷游APP

    代码 GITHUB 目的 体验weex开发效果,与RN,Flutter 做纵向对比。 目前weex已经由阿里捐赠给...

网友评论

      本文标题:Weex项目的创建

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