将Html5手机端网站封装为微信小程序的方法(图文教程)

迅睿框架 更新 2026-04-01 17:02:39 天客隆模板网

要求是网站是自适应的或者有H5手机端,已通过ICP备案,再就是必须开启https访问。

一、操作步骤

1、注册小程序

登录微信公众平台,注册一个小程序,不懂自行百度,注册完成后,在开发-开发管理-开发设置中获取AppID(小程序ID)

2、创建小程序

打开微信开发者工具,创建小程序,填写项目名称、选择目录、小程序的AppID、不使用云服务,点击确定。

微信小程序开发

3、修改配置文件

打开app.json文件,pages项只保留 "pages/index/index" 这一行即可

window项的navigationBarTitleText填写小程序名称

封装微信小程序

4、修改页面文件

打开/pages/index/index.wxml文件,将里面的代码全部删除,添加下面代码(域名改成你自己的):

<view>     <web-view src="https://www.tiankelong.com/"></web-view> </view>

5、测试小程序

点击详情-本地设置-勾选不校验合法域名、web-view(业务域名)、TLS版本以及HTTPS证书,以方便本地进行测试。然后点击编译就能看到界面了,如下图:

小程序

6、配置业务域名

登录微信公众平台-开发管理-开发设置-业务域名,把H5域名添加为业务域名,把验证文件上传到域名根目录下,然后保存。

7、上传发布

点击微信开发者工具中的上传按钮,更新类型、版本号、备注自己填写即可。

8、版本提审

登录微信公众平台-管理-版本管理-开发版本-将本次上传设置为体验版本,扫码体验无误后,提交审核即可。

二、注意事项

无法使用或显示的内容
小程序中只能显示网站的内容,如果你的手机网站使用了第三方网站的代码或资源,这些在小程序里是无法使用或显示的。比如:爱番番(百度商桥)、53客服、引用的优酷、腾讯视频等。
微信支付功能说明
网站原有微信h5支付功能,在小程序里是不能使用的,需重新开发,使用小程序支付。


