前言

有些人有某种需求，我已经制作了网站，可不可以直接做成小程序？不必用小程序语法重写一遍。

当然可以，我们只需要将网页嵌入小程序就好了，十分简单，使用 web-view。

创建小程序

详见小程序入门开发攻略创建小程序部分：小程序开发攻略。

写入网页

我们可以将网站引入，将模板代码删除或注释，覆盖模板首页。

注意：

web-view 引入的网页必须是 https 协议。
网页必须备案过。

pages/index/index.wxml

<!--index.wxml-->
<view class="container"><web-view src="https://xxxxx.com"></web-view><!-- <view class="userinfo"><block wx:if="{{canIUseOpenData}}"><view class="userinfo-avatar" bindtap="bindViewTap"><open-data type="userAvatarUrl"></open-data></view><open-data type="userNickName"></open-data></block><block wx:elif="{{!hasUserInfo}}"><button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button><button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button><view wx:else> 请使用1.4.4及以上版本基础库 </view></block><block wx:else><image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image><text class="userinfo-nickname">{{userInfo.nickName}}</text></block></view><view class="usermotto"><text class="user-motto">{{motto}}</text></view> -->
</view>

添加业务域名

我们会发现即便自己的网页是 https 协议且备案过，访问的时候也会提示你：非业务域名。

我们需要登录微信公众平台：微信公众平台。

进入自己的小程序管理，左边菜单选择 开发->开发管理，然后上方选择开发设置。

往下滑找到业务域名。

将我们要引入的网站域名添加进去。

注意：添加时可能需要下载一个 txt 授权文件到你的网站域名下，只要能确保可以通过域名 https://xxxxxxx.com/授权文件.txt 访问到该文件就 ok 了。

添加成功就大功告成啦。

尾言

如果觉得文章对你有帮助的话，欢迎点赞收藏哦，有什么错误或者意见建议也可以留言，感谢~

如何在小程序中嵌入网页或者网站（web-view）？相关推荐

微信小程序WebView嵌入别人网页的解决办法
在做微信小程序开始时,大家都能遇到,WebView组件使用的URL必须要在小程序的后台设置业务域名,并且在对应域名服务器根目录下要放置对应的验证文件,否则发布后是无法正常打开的. 在开发测试时,我在小 ...
微信小程序如何打开网页
在微信小程序中打开网页需要满足两个条件: 1.在小程序管理后台设置跳转的域名为业务域名,注意这个域名必须是https协议的: 2.需要下载一个校验文件放置跳转域名的服务器根目录下,也就是讲这个跳转域名 ...
html跳转图文消息,GitHub - Arrrrray/newsToHtml: 微信公众号图文消息转换为HTML，方便插入到小程序中显示...
newsToHtml 微信公众号图文消息转换为 HTML,方便插入到小程序中显示项目来源在编写公众号图文的时候,我们通常将一些小程序页卡插入其中.尤其是购物推荐类的公众号,用户在浏览图文消息的时候 ...
微信小程序通过web-view网页授权获取用户公众号OpenID
小程序中实现网页授权获取微信公众号OpenID 1.准备工作 2.应用场景说明 3.实现步骤结语 1.准备工作第一步: 通过该地址https://mp.weixin.qq.com/debug/cg ...
如何在小程序中添加广告并获取收益
小程序广告组件最近全面开放,门槛十分低,只需要累计独立访客(UV)不低于1000 并且没有严重违规记录.下面教大家如何在小程序中添加广告. 1.申请成为流量主首先进入小程序后台,点击流量主,点击开通 ...
2022-01-13 微信小程序-简历小项目(一) 小程序中的flex布局,简历首页的制作,箭头区域的制作
文章目录一.准备 1.目标 2.小程序中的flex布局回顾flex布局小程序中要把div换成view标签,别的不变二.制作简历小程序-首页 1.利用小程序提供的独有的API来初始化高和宽小程 ...
微信小程序云开发--实现微信小程序中访问外部h5网页
小程序中需要在一些位置添加广告,链接到外部的h5网页. 整体实现思路:定义一个广告组件,一个用来展示外部网页的page outUrl, 在组件中使用wx.navigateTo()等跳转到页面outUr ...
微信小程序怎么嵌入手机版的网页？
打开"微信web开发者工具",如下图,按目录结构找到左侧 1 的文件并打开,在右侧写入 2 的代码,发布审核就可以了.这样就可以在小程序里面嵌入手机版的网页了. 注意:代码中的域名 ...
小程序中使用web-view链接H5网页
##加粗样式小程序中使用web-view链接H5网页 1.小程序中,封装统一的接口请求方法(以便在每个接口中都携带 cookie,放在 header 中):const request = parame ...
小程序webview嵌入h5兼容iphone安全区域
在苹果 iPhoneX及以上设备上,可以看到物理Home键被取消,改为底部小黑条替代home键功能.微信小程序和 h5 网页需要针对这种情况进行适配,否则可能会遇到底部按钮或选项卡栏与底部黑线重叠的情 ...

如何在小程序中嵌入网页或者网站（web-view）？

目录

前言

创建小程序

写入网页

添加业务域名

尾言

如何在小程序中嵌入网页或者网站（web-view）？相关推荐

最新文章

热门文章