【小程序】--- 嵌套H5

一、小程序嵌套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'})

 

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