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' });
