网页如何与小程序交互通信_小程序 pc网站之间通信_Dandelion_drq的博客

小程序后台配置业务域名

这是小程序开发的限制，在 web-view 里要打开的网页的域名要先在微信公众平台小程序后台 开发 --> 开发设置 --> 业务域名 里添加一项，否则 web-view 无法打开这个网页。

PS：不想配置这个的话也可以在 微信开发者工具 里面开启 不校验合法域名 。

网页引入 `微信js-sdk`

微信JS-SDK 是微信提供的基于微信内的网页开发工具包。做过微信公众号网页开发的同学应该就知道了~~（那是出了名的难用……）~~。

官方文档链接： https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

怎么引入我就不写了，同学们按上面的文档提示操作就好。

想用npm方式引用的话也可以找第三方，我用的是这个 weixin-js-sdk 。

网页向小程序发送消息

我做了个很简单的demo页，演示了导航到小程序页面和给小程序发消息的功能。

页面如下：

页面是用 vue 写的，很简单，直接上代码了：

<template>
    <section>
        <section>
            <h2>点击图片事件</h2>
            <div @click="onClick">
                <img src="https://via.placeholder.com/300x150" alt="">
            </div>
        </section>
        <section>
            <h2>与小程序交互</h2>
            <button @click="switchTab">回到小程序首页</button>
            <button @click="postMessage">给小程序发消息</button>
        </section>
    </section>
