小程序嵌套h5页面_微信小程序内嵌h5页面

概况

使用 标签能在小程序中打开外部网页，但是要打开的网页的域名必须跟小程序的业务域名(业务域名可以在小程序的后台管理界面添加)一致，否则在真机上是打不开的。如果开发工具上勾选了‘不校验域名’，在开发的时候还是能打开的，但也没用，线上是打不开的。

不管有没有内容， 会占满整个屏幕。

内嵌H5，更新代码发布上线可以绕过审核。

的限制

使用限制：对个人类型和海外类型的小程序暂不支持

指向域名的限制：域名必须为 https 协议且经过ICP备案

域名修改限制：一个小程序最多可添加20个域名，一年可修改50次

基础库限制：基础库 1.6.4 以上版本支持这组件

注：配置域名时，需要从配置后台下载校验文件放在域名根目录下，验证通过后才能配置成功。

实例：

1. index.wxml

错：

开发的时候有时会遇到如下提示：

原因是内嵌的H5页面也是要通过微信授权才能开发的，像开发小程序一样把自己添加到H5页面的开发者里面去就好了。

小程序和内嵌页面的联系

小程序提供了H5网页中使用的JSSDK文件，如下引用：

// javascript

wx.miniProgram.navigateTo({url: '/path/to/page'})

引入SDK后可以调用小程序JSSDK提供的API，虽然不如小程序原生API丰富，但也有获取设备网络状态、地理位置、微信扫一扫、摇一摇、长按识别、拍照等接口。

截止目前为止，小程序基本不能获取网页的数据，只有在用户分享的时候，可以从返回的参数中获取 组件当前显示的页面路径。

注意事项：

1：如果h5页面有请求必须是https请求；

2：如果不是内嵌h5域名不是和当前小程序一样需要在小程序后台配置业务域名；

3：内嵌的h5页面占满了整个屏幕覆盖了原有组件；(通过一下方式可以解决但是在开发者工具上没有效果在真机 上可以显示显示)

1：link.wxml

客服

客服

2:link.wxss

/*pages/link/link.wxss*/.imgBg{width:100%;height:100%;}.tool-bar{color:#fff;position:fixed;bottom:53%;right:0rpx;width:80rpx;height:80rpx;border-radius:8rpx;z-index:999999;

/*box-shadow: 0px 0px 15px 4px rgba(0,0,0,0.15);*/

}.nav-bg{width:80rpx;height:80rpx;position:absolute;left:0;top:0;z-index:-1;border-radius:8rpx;

}.tool-btn{width:80rpx;height:80rpx;position:absolute;top:0rpx;left:0rpx;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;

}.tool-btn button{border:none;height:80rpx;background:none;border-radius:0;line-height:80rpx;color:#333;font-size:20rpx;text-align:center;}.tool-btn button:after{border:none;}.tool-btn-bar{color:#fff;position:fixed;bottom:0%;right:0rpx;width:100%;height:100rpx;border-radius:8rpx;z-index:999999;

/*box-shadow: 0px 0px 15px 4px rgba(0,0,0,0.15);*/

}.nav-btn-bg{width:100%;height:100rpx;position:absolute;left:0;top:0;z-index:-1;border-radius:8rpx;

}.tool-btn-btn{width:100%;height:100rpx;position:absolute;top:0rpx;left:0rpx;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;

}.tool-btn-btn button{border:none;height:100%;background:none;border-radius:0;line-height:100rpx;color:#333;font-size:20rpx;text-align:center;}.tool-btn-btn button:after{border:none;}

View Code

3:link.js

//pages/link/link.js

const app =getApp();var api = require('../../utils/api.js');var request = require('../../utils/request.js');

Page({/**

* 页面的初始数据*/data: {//url: '/mjob/my/index'

url: 'https://m.dajie.com/apps/cyberstar/v58',//url: 'https://www.meishitong168.com/h5/sign/login/index?fromType=3',

session_key:''},/**

* 生命周期函数--监听页面加载*/onLoad:function(options) {var that = this

//console.log("options", options)

//if (options.id == 3){

//that.setData({

//url: options.url

//})

//} else{

//that.setData({

url: 'https://mp.weixin.qq.com/s?__biz=' + options.__biz + '==&mid=' + options.mid + '&idx=' + options.idx + '&sn=' + options.sn + '&chksm=' + options.chksm + '&mpshare=' + options.mpshare + '&scene=' + options.scene + '&srcid=' + options.srcid + '&sharer_sharetime=' + options.sharer_sharetime + '&sharer_shareid=' + options.sharer_shareid + '#rd'

//url: 'https://mp.weixin.qq.com/s?__biz=' + options.__biz + '==&mid=' + options.mid + '&idx=' + options.idx + '&sn=' + options.sn + '&chksm=' + options.chksm + '#rd'

//});

//}

console.log('options')

console.log(options)

console.log(this.data.url)

},/**

* 生命周期函数--监听页面初次渲染完成*/onReady:function() {

},/**

* 生命周期函数--监听页面显示*/onShow:function() {

console.log('app')//this.getCodeMsg()

},

handleContact(e){

console.log(e)

},//通过code获取加密字符串

getCodeMsg: function() {var that = this;

wx.request({

url: api.API_SESSION_KEY,

method:'GET',

data: {

code: app.globalData.code

},

success:function(res) {//debugger;

res =res.data;//wx.showToast({

//title: JSON.stringify(res),

//icon: 'success',

//duration: 20000000

//})

console.log(res)if (res.statusCode == 0) {

console.log('生成third_session成功');//设置third_session_key

//var thirdSession = res.data.third_session;

//that.globalData.third_session_key = thirdSession;

//wx.setStorageSync('third_session_key', thirdSession);

设置selfOpenId

//var selfOpenId = res.data.selfOpenId;

//that.globalData.selfOpenId = selfOpenId;

//wx.setStorageSync('selfOpenId', selfOpenId);

//util.isFuction(fn) && fn();

} else{//console.log(res.data.msg);

}

},

fail:function() {

console.log('error111');

},

complete:function() {

console.log('error222');

}

});

},//点击唤起客服信息时候发送加密key

sendKey: function(e) {

console.log(e)var dataTime = e.currentTarget.dataset['time']var data ={

b: dataTime,

r:newDate().getTime()

}//发送pv uv

request.sendPvUv(data)

},/**

* 生命周期函数--监听页面隐藏*/onHide:function() {

},/**

* 生命周期函数--监听页面卸载*/onUnload:function() {

},/**

* 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh:function() {

},/**

* 页面上拉触底事件的处理函数*/onReachBottom:function() {

},/**

* 用户点击右上角分享*/onShareAppMessage:function() {

}

})

View Code