当前位置：网站首页 > 技术文章 > 正文

如何把网站转成微信小程序?其实就是这么简单

myzbx 2024-12-01 18:25 14 浏览

整个搭建过程大约十分钟就发布上线了，虽然，一直存在一些问题，“页面iframe不支持引用非业务域名”，这是我网站形式造成的。

如果你是企业站或比较纯粹的博客站等，没有外部链接，那么，这个方法很适用。

那么，直接步入正题吧。

看看怎么用10分钟就把自己网站转换成微信小程序。

操作步骤：

1、申请SSL证书，转https（不会的看下文，如果你用的是宝塔更简单，此文未介绍）。

网站防篡改全站http转https完整流程

https://mp.weixin.qq.com/s?__biz=MzU4ODM5MDkyMg==&mid=2247484609&idx=1&sn=6f1baa81167e08037508a62b05e47764&chksm=fddc33a4caabbab214150f70ea1400317e4dbb4c9864dc1c2735c863cafe25b1e931cecdcd15&scene=21#wechat_redirect

2、申请注册小程序账号（此方法，个人注册小程序不行，必须企业或组织的）

不会注册的，注册流程看这里。

https://jingyan.baidu.com/article/295430f13472ee4d7e0050e4.html

个人版后台无此“业务域名”配置功能

在绑定“业务域名”时需上传文件验证，所以登录好服务器后台或ftp工具。

3、小程序后台配置好“服务器域名”及“业务域名”

4、下载微信开发者工具，找不到的看这里

https://jingyan.baidu.com/article/54b6b9c0d7ec6c6c583b47e4.html

5、安装好之后，打开微信开发者工具，选择小程序项目。点击管理项目+号增加小程序。

6、桌面随便新建个文件夹，小程序开发工具，选择空白文件夹，并输入AppID，不要使用云服务，点击新建即可。

7、打开app.json文件，修改第9行“ ”内文字为自己小程序名称，之后保存。

8、打开路径/pages/index/index.wxml文件，清空内容。

9、将下面代码粘贴进去，修改为自己的域名，之后保存，可见左侧网站已显示出来。

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

10、之后直接点击上传即可。

ps:上传之前可以先真机调试检查下是否有如我这样的问题。

11、最后，回到公众号服务平台提交审核即可，审核通过即可提交上线。

前面也说了，我的是因为网站性质的问题，所以会不断跳出“不支持非业务域名”，一般的企业站等不会有外部域名，也就不会出现这种问题，当然，换了友链之类也会弹出提醒。

当时做这个小程序，也是我第一次接触小程序。本来只是拿来练手，只是希望能把网站转成小程序，也能方便搜索访问下载资源，但每打开一个页面就要关闭下提醒的确有点烦。

后续也做过几个不同类型的小程序，更熟悉了小程序的搭建，但上面的问题却一直没找到方法解决。除非网站重建或者重建小程序，但那样就不是我当建站的本意了。

这篇纯教程，没啥资源推荐，最近又补充了点新资源，需要就老地方自取！！

HTML 教程

上一篇：网站建设教程:从新手到高手
下一篇：web前端HTML教程-body部分

如何把网站转成微信小程序?其实就是这么简单

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

说下你的vue项目的目录结构，该怎么划分?

8.7k star，一款超炫酷的动态可视化大屏项目

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

谷歌SEO:外贸电商网站On-page SEO优化实战「附案例」