</template>
<script>
	const wx = require('weixin-js-sdk');
    export default {
          data () {
            return {
                isMiniprogram: false, // 是否是小程序环境
        mounted () {
            this.wx = wx;
            this.wx.miniProgram.getEnv((res) => {
                console.log('getEnv', res, res.miniprogram);
                this.isMiniprogram = true;
            });
        methods: {
            onClick () {
                console.log('点击图片', this.wx);
            switchTab () {
                if (this.isMiniprogram) {
                    this.wx.miniProgram.switchTab({
                        url: '/pages/index/index',
                        success: function (res) {
                            console.log('success', res);
                        fail: function (err) {
                            console.log('fail', err);
                        complete: function (res) {
                            console.log('complete', res);
                    });
            postMessage () {
                if (this.isMiniprogram) {
                    this.wx.miniProgram.postMessage({
                        data: { foo: 'bar' },
                    });
</script>
<style lang="scss" scoped>
    button {
        padding: 10px;
        background: #333;
        color: #fff;
        border: none;
        margin-right: 10px;
        border-radius: 5px;
    h2 {
        padding: 30px 0 20px 0;
    section {
        text-align: center;
</style>
这里有几个要注意的点： 
 导航到小程序页面的时候跟小程序开发的路由方法是一样的，即如果要导航到 tabbar 页面，不能用 navigateTo 方法，要用 switchTab，否则的话在小程序调试时不会发生任何跳转，而且居然没有任何错误提示。（我就是在这被坑了……）
 
 wx.miniProgram.postMessage 方法的参数格式是对象，而且要有 data 属性，即 {data:...} 这样，不然在小程序里收不到。
  微信js-sdk官方文档说使用所有接口前都需要先配置权限，然而！！miniProgram 这一系列方法是可以不用 config 的……关于这个社区有人问过：小程序跳转网页有bug吗。因为我这个网页不想拿微信用户信息，所以这一点对我来说还是比较重要的。
  
小程序接收消息
 
小程序 web-view 的 bindmessage 不会在网页发送完消息后立刻收到，而是会在小程序后退、组件销毁、分享时触发并收到消息。而且如果网页发送了多次消息，在小程序接收的时候会把 data 合并。 
 网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data }，data是多次 postMessage 的参数组成的数组 
直接看一下代码和输出 
<!-- wxml -->
<view class='web-view'>
  <web-view src="{{url}}" bindmessage="getMsgFromWeb" bindload="onWebLoad" binderror="onWebError"></web-view>
</view>
// js
  getMsgFromWeb(e) {
    console.log('getMsgFromWeb', e.detail.data)
  onWebLoad(e) {
    console.log('onWebLoad', e)
  onWebError(e) {
    console.error('onWebError', e)
上面的截图是我点击了10次发送消息按钮，然后 getMsgFromWeb 的输出是在我点了回到小程序首页按钮后输出的。 
网页和小程序交互通信的基本实现方式就是这样啦，因为自己开发的时候被坑了一下，在此做个记录，希望对还在爬坑的同学有用~~
                    概述网页与小程序交互和通信需要在小程序里使用 web-view 组件打开网页，而且被访问的网页需要引入微信的 js-sdk，通过 js-sdk 提供的接口来给小程序发信息。具体可以参考小程序官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html小程序后台配置业务域名这是小程序开发的限制，在 ...
				小程序的页面跳转API像wx.navigateTo()、wx.redirectTo()之类的，都是跳转到一个全新的页面，当这个页面是表单的时候，有时候需要跳转到其它页面选取信息后再跳转回来，那之前填的信息就必须得存在。
			小程序的页面跳转API像wx.navigateTo()、wx.redirectTo()之类的，都是跳转到一个全新的页面，当这个页面是表单的时候，有时候需要跳转到其它页面选...
主要是针对小程序开发中页面之间进行通信的问题，在涉及支付的场景中，用户从页面支付入口进行跳转进行支付之后，回到原来页面，在原来的页面需要进行相应的状态刷新，比如用户身份状态、支付状态、文档或商品情况。
遇到的问题
在使用百度小程序的 swan.navigateBack 进行回跳页面时，API中的方法参数不支持...
一、websocket的介绍
1.1 websocket概念
websocket是HTML5中新引进的一种协议，它是一种协议就像(HTTP,FTP在tcp/ip协议栈中属于应用层)而不是简单的一个函数。它本身及基于TCP协议的一种新的协议。
二、PHP WEBsocket
 * Socket服务器
class SocketServer
基础库 1.6.4 开始支持，低版本需做兼容处理。
承载网页的容器。会自动铺满整个小程序页面，个人类型的小程序暂不支持使用。
客户端 6.7.2 版本开始，navigationStyle: custom 对 web-view 组件无效
src		        webview 指向网页的链接。可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名。	...
其中this.data是用来获取页面data对象的；
setData（）函数用于将逻辑层数据发送到视图层，同时对应的改变this.data的值。this.setData是用来更新界面的。
解决方法：
在微信小程序开发中，想要数据和页面同步更新只能用this.setData({属性：值})
getCurrentPages
let pages = getCurrentPages(); // 当前页面
let beforePage = pages[pages.length - 2]; 前一个页面
wx.navigateBack({
  success: functio
				小程序向web-view发送消息
在&amp;lt;web-view&amp;gt;组件中有一个属性src（src是webview 指向网页的链接。可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名。）
通过设置src中GET参数即可向网页传递参数：
&amp;lt;web-view src=&quot;https://mp.weixin.qq.com?name='name'&amp;amp;age=12&quot;&amp;gt
				微信小程序页面之间的通信前言1、使用url后面加参数的形式通信2、利用缓存通信3、使用globalData全局变量通信4、使用外部引入js文件通信总结
在前端开发中，组件之间的通信往往是老生常谈的话题，在小程序开发中也包含多种页面之间的通信方式，在这里做个笔记。
1、使用url后面加参数的形式通信
在跳转页面的时候在url的后面添加需要传递到新页面的参数，并且在新的页面中的onlocal生命...
				在小程序中，我们希望分享内容与链接为访问的当前web页面内容，若该web页面不是小程序入口的第一页面，是无法获取该页面信息的。如何在web页面多次跳转后，仍能获取页面信息呢。即如何实现web页面与小程序的通讯。
1 首先我们需要在我们的web页面引入微信的SDK。链接地址：//res.wx.qq.com/open/js/jweixin-1.3.2.js
2 在web页面调用wx.miniP...
				微信小程序与Webview交互是指在微信小程序中使用Webview组件，通过与Web页面进行通信，实现数据传递和页面交互的功能。
首先，微信小程序中可以使用Webview组件来加载一个Web页面。通过提供Web页面的URL，可以在小程序中显示该页面，并且可以通过设置Webview组件的属性，如src、bindmessage等来进行相应的控制。
其次，微信小程序中的Webview组件可以通过向Web页面发送消息，与Web页面进行通信交互。通过调用Webview组件的postMessage方法，可以向Web页面发送信息，而Web页面可以通过监听message事件，接收到小程序发送的消息并进行相应的处理。
另外，小程序中的Webview组件也可以通过调用evaluateJavaScript方法，执行Web页面中的JavaScript代码。
通过以上的方式，微信小程序与Webview之间可以进行双向的数据传递和页面交互。小程序可以向Web页面发送消息请求，获取Web页面中的数据或执行相应的操作，同时Web页面也可以通过发送消息给小程序，将需要的数据传递给小程序进行处理和展示。
总而言之，微信小程序与Webview交互可以实现小程序和Web页面之间的数据传递和页面交互功能，进一步拓展了小程序的功能和应用场景。

小程序后台配置业务域名

网页引入 微信js-sdk

网页向小程序发送消息

小程序接收消息

网页引入 `微信js-sdk`