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

Posted 2023-03-23 在下月亮有何贵干

目录

• 前言
• 创建小程序
• 写入网页
• 添加业务域名
• 尾言

前言

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

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

创建小程序

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

写入网页

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

注意：

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

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 了。

添加成功就大功告成啦。

尾言

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