使用web2app打包工具、Cefsharp、Javascript Interface与js交互方案时调用Angural TypeScript内方法
分类:Angular 别名:web2app-call-methods-in-angural

在做一个使用Angural构造的web app项目,雇主需要使用云打包打包成app并接入微信登录,微信支付。
使用的打包平台是变色龙,平台提供了js sdk。

BSL.Login('platform','forwardurl','callbackMethod')
ERROR in src/app/user/login/login.component.ts(48,5): error TS2304: Cannot find name 'BSL'.

我在微信登录方法里执行了,此时他找不到BSL这个参数。
了解了一下,并且自己写了个c#示例来模拟他的js sdk注入情况

CefSettings settings = new CefSettings();
CefSharpSettings.LegacyJavascriptBindingEnabled = true;
Cef.Initialize(settings);
chromeBrowser = new ChromiumWebBrowser("https://liaozixu.com/testPage")
{
    Dock = DockStyle.Fill
};
chromeBrowser.RegisterJsObject("MyJavascript", new liaozixucp(this), new CefSharp.BindingOptions() {
    CamelCaseJavascriptNames = false
});
this.Controls.Add(chromeBrowser);
chromeBrowser.MenuHandler = new MenuHandler();

通过Cefsharp的调试工具发现,MyJavascript是挂载在window变量下的,所以打包工具应该同理,代码则需修改为

wechatLogin(){
    window['BSL'].Login('WEIXIN', '', 'window.wechatLoginSuccess');
}

而他的回调方法,应该加在constructor或OnInit方法里,使他启动时注册。
调整后代码如下举例

constructor() {
    window['wechatLoginSuccess'] = (res)=>{
        let jsonData = JSON.stringify(res);
        alert(jsonData)
    }
}

效果

关闭