Weex初体验

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)的数据

1、创建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、获取数据（WEEX）

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

4、加载项目中的图片

1、在项目目录下创建Images文件夹
2、在src文件夹下创建公共js,存放图片前缀例如：http://192.168.123.49:8081/images/
3、在项目中访问图片时使用前缀+"icon_banner.png"

5、参数传递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页面需要的参数
            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);
//获取上一个页面传递过来的参数
        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);
        //将参数传递给新的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;