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

小程序中需要在一些位置添加广告,链接到外部的h5网页。

整体实现思路:定义一个广告组件,一个用来展示外部网页的page outUrl, 在组件中使用wx.navigateTo()等跳转到页面outUrl, outUrl.wxml页面中使用 来实现跳转。

步骤一:自定义一个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 指的就是这个页面。

<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>Documenttitle>
    <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内。参数和含义:
  1. X-Frame-Options: DENY : 告诉浏览器不要(DENY)把这个网页放在iFrame内。这也是它的作用:保障你的网页不会被放在恶意网站设定的iFrame内,帮助用户对抗点击劫持。

  2. X-Frame-Options: SAMEORIGIN :告诉浏览器只有当架设iFrame的网站与发出X-Frame-Options的网站相同,才能显示发出X-Frame-Options网页的内容,同域名才行。

  3. X-Frame-Options: ALLOW-FROM https://www.zhihu.com/ :告诉浏览器这个网页只能放在https://www.zhihu.com/网页架设的iFrame内。

  4. 不指定X-Frame-Options的网页等同表示它可以放在任何iFrame内。

//  X-Frame-Options 可以通过meta标签来设置。
//一般单独的广告页我觉得应该是不会设置这个的,碰巧我用了一下知乎的网址才发现这个问题,就顺便记录一下。
<meta http-equiv="X-Frame-Options" content="deny">

你可能感兴趣的:(微信小程序云开发,小程序,javascript)