IT技术之家

首页 > 小程序

小程序

如何在小程序中嵌入网页或者网站(web-view)?_在下月亮有何贵干_小程序嵌入网页

发布时间:2022-10-24 16:46:51 小程序 0次 标签:小程序 前端 微信小程序 webview
有些人有某种需求,我已经制作了网站,可不可以直接做成小程序?不必用小程序语法重写一遍。当然可以,我们只需要将网页嵌入小程序就好了,十分简单,使用 web-view。...

目录

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

前言

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

当然可以,我们只需要将网页嵌入小程序就好了,十分简单,使用 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 了。

添加成功就大功告成啦。

尾言

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