1、編譯vue生成bundlejs

npm run build

??通過上述命令即可在dist目錄下生成名字相同的js文件。

23D1494E-7771-400B-A4D0-082F8E695A2E.png

2、在服務器中運行weex項目

npm run serve

??在服務中運行后，即可在集成Weex SDK的Android項目中加載js文件，http://192.168.123.49:8081/dist/scroller.js

String bundleUrl = "http://192.168.123.49:8081/dist/scroller.js";
        mWXSDKInstance.renderByUrl(pageName, bundleUrl, null, null, WXRenderStrategy.APPEND_ASYNC);

3、獲取來自Android(Native)的數(shù)據(jù)

1、創(chuàng)建WXModule（Android）

public class UserInfoModule extends WXModule {
    @JSMethod(uiThread = true)
    public void getToken(JSCallback jsCallback) {
        Map<String, String> data = new HashMap<>();
        data.put("token", "來自Android客戶端的token");
        jsCallback.invoke(data);
        jsCallback.invokeAndKeepAlive(data);
        }
    }
}

2、注冊WXModule(Android)

WXSDKEngine.registerModule("userinfo", UserInfoModule.class);

3、獲取數(shù)據(jù)（WEEX）

//注意userinfo要和Native名稱一致
const module = weex.requireModule('userinfo')
module.getToken((map) => {
                    //value值為來自Android客戶端的token
                    this.value=map.token+""
                });

4、加載項目中的圖片

1、在項目目錄下創(chuàng)建Images文件夾
2、在src文件夾下創(chuàng)建公共js,存放圖片前綴例如：http://192.168.123.49:8081/images/
3、在項目中訪問圖片時使用前綴+"icon_banner.png"

5、參數(shù)傳遞weex->activity->activity->weex

1、Module擴展

public class UserInfoModule extends WXModule {
    @JSMethod(uiThread = true)
    public void skipTo(String title, String jsStr, HashMap map) {
        Log.i(TAG, "skipTo: " + title);
        Log.i(TAG, "skipTo: " + jsStr);
        Log.i(TAG, "skipTo: " + map);
        if (mWXSDKInstance.getContext() instanceof AppCompatActivity) {
            AppCompatActivity activity = ((AppCompatActivity) mWXSDKInstance.getContext());
            Bundle bundle = new Bundle();
            //下一個Weex頁面需要的參數(shù)
            bundle.putSerializable("params", map);
            //bundlejs字符串，下一步Activity渲染的js
            bundle.putString("jsStr", jsStr);
            //下一個Activity要顯示的標題
            bundle.putString("title", title);
            Intent intent = new Intent(activity, WeexActivity.class);
            intent.putExtras(bundle);
            activity.startActivity(intent);

        }
    }

}

//在Application中注冊Module
WXSDKEngine.registerModule("userinfo", UserInfoModule.class);

2、weex代碼

//獲取在android中注冊的Module("userinfo"),備用
const module = weex.requireModule('userinfo')
 methods: {
            handleClick() {
                //調用android中的skipTo方法進行跳轉
                module.skipTo('商品詳情', jsStrPre + 'scroller.js', {"title": "商品詳情", "id": "hlhfa241401048104"});
            }    
        }

3、新Activity代碼

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_weex);
        mWXSDKInstance = new WXSDKInstance(this);
        mWXSDKInstance.registerRenderListener(this);
//獲取上一個頁面?zhèn)鬟f過來的參數(shù)
        if (getIntent().getExtras() != null) {
            bundleUrl = getIntent().getExtras().getString("jsStr");
            mTitle = getIntent().getExtras().getString("title");
            mMap = ((HashMap) getIntent().getExtras().getSerializable("params"));
        }
        tvTitle.setText(mTitle);
        String pageName = "service";
        mWXSDKInstance.renderByUrl(pageName, bundleUrl, null, null, WXRenderStrategy.APPEND_ASYNC);
    }

 @Override
    public void onViewCreated(WXSDKInstance instance, View view) {
        Log.i(TAG, "onViewCreated: " + view);
        flContainer.addView(view);
        //將參數(shù)傳遞給新的weex頁面
        mWXSDKInstance.fireGlobalEventCallback("params", mMap);
    }

4、新weex頁面

const globalEvent = weex.requireModule('globalEvent');
created(){
            module.printLog("weex created");
            globalEvent.addEventListener("params", function (map) {
                module.printLog(map.name);
            });
        }

5、注意事項

1、weex不支持border:1px white solid這樣的寫法要分開

border-width:1px;
border-color:white;
border-style:solid;