分享经验 版主:论坛审计组
将Html5手机端网站封装为微信小程序的方法(图文教程)
类型:迅睿CMS 更新时间:2024-04-27 06:24:57 开发者工具 微信支付 文件上传 配置文件

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

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