方案

  • 小萌娃 #1 · 2023-07-04 11:08:17
    可以调用微信小程序登录吗
  • yichen #2 · 2023-07-10 12:30:30
    不知道支持小程序客服吗
  • 不耻下问小菜新 #3 · 2023-07-12 16:52:46
    看看看看看看
  • 云南麦田 #4 · 2023-07-13 11:09:13
    看看看看看看看看看看看看。
  • 云南麦田 #5 · 2023-07-13 11:12:11
    个人类型和海外类型的小程序暂不支持
  • 我是米奇 #6 · 2023-07-14 16:32:32
    看看内容是什么
  • 啊哦哦哦哦哦 #7 · 2023-07-16 15:55:32
    可以调用微信小程序登录吗可以调用微信小程序登录吗可以调用微信小程序登录吗
  • 飞翔 #8 · 2023-07-17 11:30:07
    看看学习一下 ,非常感谢
  • wy631387575 #9 · 2023-07-19 16:53:27
    看看学习一下 ,非常感谢
  • 折腾 #10 · 2023-07-21 19:11:06
    学习下,感谢大佬
  • xinxianfx #11 · 2023-07-23 19:08:10
    谢谢分享 试试看 🙏
  • 老李 #12 · 2023-07-26 20:25:23
    支持商城吗?
  • 小张 #13 · 2023-08-16 09:37:10
    看看内容,学习下。
  • 网络流浪汉老三 #14 · 2023-08-19 10:44:51
    内容是直接调用的网站端吗?
  • 小白白 #15 · 2023-08-31 19:25:31
    看看看看看看
  • 王文鑫 #16 · 2023-09-03 14:02:32
    这个封装百度地图支持导航吗
  • 听海 #17 · 2023-09-04 12:32:23
    这个在线支付能用嘛
  • 叶江 #18 · 2023-09-04 16:11:36
    个人类型和海外类型的小程序暂不支持个人类型和海外类型的小程序暂不支持
  • 小小白 #19 · 2023-09-06 09:05:05
    挺好使的,来看下
  • icejuzi #20 · 2023-09-07 18:45:17
    来看看到底咋样
  • 嘟嘟小将-爆仓专业户 #21 · 2023-09-08 08:55:42
    挺好使的,来看下
  • 80647023 #22 · 2023-09-12 21:29:49
    不知道支持小程序客服吗
  • 小飞鸡。 #23 · 2023-09-14 10:02:25
    看看看看看看看看看看看看。
  • xcmd5201 #24 · 2023-09-16 21:07:42
    挺好使的,来看下
  • 481798725 #25 · 2023-10-06 23:28:44
    不知道支持小程序客服吗
  • #26 · 2023-10-11 09:30:48
    看看学习一下 ,非常感谢
  • 腾石科技 #27 · 2023-10-22 21:22:09
    这种小程序毫无意义,不会收录
  • guizhou #28 · 2023-10-24 09:59:03
    挺好使的,来看下
  • 懒懒鱼 #29 · 2023-11-08 10:20:48
    感谢大佬分享 过来学习!
  • kevin5678 #30 · 2023-11-11 15:23:09
    确实管用,2分钟就转好了
  • y1219 #31 · 2023-11-19 10:55:33
    这个其他系统能用嘛?????
  • 伦少 #32 · 2023-11-24 08:41:09
    确实管用,2分钟就转好了
  • 听海 #33 · 2023-11-29 12:01:16
    请教楼主,封装后是否支持微信一键登陆

  • 丛林灰太狼 #34 · 2023-11-30 09:06:30
    封装一般的站还是可以的,功能性的站不行,很多功能用不了,比如付款
  • cofeting #35 · 2023-12-01 13:44:42
    看看怎么封装
  • 天友网 #36 · 2023-12-01 14:34:55
    看看怎么封装
  • qq4030348 #37 · 2023-12-09 13:57:58
    看看怎么封装
  • 一灯先生 #38 · 2023-12-12 12:16:11
    封装后分享功能怎么解决
  • 天河 #39 · 2023-12-13 19:06:53
    看看怎么封装
  • 微信20320497 #40 · 2023-12-15 10:50:07
    支持微信客服吗
  • 曼曼 #41 · 2023-12-18 17:01:21
    学习看看 看看怎么封装
  • miniidea #42 · 2023-12-31 19:22:33
    学习看看封装~!
  • pdswyw #43 · 2024-01-02 23:47:42
    看看看看看看看看看看
  • 木木建站 #44 · 2024-01-03 16:06:15
    看看学习一下 ,非常感谢
  • 马拉糕 #45 · 2024-01-12 10:57:54
    看看学习一下 ,非常感谢
  • esme #46 · 2024-01-14 16:25:33
    感谢楼主,学习一下
  • 讯睿cms铁粉 #47 · 2024-01-18 10:04:28
    看一看隐藏
  • qingchunwuhui #48 · 2024-01-28 12:57:19
    感谢楼主,学习一下
  • y33692624 #49 · 2024-01-29 15:11:26
    看看,学习一下
  • 花开的声音 #50 · 2024-02-01 11:15:12
    学习一下 ,非常感谢
  • 木头块 #51 · 2024-02-04 17:59:02
    学习一下,非常感谢
  • yinjiang #52 · 2024-02-24 10:09:56
    学习一下,非常感谢
  • eawea #53 · 2024-02-27 12:28:45
    非常不错 感谢分享
  • #54 · 2024-02-29 11:29:16
    看看,学习一下
  • 学无止境 #55 · 2024-03-01 00:24:42
    非常不错 感谢分享
  • 江小白 #56 · 2024-03-09 08:55:14
    学习学习,看看是怎么封装的
  • 大白 #57 · 2024-03-09 09:45:44
    学习了,感谢分享。
  • 大师在流浪 #58 · 2024-03-12 10:09:47
    我也要测试一下
  • 苦逼的民工 #59 · 2024-03-14 14:15:22
    学习一下 ,非常感谢
  • 微信20330267 #60 · 2024-03-27 15:53:12
    学习一下,非常感谢
  • 俊杰 #61 · 2024-03-27 17:50:58
    正好用得上,学习一下,感谢楼主
  • 微信20330274 #62 · 2024-03-28 06:10:39
    确实管用,2分钟就转好了
  • user_falle #63 · 2024-03-29 11:53:39
    看看学习一下
  • 晕菜菜 #64 · 2024-03-29 23:23:42
    感谢楼主,学习一下
  • hubing5454 #65 · 2024-04-06 16:50:26
    学习一下 ,非常感谢
  • erleng #66 · 2024-04-26 14:15:55
    闭上眼向前冲,总有一片天地属于你
  • erleng #67 · 2024-04-26 14:16:20
    我试试 可以用吗
  • 漫步者 #68 · 2024-04-27 06:24:13
    学习了学习
  • 漫步者 #69 · 2024-04-27 06:24:57
    厉害了我的哥
  • rollins #70 · 2024-04-29 10:12:33
    学习一下 ,非常感谢
  • xiaochaoxiong #71 · 2024-04-29 15:54:08
    赞的要命,过来学习一下。下次再来看看
  • hiker #72 · 2024-05-16 17:39:46
    厉害厉害厉害厉害
  • 聚特网络 #73 · 2024-05-24 01:20:11
    看看内容看看内容
  • 18657509110 #74 · 2024-05-24 19:57:03
    挺不错的,很好。
  • houfa #75 · 2024-05-25 09:42:17
    微信小程序能登录吗
  • snkboos #76 · 2024-05-30 13:54:11
    • 看看怎么封装
  • webweb8 #77 · 2024-06-19 10:19:59
    可心 ,非常感谢
  • 不停游的鱼 #78 · 2024-06-19 14:02:28
    • 可以调用微信小程序登录吗

  • 南城 #79 · 2024-06-21 15:32:26
    学习一下 ,非常感谢
  • 学习狂人 #80 · 2024-06-24 17:21:15
    谢谢多分享,多学习
  • shuaiyu #81 · 2024-06-27 20:13:34
    • 看看,学习一下
  • zkwt0012 #82 · 2024-06-28 02:00:42
    学习一下 ,非常感谢
  • 小菜鸟 #83 · 2024-06-28 14:53:01
    感谢分享,学习学习!
  • donmy #84 · 2024-06-29 15:26:03
    学习一下 ,非常感谢
  • somton #85 · 2024-07-02 03:30:32
    学习一下,非常感谢。
  • tsmupin #86 · 2024-07-19 11:55:21
    感谢楼主,学习一下
  • 沉默的红豆 #87 · 2024-07-23 08:13:21
    学习了,实践一下
  • tesoji #88 · 2024-07-31 18:16:42
    学习一下 ,非常感谢
  • 天涯 #89 · 2024-08-04 10:55:04
    学习一下学习一下学习一下
  • 黄金阳 #90 · 2024-08-05 08:51:51
    学习学习学习学习学习学习学习学习学习学习
  • songsongyuyu #91 · 2024-08-08 00:56:29
    看一下,学些一下
  • songsongyuyu #92 · 2024-08-08 01:00:20
    二级域名网站可以挂上吗?和小程序不是同一个主体注册的网站可以吗
  • 2103344634 #93 · 2024-08-08 20:57:30
    学习一下 ,非常感谢
  • yk85565232 #94 · 2024-08-10 08:41:55
    跟着大佬学知识
  • huaxi999 #95 · 2024-08-12 15:59:18
    学习一下。非常感谢
  • duanxs #96 · 2024-08-14 14:09:22
    学习一下 ,非常感谢
  • yonghong83711 #97 · 2024-08-20 17:50:09
    非常感谢,学习一下
  • shishi614 #98 · 2024-08-29 11:00:00
    参考一下,学习学习
  • gsj888 #99 · 2024-09-09 20:44:32
    就好好好好
  • mrzhenjia #100 · 2024-09-14 14:40:53
    学习一下 ,非常感谢
  • 我爱迅睿CMS #101 · 2024-09-14 20:17:06
    学习,感谢分享
  • 001128 #102 · 2024-09-16 10:09:45
    支付呢?能不能调用支付
  • wancent #103 · 2024-09-30 15:17:11
    学习一下 ,非常感谢
  • 兔子姑娘 #104 · 2024-10-10 01:17:27
    学习下,感谢大佬
  • 四分音符 #105 · 2024-10-10 13:15:36
    学习一下 ,非常感谢
  • 13810366804 #106 · 2024-10-12 23:21:30
    跟着大佬学习,正是所需要的,感谢分享
  • yellowall #107 · 2024-10-17 00:11:58
    • 看一看隐藏

  • 浩宇 #108 · 2024-10-18 17:23:26
    学习一下 感谢
  • ll7103 #109 · 2024-10-22 23:58:44
    学习一下 ,非常感谢
  • webzzh #110 · 2024-11-04 17:49:24
    看一看,好像还挺有用的。
  • webzzh #111 · 2024-11-04 17:54:45
    有嵌入的小程序看一下吗?
  • yibanrensheng #112 · 2024-11-12 10:47:25
    看看怎么回事
  • 3185576646 #113 · 2024-11-20 13:40:27
    学习一下 ,非常感谢
  • 315316 #114 · 2024-11-22 19:49:17
    挺好使的,来看下
  • wenhong #115 · 2024-11-28 11:50:26
    看看。怎么样。正是我需要的
  • qq123008 #116 · 2024-12-16 17:05:07
    试试试试试试试试试试



  • PHP学生 #117 · 2024-12-26 21:12:17
    就是iframe原理的嵌入,不过要端口放行
  • 淘趣科技 #118 · 2025-01-02 09:55:07
    看看学习一下
  • suiyuancheng #119 · 2025-01-07 21:56:37
    学习一下,非常感谢
  • 菜鸟天下 #120 · 2025-01-09 13:45:37
    现在小程序的认证审核费劲死了
  • wangkunyue #121 · 2025-01-20 07:39:08
    这个方法管用吗?
  • wangkunyue #122 · 2025-01-20 07:39:29
    这个方法管用吗?
  • 1769958735 #123 · 2025-02-07 10:49:06
    现在还支持吗
  • 85965513 #124 · 2025-02-12 15:14:08
    学习一下 ,非常感谢
  • 撑死的虫子 #125 · 2025-02-19 14:12:41
    • 可以调用微信小程序登录吗

  • du8028934 #126 · 2025-02-23 17:18:04
    学习一下 ,非常感谢
  • let888 #127 · 2025-03-04 21:02:16
    看看 看看 看看看 开开开吗开开看不看
  • 布衣无言 #128 · 2025-03-10 09:57:35
    正需要,过来学习一下
  • pd2025 #129 · 2025-03-11 15:49:42
    看看隐藏内容
  • 刘云海 #130 · 2025-04-10 16:37:39
    学习一下 ,非常感谢
  • sky1100 #131 · 2025-04-12 14:23:49
    可以调用微信小程序登录吗
  • sky1100 #132 · 2025-04-12 14:24:09
    小萌娃 可以调用微信小程序登录吗
  • 新手求帮忙 #133 · 2025-04-13 00:24:13
    学习一下 ,非常感谢学习一下 ,非常感谢学习一下 ,非常感谢
  • xxweiwei #134 · 2025-04-16 16:47:29
    学习一下 ,非常感谢
  • zhuying #135 · 2025-04-18 15:23:56
    学习一下,非常感谢
  • v0927 #136 · 2025-04-19 06:55:34
    分享朋友圈和转发当前页面的功能都没有,非常遗憾
  • 老毛虫 #137 · 2025-04-23 11:49:29
    学习一下 ,非常感谢
  • santi0512 #138 · 2025-05-14 11:48:14
    学习一下 ,非常感谢
  • dadaa #139 · 2025-05-15 00:13:42
    ICP备案,再就是必须
  • cnguibie #140 · 2025-05-15 21:13:47
    可以调用微信小程序登录吗
  • 幼儿园同学 #141 · 2025-05-17 14:31:16
    • 这个封装百度地图支持导航吗
  • 凡凡 #142 · 2025-06-02 15:57:22
    试试看一下 需要用
  • 老李1680 #143 · 2025-06-13 16:23:41
    个人中心里有啥
  • 平凡之路 #144 · 2025-06-13 16:41:07
    挺好使的,来看下
  • fmyz9 #145 · 2025-06-14 23:36:20
    大师就是与众不同
  • forres #146 · 2025-06-15 17:49:36
    看看内容是什么
  • fmyz #147 · 2025-06-20 13:21:40
    怎么那个在哪里?
  • fmyz #148 · 2025-06-20 13:22:32
    重新回复吗才能看见吗
  • 六树 #149 · 2025-06-23 12:05:03
    学习一下!刚好想要把网站做成小程序!
  • chilogn #150 · 2025-07-02 11:52:03
    学习了,谢谢分享
  • chilogn #151 · 2025-07-02 11:55:10
    谢谢分享,太干了
  • #152 · 2025-08-08 16:23:56
    看看学习一下 ,非常感谢
  • yehson #153 · 2025-08-31 00:01:26
    💡 学习一下 ,非常感谢!
  • a42518171 #154 · 2025-09-19 16:19:16
    来学习啦.看看好用不
  • txzwlybin #155 · 2025-09-25 17:02:12
    查看更多,谢谢
  • caihaha #156 · 2025-09-26 09:28:03
    好使吗这个
  • 微信20344569 #157 · 2025-10-09 16:16:51
    感谢太实用了
  • 爬树蜗牛 #158 · 2025-10-10 15:31:18
    楼主好强,感谢指导
  • qq.gg #159 · 2025-10-15 17:24:02
    登录微信公众平台-管理-版本管理-开发版本-将本次上传设置为体验版本,扫码体验无误后,提交审核即可。
  • 浮云__ #160 · 2025-10-21 13:28:40
    感谢楼主,学习一下
  • 李富贵儿 #161 · 2025-10-22 15:39:39
    学习学习 看看
  • yejiao #162 · 2025-10-27 15:37:01
    学习一下,感谢
  • skyinfo #163 · 2025-12-19 12:23:49
    感谢大佬分享 过来学习!
  • skyinfo #164 · 2025-12-19 12:27:27
    这么做出来的不能转发,请问转发怎么搞
  • strive #165 · 2026-02-25 10:58:48
    看看,学习一下
  • 新手学习 #166 · 2026-02-28 11:12:26
    学习,感谢大侠的分享!
  • 活在当下 #167 · 2026-04-01 17:02:29
    挺好使的,来看下
  • 活在当下 #168 · 2026-04-01 17:02:39
    挺好使的,来看下

迅睿系统漏洞

GeoSeo收录宝
GeoSeo收录宝(2026-09-01)
升级 ai智能发布功能 升级 支持8国语言后端设置和前端输出功能 ...
Word发布批量上传
Word发布批量上传(2026-08-31)
版本覆盖问题重发
多语言翻译Seolang
多语言翻译Seolang(2026-08-31)
新增 LLM 大模型对话翻译模块 配置层强类型化重构 URL 模...
自定义存储
自定义存储(2026-08-30)
同步服务器端通用版实现,统一管理端、CMS 端和浏览器直传的提示与错...
GeoSeo工具箱
GeoSeo工具箱(2026-08-29)
新增 bing推送 新增 IndexNow推送 新增 baidu...
外贸多语言建站
外贸多语言建站(2026-08-27)
新增阿里云专业版入口 新增阿里云自动识别字符格式
Querylist渐进式采集
Querylist渐进式采集(2026-08-26)
增加范围截取规则
实时任务
实时任务(2026-08-26)
补充并整理完整使用说明、历史版本更新日志,统一帮助页样式。