【小程序】--- 嵌套H5

时间：2024-01-30 22:58:19

一、小程序嵌套H5的方式

// 使用小程序提供的 web-view 标签

<web-view src="https://{{url}}"></web-view>

// 注：<web-view>不支持个人小程序账号和海外的小程序账号;
// 使用 <web-view> 标签能在小程序中打开外部网页，但是要打开的网页的域名必须跟小程序的业务域名（业务域名可以在小程序的后台管理界面添加）一致。

 

二、小程序给H5传递参数

// 在H5的路径上拼接参数

onLoad: function (options) {
    var webData = {
      \'accountId\': app.globalData.accountId,
      \'clientId\': app.globalData.clientId,
      \'clientSecret\': app.globalData.clientSecret,
      \'refreshToken\': app.globalData.refreshToken,
      \'token\': app.globalData.accessToken,
      \'userId\': app.globalData.userId,
      \'username\': app.globalData.username,
      \'versionId\': app.globalData.versionId
    }
    this.setData({
      // 对象传值取不到
      // url:"app.globalData.serverWebUrl/#/phone?miniData="+encodeURIComponent(JSON.stringify(webData)) 
　　    url: app.globalData.serverWebUrl + "/#/phone?accountId="+webData.accountId+"&clientId="+webData.clientId+"&clientSecret="+webData.clientSecret+"&refreshToken="+webData.refreshToken+"&token="+webData.token+"&userId="+webData.userId+"&username="+webData.username+"&versionId="+webData.versionId 
　　 })
}

 

三、H5调用小程序api

// 小程序提供了H5网页中使用的JSSDK文件，虽然不如小程序原生API丰富，但也有获取设备网络状态、地理位置、微信扫一扫、摇一摇、长按识别、拍照等接口。

<!-- html -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
 
// javascript
wx.miniProgram.navigateTo({url: \'/path/to/page\'})

 

【一如嵌套深似海...】

 

相关文章