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

時間 2019-11-19

標籤 web view 微信程序嵌入 h5 欄目 HTML 简体版

原文原文鏈接

web-view 組件是一個能夠用來承載網頁的容器，會自動鋪滿整個小程序頁面。我的類型與海外類型的小程序暫不支持使用。javascript

開發環境：angular + 微信小程序



<!-- wxml --> <!-- 指向微信公衆平臺首頁的web-view -->

 <web-view src="http://localhost:4200/"></web-view>

在Angular中調用微信小程序JSSDKcss

index.htmlhtml

<!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提供方法接口java

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=1web

H5返回小程序並傳遞參數小程序

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。