ionic混合开发学习之路-第一坑

最新推荐文章于 2021-11-24 10:22:05 发布

toskeyjohn

最新推荐文章于 2021-11-24 10:22:05 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： ionic

本文链接：https://blog.youkuaiyun.com/toskeyjohn/article/details/51234376

ionic 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了混合开发模式下APP更新的几种方法，包括直接超链接、使用iframe及自定义cordova插件等方案，并详细记录了每种方法的优缺点及实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做混合开发，有一部分人就喜欢这种模式的APP更新。页面全部放在服务器上，手机APP当作一个壳，用webview去加载远程页面。当需要更新APP功能的时候，只需要在服务器修改相对应的页面和功能即可。

当然，我们公司也是看中了这一点，但有个奇葩的想法：菜单页在APP上存放（为了提高APP初始化的加载速度），其他页面全部放在服务器上。

我当时想了想，可以啊，挺简单的，就去尝试了。以下为各种尝试的方法：

1、直接在APP上的菜单页面上放置超链接，指向服务器上的页面。

2、直接在APP上的菜单页面上增加一个modal页，在modal页上放置一个iframe去加载服务器上的页面。

3、APP上的菜单页使用android的activity实现，不使用cordova的webview去加载，当点击菜单后，再去使用webview去加载远程页面，自定义cordova插件用于关闭当前webview的acitvity

以上：

第一种办法看似很美好，可惜不行。在浏览器上测试可以直接跳转的，在android手机上就不行了。点了菜单什么反应都没有，看了看logcat，提示无法加载资源。白名单啥的都尝试了，无奈不行，所以直接pass掉。

第二种办法看似也很美好，可惜也不大能行。父页面调用iframe子页面方法时，可以调用，反过来就废了。不知道什么问题，各种尝试各种失败，百度+Google了各种解决JS跨域的问题，给出的答案一律都是JSONP...大哥，我不是ajax跨域好伐...所以这个方法pass掉。（有尝试过这种方法并且能成功调用父页面方法的大神，请留言告诉我，感激不尽）。

第三种办法看似不大美好，可惜是可以实现的。但是有一个问题，一般人选择去用混合开发的，大多是因为不了解android技术，想省去一部分的学习成本。所以使用android代码去写一个菜单页，稍不留神可能就是OOM。但是我还是会点android 的，所以无奈下选择了这种方法。

下面是实现第三种方式的关键代码：

MenuActivity(菜单页)中onCreate方法


if (Constant.login_user == null || Constant.login_user.equals("")) {
Bundle bundle = getIntent().getExtras();
Constant.login_user = bundle.getString("userName");
}
gridView = (GridView) findViewById(R.id.GridView);
menuList = getMenus(Constant.login_user);
SimpleAdapter menuItem = new SimpleAdapter(this, menuList, R.layout.item,
new String[] { "itemImage", "itemText" }, new int[] { R.id.ItemImage, R.id.ItemText });
gridView.setAdapter(menuItem);
// 为菜单的item绑定点击事件
gridView.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView<?> arg0, View arg1, int position, long arg3) {
Intent intent = new Intent(MenuActivity.this, MainActivity.class);
Bundle bundle = new Bundle();
bundle.putString("url", menuList.get(position).get("itemUrl").toString());
intent.putExtras(bundle);
startActivity(intent);

}
});

MainActivity(cordova的webview页)中的onCreate方法

Bundle bundle = this.getIntent().getExtras();
String url = bundle.getString("url");
loadUrl(url);