FinClip如何将H5工程转为小程序

小程序独立出来了很多原生APP的组件，这对于HTML5的老兵是一种痛苦，小程序自己开发了一套WXML标记语言和WXSS样式语言，并非直接使用标准的HTML5+CSS3，小程序与传统HTML5还是有明显的区别。

微信小程序自开放出来到现在也有一段时间了，相信其底层架构也被琢磨得差不多了。微信小程序本身是双线程运行的结构，而 h5 页面是单线程的运行模式，因此两者无法直接互通。微信小程序的运行模式如下：

微信小程序本身提供了 web-view 组件来支持在微信小程序中嵌入 h5 页面，但是 web-view 组件在使用上还是有一些限制：不支持个人类型与海外类型的小程序、不支持全屏、页面与小程序通信不方便、很多小程序接口无法直接调用等。

如果无法使用 web-view，这里还有一条路可以走，利用FinClip工具来将 h5 页面转换成小程序。

那对于HTML5应用的咱办呢？

如何快速的从HTML5转换成小程序呢？

甚至是在考虑小程序与HTML5应用是同一个程序，方便统一维护。

准备工作：

下载一个工具编译一下就可以啦！手把手教学一下：

下载安装FIDE小程序开发工具：https://www.finclip.com/mop/document/develop/developer/fide-update-log.html#
使用开发工具新建一个小程序

在小程序中嵌入H5页面方法

小程序实现：
使用web-view组件，在src属性中写入H5页面url即可
```
    <web-view src="www.baidu.com"></web-view>
```
也可以使用数据绑定方式
```
    <web-view :src="{{webViewUrl}}"></web-view>
```
在本地磁盘中找到对应项目，将项目文件压缩为zip包
上传小程序代码包
在【开发设置-代码包管理】中，上传该代码包
完成域名配置
在【开发设置-域名管理】中，完成对应域名请求设置
通过 FinClip APP 或已集成SDK的APP查看小程序

原理

原理其实很简单，h5 页面在浏览器运行的过程就是解析 html 到渲染 dom 树的过程，然后提供一些 dom/bom 接口给 js 调用。那么在小程序中我们把这一套给模拟一遍就行了，方法很暴力，但是却意外的有效：因为给 h5 页面提供了类似浏览器的环境，实现了最底层的适配，所以理论上来说那些通用的框架和库也能支持运行。上面的例子中就表明了 jQuery 是能够运行的，像 react、vue 也是可以做到支持的。

微信小程序是双线程的运行模式，视图层专注于渲染，逻辑层专注于逻辑。逻辑层是在一个纯净的 js 线程中跑，那里没有 dom/bom 接口，只能运行页面逻辑层的代码。要模拟浏览器环境，最基本的就是要在逻辑层里模拟出一棵 dom 树，本质上和建立一棵虚拟树类似，因为它并不是真实的 dom 树。整个流程简单来说是这样的：

不管是页面中的静态 html 内容还是使用 innerHTML 等接口动态插入的 html 内容都可以走上面的流程来进行 dom 树的创建。dom 树创建比较简单，只是细节比较多，此处的关键是将创建好的 dom 节点映射到微信小程序的自定义组件，利用自定义组件的特性可以轻易的将我们创建好的 dom 树给渲染出来。

FinClip如何将H5工程转为小程序相关推荐

h5跳转小程序_微信小程序吞掉H5？
近来小程序越来越火,如果能嵌入h5,微信小程序会吞掉H5吗?意味着未来小程序创业者能影响整个web世界的信息流分发和服务流分发.像他一样,不少开发者把这看作最近半年微信最重要的能力释放,那么这两项功能 ...
H5打开支付宝小程序
H5打开支付宝小程序 window.location.href=`https://ulink.alipay.com/?scheme=`+ encodeURIComponent("alipay ...
H5和微信小程序测试区别
01 什么是H5? H5,也就是"HTML5",指"HTML"的第5个版本.众所周知"HTML"是"超文本标记语言",是 ...
小程序跳到h5页面_小程序如何跳转h5页面
小程序跳转H5页面是通过web-view组件来实现的,web-view是一个可以用来承载网页的容器,会自动铺满整个小程序页面. 1.配置业务域名小程序账号必须是企业账号,个人和海外账号暂不支持,只有 ...
小程序接入h5页面_小程序与H5如何互相跳转
由于小程序官方没有提供外部H5网页直接跳转到小程序的api,所以目前只支持小程序内嵌H5,并且只有内嵌的H5才能跳回小程序小程序跳转H5 需要用到小程序的web-view,官方文档链接 web-vi ...
省钱兄（APP+H5+公众号+小程序）自营商城源码分销系统社区团购线上线下核销吃喝玩乐系统源码前端模板
系统支持安卓 IOS H5 公众号小程序本系统开发使用JAVA技术栈开发用户端使用:uniapp 管理端使用:vue+elementui 后台服务使用:springboot+jpa 体验方式微 ...
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
DIY官网一站式婚庆案例实战,可视化设计导出微擎.UNIAPP.H5.微信小程序源码. 这里将给大家展示演示出来的所有不同类型演示. DIY官网一站式婚庆案例实战官网在线演示例子一站式婚庆服务公司后 ...
uniapp的打包：h5、微信小程序以及APP方式
uniapp的打包:h5.微信小程序以及APP方式 H5打包微信小程序打包 App打包本人用的是HBuilder编译器,学习uniapp时b站某位大大推荐的,我刚开始接触代码时候也用过,那时候并不 ...
开发嵌入京东app h5| Hybrid | 微信小程序｜实践踩坑总结十六条
一前言笔者最近一直在开发京东app嵌入的h5项目和微信小程序商城项目,在此期间遇到很多坑.这篇文章主要是针对 h5| Hybrid | 微信小程序三个方向来讲述我遇到的坑,以及详细讲解我是如何解 ...

FinClip如何将H5工程转为小程序

原理

FinClip如何将H5工程转为小程序相关推荐

最新文章

热门文章