美文网首页小程序
微信小程序原理

微信小程序原理

作者: 诺之林 | 来源:发表于2019-04-29 15:19 被阅读0次

本文的示例代码参考XiaoChengXu

目录

IDE

find /Applications/wechatwebdevtools.app/Contents/Versions/ -maxdepth 2 -name "*nwjs*"
# /Applications/wechatwebdevtools.app/Contents/Versions//60.0.3112.113/nwjs Framework.framework

更多关于nwjs可以参考NW.js文档

DSL

更多关于DSL可以参考谈谈 DSL 以及 DSL 的应用(以 CocoaPods 为例)

XCX

  • WXML + WXSS => WebView => Dom

  • WXS + JS => JavaScriptCore => Native

  • WebView <=> Native <=> JavaScriptCore

更多关于小程序宿主环境的介绍详见下图

MiniProgram

APP

// MainActivity
Intent intent = new Intent(MainActivity.this, XCXActivity.class);
intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
intent.addFlags(Intent.FLAG_ACTIVITY_NEW_DOCUMENT);
startActivity(intent);
// XCXActivity
final WebView webView = findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("file:///android_asset/web/index.html");
webView.addJavascriptInterface(new Object() {
    @JavascriptInterface
    public void localMethods(String arg) {
        Toast.makeText(XCXActivity.this, arg, Toast.LENGTH_SHORT).show();
    }
}, "obj");

Button button = findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
    @Override public void onClick(View view) {
        webView.loadUrl(String.format("javascript:javacalljs(\"%d\")", ++count));
    }
});
<html>

<head>
    <script type="text/javascript">
        function javacalljs(arg) {
            document.getElementById("content").innerHTML = "内容显示: " + arg;
        }
        function jscalljava() {
            window.obj.localMethods(document.getElementById("content").innerHTML)
        }
    </script>
</head>

<body>
<h1>
    <div id="content">内容显示:</div>
</h1>
<br/>
<input type="button" value="调用Java代码" onclick="jscalljava()"/><br/>
</body>

</html>

参考

相关文章

  • 微信小程序原理

    微信小程序使用了前端技术栈 JavaScript/WXML/WXSS。它背后的原理是怎么样的呢? 微信小程序使用了...

  • 在服务器接收小程序的request请求,并对数据库进行多条件查询

    1. nodejs接收小程序客户端的请求数据 (1) 在之前的《微信小程序与服务器的交互原理》已经介绍了微信小程序...

  • 微信小程序原理

    微信小程序使用了前端技术栈。JavaScript/WXML/WXSS它背后的原理是怎么样的呢?微信小程序使用了前端...

  • 2019-09-24小程序 与 App 与 H5 之间的区别

    小程序的实现原理 根据微信官方的说明,微信小程序的运行环境有 3 个平台,iOS 的 WebKit(苹果开源的浏览...

  • 微信小程序基础

    微信小程序介绍微信小程序开发工具的使用微信小程序框架文件微信小程序逻辑层微信小程序视图层微信小程序组件介绍微信小程...

  • 微信小程序原理

    微信小程序使用了前端技术栈 JavaScript/WXML/WXSS。它背后的原理是怎么样的呢? 写在前面 微信小...

  • 微信小程序原理

    https://blog.csdn.net/lianghaihsia/article/details/84140817

  • 微信小程序原理

    本文的示例代码参考XiaoChengXu 目录 IDE DSL XCX APP IDE 更多关于nwjs可以参考N...

  • 微信小程序原理

    前言 了解微信小程序原理,感觉可以帮助自己更好理解为什么有些问题是这样那样的,整理了下,以前发现的一些问题也更能理...

  • 微信小程序的开发与原理

    微信小程序的开发与原理 1, 小程序与普通网⻚开发的区别 小程序的主要开发语言是 JavaScript ,小程序的...

网友评论

    本文标题:微信小程序原理

    本文链接:https://www.haomeiwen.com/subject/zourbqtx.html