微信小程序云开发--实现微信小程序中访问外部h5网页
小程序中需要在一些位置添加广告，链接到外部的h5网页。
整体实现思路：定义一个广告组件，一个用来展示外部网页的page outUrl, 在组件中使用wx.navigateTo()等跳转到页面outUrl, outUrl.wxml页面中使用 <web-view src="{{url}}"></web-view>来实现跳转。
步骤一：自定义一个advertising组件
<!-- components/advertising/advertising.wxml 文件 //在数据库中有一个boolean状态来确定是否要使用这个广告位
-->
<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中加上就可以了
<!-- pages/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组件，顺便记录一下。
<!-- pages/home/home.josn 文件中引入组件 -->
"usingComponents": {"advertising":"../../components/advertising/advertising"}
<!-- pages/home/home.wxml 文件中调使用组件 -->
<!-- 广告位
adverTop="60px" adverBottom="-80px" 是传给子组件的参数
--><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网页相关推荐
- 基于微信小程序云开发的投票小程序源码，图文投票微信小程序源码
功能介绍 投票活动十分火,商家,企业,机构偶尔都会来一场投票活动评选,本小程序支持图文投票,简单方便.随时随地完成投票,可以方便设定投票模式(按天按全程,投票数限定). 本代码前后端完整代码包投票列表 ...
- 微信小程序云开发成绩查询小程序的制作过程。
微信小程序云开发成绩查询小程序的制作过程. 如果觉得我讲的好可以点个关注. 明确自己的目的,到底要做一个怎么样的小程序. 我先上效果图: 确定后就可以开始自己布局.主要是用css 1.先看首页,首页主 ...
- 小程序云开发实现微信支付，不需要搭建服务器
一.开发微信支付功能一定要架设服务器吗? 2019年的最后一天,舍得叔叔沉浸在探索的兴奋中,验证了微信小程序云开发也能优雅实现微信支付!小程序的目标是建立一个"serverless" ...
- mysql导入微信小程序云开发_微信小程序-云开发数据库上传json文件
小程序新增了云开发功能,对于个人开发者是个利好消息.可以省去购买服务器,购买域名以及繁琐配置等步骤,减轻了开发者的负担.至于如何云开发我就不在这里赘述了,请移步微信小程序云开发官方文档,说的很清楚.这 ...
- 微信小程序云开发 mysql_微信小程序云开发数据库
如在云开发数据库的基础介绍中所说,云开发提供了一个 JSON 数据库,本章将介绍以下内容: 上手:用控制台创建我的第一个集合,插入我的第一条数据 数据类型:了解数据库提供的数据类型 权限控制:控制集合 ...
- 微信小程序云开发-树洞小程序Treehole（介绍）
记录一款基于云开发的微信小程序. 树洞,顾名思义是作为匿名吐槽的平台,主要功能可以参照微信朋友圈的形式,不过采取的是匿名的方式. 主要基于微信小程序云开发,前端个人主页页面的界面使用的是ColorUi ...
- 微信小程序云开发|基于微信小程序实现房产中介平台系统
作者主页:编程千纸鹤 作者简介:Java.前端.Python开发多年,做过高程,项目经理,架构师 主要内容:Java项目开发.毕业设计开发.面试技术整理.最新技术分享 收藏点赞不迷路 关注作者有好处 ...
- 微信小程序云开发 mysql_微信小程序云开发学习笔记（一）云数据库
云开发配置的环境:cloud-learning 云开发环境初始化准备 需要: APPID 操作: 在创建项目时,填入APPID并选择不使用云函数 进入到开发者页面,点击左上角的云开发并选择开通 设置云 ...
- 小程序·云开发，属于小程序的全栈开发机遇
web前端教程 用大白话,来讲编程 近日,腾讯云"小程序·云开发"解决方案正式上线. 该方案通过简化复杂的后端和运维操作,让即便不具备一定后端知识的开发者也能高效开发出一款高质量的 ...
最新文章
- 面向固态激光雷达和惯导的里程计和建图
- Surf算法学习心得(一)——算法原理
- 嗅探软件和网络测试,决战无线网络 七款浏览器载入速度测试
- MVCC（Multi-version Cocurrent Control）
- 机器学习中的MLE、MAP和贝叶斯估计
- 通过js encodeURIComponent传到服务器的乱码问题
- 很口语blood-aholic
- leetcode64. 最小路径和（dp）
- 参加管理课程所获的 之一
- 微服务架构基本介绍与微服务设计模式
- nuc8 黑苹果_萝莉的身材野兽的心——NUC8 MacOS黑苹果-Win10双系统体验
- 递归与递推类型题小结
- 洛谷 P3359 改造异或树
- excel制作跨职能流程图_你会用Excel制作流程图吗？超级强大的功能
- 【风马一族_php】NO2_php基础知识
- Eclipse导入MySQL驱动包
- oracle vfp,VFP如何连SQL Server及Oracle
- 11.3.1越狱后无cydia清除越狱环境重新越狱
- 2020计算机专业评估,2020年计算机学科大学排名TOP50，实力强，毕业生认可度高...
- 美容院如何优化预约服务?