微信or支付寶 小程序 與 H5 相互關係

微信小程序與H5的關係

1. 微信小程序內嵌H5

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

// js
 onLoad(options) {
 	this.setData({
 		url: decodeURIComponent(options.url)
 	)}
 }

// js
goH5(){
	const url = 'https://baidu.com'
 	wx.navigateTo({
        url: `/pages/webview/webview?url=${encodeURI(url)}`,
   	});
}

2. 內嵌H5 跳轉到 微信小程序

// index.html
// 需要在index.html中引入這個js
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

項目直接調用如下方法：

  buy() {
  	  let id =1
  	  // 需要判斷當前環境
      wx.miniProgram.getEnv(res => {
        if (res.miniprogram) { // true
          // 微信小程序的邏輯
          wx.miniProgram.navigateTo({
            url: `/pages/pageA/pageA?id=${id}`
          });
        }
      });
    }

其他的頁面交互方法參考 👋👋👋官方文檔webview👋👋👋

支付寶小程序與H5的關係

1. 支付寶小程序 內嵌 H5

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

// js
 onLoad(options) {
 	this.setData({
 		url: decodeURIComponent(options.url)
 	)}
 }

// js
goH5(){
	const url = 'https://baidu.com'
 	my.navigateTo({
        url: `/pages/webview/webview?url=${encodeURI(url)}`,
   	});
}

2. 內嵌H5 跳轉到 支付寶小程序

// index.html
// 需要在index.html中引入這個js
// 方法1
<script type="text/javascript" src="https://appx/web-view.min.js"></script>
// 方法2
if (navigator.userAgent.indexOf('AlipayClient') > -1) {
    document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
 }

項目直接調用如下方法：

  buy() {
  	  let id =1
  	  // 需要判斷當前環境
  	  my.getEnv(res => {
        if (res.miniprogram) { // true
          my.navigateTo({
            url: `/pages/pageA/pageA?id=${id}`
          });
        }
      });
    }

其他的頁面交互方法參考 👋👋👋官方文檔webview👋👋👋

3. 獨立H5項目 跳轉到 支付寶小程序 （倆者沒有任何關係）

• 非小程序前端——跳轉小程序

// html
window.location.href="alipays://platformapi/startapp?appId=xxx&page=x/yz&query=xx%3dxx"

參數解釋

參數	描述	示例
appid	小程序appid	2017071307737205
page	小程序跳轉的頁面。如果不設置，默認爲跳轉至首頁。	pages/user/user
query	query：啓動參數，內容按照格式爲參數名=參數值&參數名=參數值… 之後encode	xx%3dxx