weex-加载js文件

---

---

1. weex 事件

<template>
    <div>
        <div class="box" @click="onclick" @longpress="onLongPress">

        </div>
    </div>
</template>

<style scoped>
    .box {
        width: 200px;
        height: 200px;
        background-color: #717171;
        top: 150px;
        left: 150px;
    }
</style>

<script>
    const modal = weex.requireModule('modal');
    export default {
        methods: {
            onclick(event) {
                console.log('onclick**', event);
                modal.toast({
                    message: 'onclick**',
                    duration: 1

                })
            },
            onLongPress(event){
                console.log('onLongPress**', event);
                modal.toast({
                    message: 'onLongPress**',
                    duration: 1

                })
            }
        }
    }
</script>

---

2. 在Android中运行（本地）

• vue代码，position.vue

<template>
    <div class="wrapper">
        <div class="box1" @click="onclick"></div>
        <div class="box2"></div>
        <div class="box3"></div>

    </div>
</template>

<script>
    const modal = weex.requireModule('modal');
    export default {
        name: "position",

        methods: {
            onclick(event) {
                console.log('onclick**', event);
                modal.toast({
                    message: 'onclick**',
                    duration: 1
                })
            }
        }
    }
</script>

<style scoped>
    .wrapper {
        background-color: #dddddd;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        position: relative;

        transition-property: width, height, backgroundColor;
        transition-duration: 0.3s;
        transition-delay: 0s;
        transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
    }

    .box1 {
        background-color: #00B4FF;
        width: 100px;
        height: 100px;
        top: 1px;
        border-width: 7px;
        border-left-style: dashed;
        border-right-style: dotted;
        border-left-width: 15px;
        border-top-color: #ff0000;
        border-bottom-left-radius: 20px;
    }

    .box2 {
        background-color: #00B411;
        width: 100px;
        height: 100px;
        top: 80px;
        left: 20px;
    }

    .box3 {
        background-color: #00B488;
        width: 100px;
        height: 100px;
        top: 160px;
        left: 40px;
    }
</style>

• 把这个自动生成的js文件，拷贝到android assets文件下。
  weex 项目
  
  android 项目
  
• 1,依赖的引用，build.gradle 加入如下基础依赖

	implementation 'com.android.support:support-v4:28.0.0'
    implementation 'com.android.support:recyclerview-v7:28.0.0'

    implementation 'com.alibaba:fastjson:1.1.67.android'
    implementation 'com.taobao.android:weex_sdk:[e-mail]'

• 2,Application 初始化

	public class WXApplication extends Application {

    @Override
    public void onCreate() {
        super.onCreate();
        InitConfig config = new InitConfig.Builder().setImgAdapter(new  ImageAdapter()).build();
        WXSDKEngine.initialize(this, config);
    }
}

• 3,在页面中显示 需要注意，如果在第一个页面显示应该启动比较快可能显示不出来需要加个延时，这个可能是个bug。

public class Weex1Activity extends AppCompatActivity implements IWXRenderListener {
    WXSDKInstance mWXSDKInstance;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mWXSDKInstance = new WXSDKInstance(this);
        mWXSDKInstance.registerRenderListener(this);
        /**
         * WXSample 可以替换成自定义的字符串，针对埋点有效。
         * template 是.we transform 后的 js文件。
         * option 可以为空，或者通过option传入 js需要的参数。例如bundle js的地址等。
         * jsonInitData 可以为空。
         * width 为-1 默认全屏，可以自己定制。
         * height =-1 默认全屏，可以自己定制。
         */
        final String str = "position.js";

//        new Handler().postDelayed(new Runnable() {
//            @Override
//            public void run() {
                mWXSDKInstance.render("WXSample", WXFileUtils.loadFileOrAsset(str, Weex1Activity.this), null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);
//            }
//        }, 300);

    }

    @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();
        }
    }
}

运行效果：

---

3. Android加载网络js文件。（ renderByUrl）

• 1，android添加权限

    <uses-permission android:name="android.permission.INTERNET"/>

• 2，获取地址：点击二维码。
  
• 3，复制js地址
  
• 4，在android 中使用

    String testUrl = "http://172.17.14.**:8081/dist/position.js";
    mWXSDKInstance.renderByUrl("WXSample", testUrl, null, null, WXRenderStrategy.APPEND_ONCE);