将Html5手机端网站封装为微信小程序的方法_前端

未知

2024-03-29 11:02:54

0次

要求是网站是自适应的或者有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.tiong.com/"></web-view> </view>

5、修改详情

点击详情-本地设置-勾选不校验合法域名、web-view(业务域名)、TLS版本以及HTTPS证书，以方便本地进行测试。

6、配置业务域名

登录微信公众平台-开发管理-开发设置-业务域名，把H5域名添加为业务域名，把验证文件下载后上传到域名根目录下，然后点击保存。
同页面还有个Ip白名单，把域名添加进去。
然后就可以打开小程序工具预览页面。
如果是白屏，可以更新到最新版本试试，或者更换开发版、稳定版试试。

7、上传发布

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

8、版本提审

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

h5 微信小程序手机端网站封装打包小程序