微信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