微信小程序手动转化h5

微信小程序手动转化h5

1. 首先将wxml中的代码复制进html架子下的body标签内。
2. 查找替换标签：

<view对应<div
</view>对应</div>
</view>对应</div>
<image对应<img
</image>标签直接干掉
<text对应<span
<text>对应<span>
</text>对应</span>

注意：有的text标签的内容里设置了/n换行等，要换成html的换行标签，以及如果text标签设置了decode="{{true}}"，也要记得去掉。其次就是有微信独有的标签，要转化成相对应的h5标签。

3.wxss中直接拷贝到css文件中
如果应用了元素选择器，需要像步骤二那样查找替换一波标签。如果没使用元素选择器，因为小程序大部分都是flex布局，所以基本可以直接拿到css中去使用，样式有问题微调一下就可以。
4.在html中增加代码：

<meta name="viewport" content="width=device-width,
 initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

通过查资料了解到这段代码的意义，粘出来供大家参考：
width - viewport的宽度
height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
5. 如果有px，将px转换为rem或者是百分比形式，注意设置font-size。

因项目原因小程序页面需要变更为h5，任务量多且时间紧，在网上没有搜到转化的软件和合适的方法，所以摸索出来这一套解决方案并解决问题。如有错误的地方烦请指正，谢谢。