weex具体安装教程

首先,确保机器已经安装了node.js,并且把npm更新到最新版本

下载完毕后,我们可以看到全局目录下的node_modules下面多出一个weex-toolkit

同时,我们留意到global目录下也多出了weex的执行脚本程序。

输入命令weex –v 参看版本,我们也可以看出weex分为builder和previewer2个东西。

进入工程目录下,执行命令weex create weex01创建项目weex01

我们可以看到weex01目录已经创建成功了,Weex 和 Vue 的模板项目创建成功了。

后续将会使用3条命令

npm run dev     【webpack watch 模式,方便开发】

npm run serve    【开启HotReload服务器,代码改动的将会实时同步到网页中】

npm run build     【源码打包,生成 JS Bundle】

先进入项目目录weex01执行 npm install 安装项目依赖

 

 

解压android-studio和android-sdk到d:java

 

配置环境变量

1、给PATH变量,增加(不是替换),增加%ANDROID_SDK_HOME%platform-tools

 

执行studio的执行文件

咨询是否导入原来的配置信息,没有的就选择do not

配置代理服务器(可能随时都变,具体新服务器,从百度找)

 

 

 

 

 

 

 

到此基本的android项目已经配置完成了。下面是接入WEEX

V7本来项目就有,所以只需要按照WEEX的文档的要求,添加红色部分的4个依赖,注意修改为对应SDK版本。

点击同步

以下是这3个java文件:

package com.example.a536.myapplication;

import android.widget.ImageView;

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

/**
 * ImageAdapter.java
 * 实现图片下载,程序初始化时设计
 * 本代码直接复制粘贴即可
 */

public class ImageAdapter implements IWXImgLoaderAdapter {
    @Override
    public void setImage(String url, ImageView view, WXImageQuality quality, WXImageStrategy strategy) {

    }
}
package com.example.a536.myapplication;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
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;

/**
 *MainActivity.java
 * 开始启动我们的界面
 * Render-->渲染
 */

public class MainActivity extends AppCompatActivity implements IWXRenderListener {

    /**
     * onCreate是继承与本事安卓的AppCompatActivity父类的方法
     */

    private WXSDKInstance mWXSDKInstance;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mWXSDKInstance = new WXSDKInstance(this);
        mWXSDKInstance.registerRenderListener(this);
        mWXSDKInstance.render(
                "WXSample",
                WXFileUtils.loadFileContent("hello.js",this),
                null,
                null,
                -1,
                -1 ,
                WXRenderStrategy.APPEND_ASYNC
                );
    }

    /**
     * onViewCreated是实现IWXRenderListener(渲染器的)方法
     */
    @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) {

    }

    /**以下是安卓自己本身的事件,这4个事件与app停止运行有关**/
    @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();
        }
    }
}
package com.example.a536.myapplication;

import android.app.Application;

import com.taobao.weex.InitConfig;
import com.taobao.weex.WXSDKEngine;

/**
 * WXApplication.java 
 * 程序入口的一关,默认是没有的,
 * 如果有,那先执行它
 */

public class WXApplication extends Application {

    /* 程序启动时自动执行 */
    @Override
    public void onCreate() {
        super.onCreate();
        //这是建造师模式
        InitConfig config = new InitConfig.Builder()
                .setImgAdapter(new ImageAdapter())
                .build();
        WXSDKEngine.initialize(this,config);

    }

    /* 程序结束时,自动执行
     * 一般在这里写:断开数据库,断开wifi,
     * 断开蓝牙,断开GPS等等资源类的东西
      * */
    @Override
    public void onTerminate() {
        super.onTerminate();
    }
}

把项目的显示组织,切换到传统的Project模式

切换的目的,在main目录下面,建立一个assets目录(不是android自带)

 

编写自己的hello.js

 

 

 

生成出的hello.js 覆盖上文中android studio中的assets目录的文件,重新编译即可。

=============================================================================

如果遇到问题,卸载weex-toolkit再重新安装
卸载命令:npm uninstall weex-toolkit -g
重新安装命令npm install weex-toolkit –g

=============================================================================

命令参考

npm uninstall vue -g

npm uninstall vue-cli -g

npm uninstall vue-router -g

npm uninstall weex-toolkit -g

npm install weex-toolkit -g

e:

cd weexproject

weex create weex08

cd weex08

npm install

#两种方式

#1.网页热加载

npm run serve

#2.编译成JSBundle文件

cd src

改文件名为index.we

weex index.we --output hello.js

弹出窗口另存js文件(ok)

或者到C:UsersAdministrator.weex_tmp拷贝index.js

=============================================================================

总结编译中遇到的4大坑

1、npm run build 此版本编译后的distindex.js用不了

2、weex-toolkit自带的vue跟本身自己下载的vue.js版本不一致,会冲突

3、运行weex index.we --output hello.js 过程中提示更新weex-previewer,

还给出具体命令weex update weex-previewer@1.3.13-beta.13,

千万别操作,会损坏weex-toolkit,变成用不了

4、src中index.vue文件编译后的js用不了,需要把文件名改为index.we编译才成功。

原文地址:https://www.cnblogs.com/ldm666/p/8109476.html