变脸式应用 / 制作原生APP（二）

APP（二）"/>

变脸式应用 / 制作原生APP（二）

壳版本管理

请牢牢记住，由于原生壳与H5应用的分离，用户安装的用户壳可能是旧版本的，而线上的H5应用永远是最新版本。

假如在原生壳中新增加了插件，应增加壳版本号。
操作上也可将壳版本等同于原生应用的版本代码（安卓叫App Version Code，苹果叫CF Bundle Version），那么要注意插件变动时，一定也要变动原生应用版本。

需求：新版本壳中增加了某插件，希望安装旧版本壳的用户在用到此插件时，提示更新APP。

假定当前壳版本为1，注意在配置文件intelxdk.config.additions.xml中修改壳版本，假如为2：

<content src="http://myserver/myproject/index.html?cordova=2" />

然后编译好新版本安装包。
由于插件变化了，仍然需要更新原生插件接口到H5应用，将新的插件合并到H5应用的cordova或cordova-ios目录中。

注意cordova_plugins.js文件定义H5应用可用哪些插件，需要手工合并和设置版本。

假设我们在用户端上新增加了一个微信分享插件，cordova_plugins.js文件如下：

module.exports = [...,// 以下为新增部分：{"file": "plugins/com.xxx.weixin/www/weixin.js","id": "com.xxx.weixin","clobbers": ["navigator.weixin"]}
]

前面提到过，每个筋斗云H5应用都有一个惟一的应用名(MUI.options.appName)，例如用户端设置应用名为”user”。
我们为新的插件加上filter属性：

module.exports = [...,// 以下为新增部分：{"file": "plugins/com.xxx.weixin/www/weixin.js","id": "com.xxx.weixin","clobbers": ["navigator.weixin"]// 指定客户端应用(名为user)从壳版本2开始支持该插件"filter": [ ["user", 2] ]},
]
// 新加上这一句处理版本
filterCordovaModule(module);

filter属性的格式为[ [app1, minVer?=1, maxVer?=9999], ...], 仅当应用名匹配且版本在minVer/maxVer之间才使用。
如果未指定filter，则表示加载该插件。
假定还有个员工端应用名为emp，在壳版本300时增加了该插件，则可以设置：

"filter": [ ["user", 2], ["emp", 300] ]

这样，不同的H5应用版本加载的插件是不一样的，要在浏览器中测试查看每个壳版本分别加载了哪些插件，可以直接访问带cordova参数的H5应用地址如：

http://myserver/myproject/index.html?cordova=1

然后在Web控制台中执行：

cordova.require('cordova/plugin_list')

最后，我们在H5应用中检查插件是否可用，以及提示用户升级：

if (navigator.weixin == null) {app_alert("您的APP版本太旧，请升级后使用本功能。");return;
}
// 调用新插件的功能。

调试原生应用

由于原生应用调试复杂，只要不是原生插件本身的问题，尽量先在电脑浏览器上调试。

对于只能在手机上运行的功能，注意加些调试代码，让它也在网页中也能模拟运行。
比如微信分享后可以领取红包，为了在普通浏览器中可调试，可以这样做：

if (! g_cordova) {// 模拟代码if (g_args.mock) {if (confirm("模拟分享?"))onShareOk();}app_alert("必须在App中运行");return;
}
微信分享(成功后回调 onShareOk);function onShareOk()
{// 领取红包
}

g_args.mock表示在URL参数中有”?mock=1”时走模拟分支。这样绝大多数问题都不用在手机上调试。

如果在电脑浏览器上运行正常，但在手机应用中运行出错，需要尝试在设备上调试H5应用。
对于安卓应用，可在Chrome中调试手机应用。注意在编译壳的选项中，我们曾设置过：

<preference name="debuggable" value="true" />

在安卓手机上，打开USB调试选项（请自行搜索如果进入开发者模式及打开USB调试），连上电脑，
然后在Chrome地址栏中输入chrome://inspect即可进入设备调试。

注意：由于google的站点国内很难访问，如果调试页面打不开，须通过代理访问。

调试苹果应用，得用苹果电脑上的Safari浏览器。
由于苹果要求只有使用开发证书的App才能调试，所以要么用开发证书重新编译个用于调试的App壳，要么更简单地直接在Safari浏览器中调试。
先开启iPhone/iPad上的Safari的远程调试功能：“设置 > Safari > 高级” > Web检查器选中。
将iphone插入电脑，弹出是否允许调试，选择“是”。
打开Safari，在“开发”菜单下可见有一行是 该手机的名字，里面显示有可调试的页面。

如果是首次在mac上使用safari时，应先激活“开发工具”菜单项：
(menu)preference(偏好设置)->高级->在菜单栏中显示“开发”菜单。

如果以上调试环境很难配置成功，那么只能通过在代码中加alert来一点点逼近问题。

如果确定问题出在原生插件上，或者需要修改原生插件，那么只有搭建cordova工程，调试原生java或object-c代码。