论如何将论如何将 h5 页面快速转换成微信小程序页面快速转换成微信小程序
微信小程序自开放出来到现在也有一段时间了，相信其底层架构也被琢磨得差不多了。微信小程序本身是双线程运行的结构，而 h5 页面是单线程的运行模式，因此两者无法直接互
通。微信小程序的运行模式如下：
(此图片来源于网络，如有侵权，请联系删除! )
微信小程序本身提供了 web-view 组件来支持在微信小程序中嵌入 h5 页面，但是 web-view 组件在使用上还是有一些限制：不支持个人类型与海外类型的小程序、不支持全屏、页面与
小程序通信不方便、很多小程序接口无法直接调用等。
如果无法使用 web-view，这里还有一条路可以走，利用 h5-to-miniprogram 工具来将 h5 页面转换成小程序。
起步起步
假设你已经有一个 h5 页面，包含四个文件：
h5 页面
|---- index.html
|---- index.css
|---- index.js
|---- index.png
复制代码
这种结构我们再熟悉不过了，具体每个文件的内容可参考这里： github.com/wechat-mini…。页面渲染出来的效果如下：
(此图片来源于网络，如有侵权，请联系删除! )
页面很简单，但是值得一提的时，这个页面引入了 jQuery 库，所以 index.html 和 index.js 是这样的：
<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta name="format-detection" content="telephone=no, email=no">
<title>demo</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
}
</style>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<img class="logo" src="./index.png">
<div class="cnt"></div>
<script src="https://juneandgreen.github.io/test/h5-to-miniprogram-demo/demo2/js/jquery-1.12.4.min.js"></script>
<script src="./index.js"></script>
</body>
资源评论
