web-view——微信小程序嵌入H5

  web-view 组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。

开发环境:angular + 微信小程序



<!-- wxml --> <!-- 指向微信公众平台首页的web-view -->
 <web-view src="http://localhost:4200/"></web-view>  
 

  在Angular中调用微信小程序JSSDK

  index.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Wechath5</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
</head>

<body>
  <app-root></app-root>
</body>
</html>

在Angular组件中调用小程序JSSDK提供方法接口

import { Component, OnInit } from '@angular/core';
declare var wx: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  info = null;
  ngOnInit() {
    const that = this;

    // 微信接口
    wx.miniProgram.getEnv(function (res) {
      that.info = res.miniprogram;
    });
  }
}

 小程序向H5传递参数的方式  url?id=1

  H5返回小程序并传递参数

 wx.miniProgram.redirectTo({
      url: '../index/index?name=word'
    });
 

猜你喜欢

转载自www.cnblogs.com/zry2510/p/9242599.html