1、编译vue生成bundlejs
npm run build
通过上述命令即可在dist目录下生成名字相同的js文件。
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 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;