当前位置：首页 > news >正文

如果你的网站是h5网站，如何将h5网站变成小程序-除开完整重做方法如何快速h5转小程序-h5网站转小程序的办法-优雅草央千澈

news 2025/6/21 20:54:30

如果你的网站是h5网站，如何将h5网站变成小程序-除开完整重做方法如何快速h5转小程序-h5网站转小程序的办法-优雅草央千澈
h5如何转小程序
如果当年你们开发网站是用的h5但是没有开发小程序，也没有使用uniapp这样的混开框架，但是目前根据业务需求又需要发布小程序，那怎么办呢？别着急，优雅草央千澈给你方法。
第一种手动开发修改
新建小程序项目，进入后复制h5的源代码进去：
（1）将H5页面中的标签替换成小程序中的标签；
（2）将H5页面中的CSS样式修改成小程序中的样式；
（3）将H5页面中的JavaScript代码修改成小程序中的代码；
（4）将H5页面中的数据请求替换成小程序中的数据请求方式。
很明显，需要花费不少时间
第二种我们使用web-view组件
原理就是web-view组件让h5在小程序中以web形式打开，很多收费的第三方h5 转小程序网站其实就是这样做的，看完优雅草央千澈本文你就不用再去花钱了，学技术嘛，永无止境。
第一步，生成小程序密钥
这里拿到小程序id和密钥，

第二步，建立小程序
首先打开微信开发者工具
新建小程序——选择不使用云服务————创建小程序模板选择js基础模板（JavaScript）
小程序名称是什么填什么，路径名也是，对应但是只能英文

选择js模板点击创建

第三步，修改app.json文件

默认

{"pages": ["pages/index/index","pages/logs/logs"],"window": {"navigationBarTextStyle": "black","navigationBarTitleText": "Weixin","navigationBarBackgroundColor": "#ffffff"},"style": "v2","componentFramework": "glass-easel","sitemapLocation": "sitemap.json","lazyCodeLoading": "requiredComponents"
}

修改为

复制{"pages": ["pages/index/index"],"window": {"navigationBarTextStyle": "black","navigationBarTitleText": "黑曼巴","navigationBarBackgroundColor": "#ffffff"},"style": "v2","componentFramework": "glass-easel","sitemapLocation": "sitemap.json","lazyCodeLoading": "requiredComponents"
}

其实主要就是改下标题名字，page配置里面只保留首页，其他不动