當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

微信小程序云开发--实现微信小程序中访问外部h5网页

發布時間：2023/12/31 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了微信小程序云开发--实现微信小程序中访问外部h5网页小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

小程序中需要在一些位置添加廣告，鏈接到外部的h5網頁。

整體實現思路：定義一個廣告組件，一個用來展示外部網頁的page outUrl, 在組件中使用wx.navigateTo()等跳轉到頁面outUrl, outUrl.wxml頁面中使用 <web-view src="{{url}}"></web-view>來實現跳轉。

步驟一：自定義一個advertising組件

<view class="advertisingBox" style="{{advertisingContent[0].show?'display:block':'display:none'}};margin-top:{{adverTop}};margin-bottom:{{adverBottom}}"><image src="{{advertisingContent[0].imgUrl}}" bindtap="toUrl" alt="">廣告位1，招租！！！！！！！</image> </view> // components/advertising/advertising.js wx.cloud.init(); const db = wx.cloud.database(); Component({/*** 組件的屬性列表*/properties: {//這是引用組件時傳來的adverTop和adverBottom，就是用來調整上下位置的adverTop: {type: String,value: '0px',},adverBottom: {type: String,value: '0px',}},/*** 組件的初始數據*/data: {advertisingContent:[],//廣告位內容},/*** 組件的方法列表*/methods: {// 獲取廣告為展示的內容圖片getAdverContent:function(index){let that = this;db.collection('advertisingContent').where({index:index}).get({success: function (res) {console.log(res)that.setData({advertisingContent:res.data,})},fail(){}})},// 給圖片加鏈接toUrl:function(){let that=this;// console.log(that.data.advertisingContent[0].url);wx.navigateTo({url:'../../pages/outUrl/outUrl?url='+that.data.advertisingContent[0].url})}} })

advertising.json文件沒什么要加的，advertising.wxss文件隨便加點樣式就可以了。

步驟二：定義一個outUrl頁面，其他也沒什么，就是outUrl.wxml中加上就可以了

<view> <web-view src="{{url}}"></web-view> </view> //ages/outUrl/outUrl.js 文件 onLoad: function (options) {console.log(options)//獲取一下advertising跳轉過來時傳遞的參數url。//http://xxx.cn/h5/Adver/adver1.html 是我們自己的域名下網頁// options.url 是商戶提供的h5網頁，下面使用iframe時會有用。this.setData({url:'http://xxx.cn/h5/Adver/adver1.html?outUrl='+options.url})},

還有就是使用web-view 這個標簽需要操作一下：
- 登錄小程序的賬號后臺，開發-開發設置-業務域名-這里需要將外部h5網頁所在的域名綁定一下，將一個文件放到域名根目錄下就可以了。
- 綁定好如果還不能顯示網頁，那就是微信、開發者工具版本太低，下個高版本就可以了，我就遇到過這個問題。

步驟三：在pages中使用advertising組件，順便記錄一下。

"usingComponents": {"advertising":"../../components/advertising/advertising"}  <advertising id="adver" adverTop="60px" adverBottom="-80px"></advertising> // pages/home/home.js 文件中 //自定義了一個adver方法，可以在onLoad()中執行adver:function(){//獲取home.wxml中的組件this.advertising=this.selectComponent('#adver');//調用components/advertising/advertising.js 中的getAdverContent(1)方法。this.advertising.getAdverContent(1)},

微信小程序訪問外部h5頁到上面就可以了。

還有個衍生問題：有的廣告是由商戶自己提供的鏈接的，網頁源碼都是在他們自己的服務器上。我們也不能把每個商戶的域名都添加到小程序的業務域名中去。

解決方式：在自己域名下定義一個廣告h5頁，使用iframe 標簽自己嵌入商戶的網頁。只需要傳入商戶提供的url到iframe中的src就可以，src存數據庫，修改也方便。

//http://xxx.cn/h5/Adver/adver1.html 指的就是這個頁面。 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>*{margin:0px;padding:0px;}html,body{height: 100%;width:100%;}</style> </head> <body><iframe id="iframe" src="" width="100%" height="100%" scrolling="auto" frameborder="0"> </iframe><script src="../js/jquery.min.js"></script><script>$(function(){// 獲取url參數function getQueryString(name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");var r = window.location.search.substr(1).match(reg);// console.log(r)if (r != null) return decodeURIComponent(r[2]);return null;};var outUrl = getQueryString('outUrl');//將商戶的網頁作為參數傳遞過來，這樣，只需要修改數據庫中存放的商戶h5地址，就可以在我們自己的頁面中顯示各種不同商戶頁了。$('#iframe').attr('src',outUrl)})</script> </body> </html>

使用iframe遇到的問題：隨便使用了一個網址作為商戶地址，遇到一個報錯：Refused to display 'https://www.zhihu.com/' in a frame because it set 'X-Frame-Options' to 'deny'. 。

然后又是一波面向百度編程，解釋如下：
X-Frame-Options是一個HTTP標頭（header），用來告訴瀏覽器這個網頁是否可以放在iFrame內。參數和含義：

X-Frame-Options: DENY : 告訴瀏覽器不要（DENY）把這個網頁放在iFrame內。這也是它的作用：保障你的網頁不會被放在惡意網站設定的iFrame內，幫助用戶對抗點擊劫持。

X-Frame-Options: SAMEORIGIN ：告訴瀏覽器只有當架設iFrame的網站與發出X-Frame-Options的網站相同，才能顯示發出X-Frame-Options網頁的內容，同域名才行。

X-Frame-Options: ALLOW-FROM https://www.zhihu.com/ ：告訴瀏覽器這個網頁只能放在https://www.zhihu.com/網頁架設的iFrame內。

不指定X-Frame-Options的網頁等同表示它可以放在任何iFrame內。

// X-Frame-Options 可以通過meta標簽來設置。 //一般單獨的廣告頁我覺得應該是不會設置這個的，碰巧我用了一下知乎的網址才發現這個問題，就順便記錄一下。 <meta http-equiv="X-Frame-Options" content="deny">

總結

以上是生活随笔為你收集整理的微信小程序云开发--实现微信小程序中访问外部h5网页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：从加密硬件开始，三未信安想在云时代转型云
下一篇： 2022Java的最流行的IDE工具