微信小程序云开发--实现微信小程序中访问外部h5网页
生活随笔
收集整理的這篇文章主要介紹了
微信小程序云开发--实现微信小程序中访问外部h5网页
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
小程序中需要在一些位置添加廣告，鏈接到外部的h5網(wǎng)頁(yè)。
整體實(shí)現(xiàn)思路：定義一個(gè)廣告組件，一個(gè)用來展示外部網(wǎng)頁(yè)的page outUrl, 在組件中使用wx.navigateTo()等跳轉(zhuǎn)到頁(yè)面outUrl, outUrl.wxml頁(yè)面中使用 <web-view src="{{url}}"></web-view>來實(shí)現(xiàn)跳轉(zhuǎn)。
步驟一：自定義一個(gè)advertising組件
<!-- components/advertising/advertising.wxml 文件 //在數(shù)據(jù)庫(kù)中有一個(gè)boolean狀態(tài)來確定是否要使用這個(gè)廣告位 --> <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: {//這是引用組件時(shí)傳來的adverTop和adverBottom，就是用來調(diào)整上下位置的adverTop: {type: String,value: '0px',},adverBottom: {type: String,value: '0px',}},/*** 組件的初始數(shù)據(jù)*/data: {advertisingContent:[],//廣告位內(nèi)容},/*** 組件的方法列表*/methods: {// 獲取廣告為展示的內(nèi)容圖片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文件隨便加點(diǎn)樣式就可以了。
步驟二：定義一個(gè)outUrl頁(yè)面，其他也沒什么，就是outUrl.wxml中加上就可以了
<!-- pages/outUrl/outUrl.wxml 文件 --> <view> <web-view src="{{url}}"></web-view> </view> //ages/outUrl/outUrl.js 文件 onLoad: function (options) {console.log(options)//獲取一下advertising跳轉(zhuǎn)過來時(shí)傳遞的參數(shù)url。//http://xxx.cn/h5/Adver/adver1.html 是我們自己的域名下網(wǎng)頁(yè)// options.url 是商戶提供的h5網(wǎng)頁(yè)，下面使用iframe時(shí)會(huì)有用。this.setData({url:'http://xxx.cn/h5/Adver/adver1.html?outUrl='+options.url})},- 還有就是使用web-view 這個(gè)標(biāo)簽需要操作一下：
- 登錄小程序的賬號(hào)后臺(tái)，開發(fā)-開發(fā)設(shè)置-業(yè)務(wù)域名-這里需要將外部h5網(wǎng)頁(yè)所在的域名綁定一下，將一個(gè)文件放到域名根目錄下就可以了。
- 綁定好如果還不能顯示網(wǎng)頁(yè)，那就是微信、開發(fā)者工具版本太低，下個(gè)高版本就可以了，我就遇到過這個(gè)問題。
步驟三： 在pages中使用advertising組件，順便記錄一下。
<!-- pages/home/home.josn 文件中引入組件 --> "usingComponents": {"advertising":"../../components/advertising/advertising"} <!-- pages/home/home.wxml 文件中調(diào)使用組件 --> <!-- 廣告位 adverTop="60px" adverBottom="-80px" 是傳給子組件的參數(shù) --><advertising id="adver" adverTop="60px" adverBottom="-80px"></advertising> // pages/home/home.js 文件中 //自定義了一個(gè)adver方法，可以在onLoad()中執(zhí)行adver:function(){//獲取home.wxml中的組件this.advertising=this.selectComponent('#adver');//調(diào)用components/advertising/advertising.js 中的getAdverContent(1)方法。this.advertising.getAdverContent(1)},微信小程序訪問外部h5頁(yè)到上面就可以了。
還有個(gè)衍生問題：有的廣告是由商戶自己提供的鏈接的，網(wǎng)頁(yè)源碼都是在他們自己的服務(wù)器上。我們也不能把每個(gè)商戶的域名都添加到小程序的業(yè)務(wù)域名中去。
解決方式：在自己域名下定義一個(gè)廣告h5頁(yè)，使用iframe 標(biāo)簽自己嵌入商戶的網(wǎng)頁(yè)。只需要傳入商戶提供的url到iframe中的src就可以，src存數(shù)據(jù)庫(kù)，修改也方便。
//http://xxx.cn/h5/Adver/adver1.html 指的就是這個(gè)頁(yè)面。 <!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參數(shù)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');//將商戶的網(wǎng)頁(yè)作為參數(shù)傳遞過來，這樣，只需要修改數(shù)據(jù)庫(kù)中存放的商戶h5地址，就可以在我們自己的頁(yè)面中顯示各種不同商戶頁(yè)了。$('#iframe').attr('src',outUrl)})</script> </body> </html>使用iframe遇到的問題：隨便使用了一個(gè)網(wǎng)址作為商戶地址，遇到一個(gè)報(bào)錯(cuò)：Refused to display 'https://www.zhihu.com/' in a frame because it set 'X-Frame-Options' to 'deny'. 。
-
然后又是一波面向百度編程，解釋如下：
- X-Frame-Options是一個(gè)HTTP標(biāo)頭（header），用來告訴瀏覽器這個(gè)網(wǎng)頁(yè)是否可以放在iFrame內(nèi)。參數(shù)和含義：
X-Frame-Options: DENY : 告訴瀏覽器不要（DENY）把這個(gè)網(wǎng)頁(yè)放在iFrame內(nèi)。這也是它的作用：保障你的網(wǎng)頁(yè)不會(huì)被放在惡意網(wǎng)站設(shè)定的iFrame內(nèi)，幫助用戶對(duì)抗點(diǎn)擊劫持。
X-Frame-Options: SAMEORIGIN ：告訴瀏覽器只有當(dāng)架設(shè)iFrame的網(wǎng)站與發(fā)出X-Frame-Options的網(wǎng)站相同，才能顯示發(fā)出X-Frame-Options網(wǎng)頁(yè)的內(nèi)容，同域名才行。
X-Frame-Options: ALLOW-FROM https://www.zhihu.com/ ：告訴瀏覽器這個(gè)網(wǎng)頁(yè)只能放在https://www.zhihu.com/網(wǎng)頁(yè)架設(shè)的iFrame內(nèi)。
不指定X-Frame-Options的網(wǎng)頁(yè)等同表示它可以放在任何iFrame內(nèi)。
總結(jié)
以上是生活随笔為你收集整理的微信小程序云开发--实现微信小程序中访问外部h5网页的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 从加密硬件开始，三未信安想在云时代转型云
- 下一篇： 2016年计算机本科考试试题,(2016