浅析微信小程序和web之间的交互（代码分享）

之前的文章《深入浅析React Native与Web的基本交互（附代码）》中，给大家了解一下React Native与Web交互。下面本篇文章给大家了解一下微信小程序和web之间的交互，有需要的朋友可以参考一下，希望对你们有帮助。

背景

通常我们写了一套自适应的web程序，想在多种环境中使用.比如app里，微信小程序里,各种app分享中，假如只是能使用app浏览，问题不大，但是要在被嵌入app里面和app本身交互，就要做各种折腾，如是就有了本文。

在 ReactNative 里折腾，请看这里

接入条件

首先得有开发者权限

你得有台服务器，有权限上传文件，不然验证无法通过

必须是企业小程序，个人和海外小程序无法使用 web-view 组件

你的相关域名配置了有效的证书，并且开启了 https 服务

你要访问的网址必须加入了业务域名白名单，网址所调用的api接口必须加入了服务器域名白名单，并且 api 接口也使用的 https 协议

以上条件必须同时满足，缺一不可微信 J SSD K 引入

微信 JSSDK 引入

外部引入

<script ty PE ="text/javascript" src="http://res.wx. QQ  .COM /open/js/jw ei xin-1.4.0.js"></script>
//进一步 提升 服务稳定性，当上述资 源 不可访问时，可改访问
<script type="text/javascript" src="http://res2.wx.qq测试数据/open/js/jweixin-1.4.0.js "></script>

使用 am D/CMD标准模块加载方法加载

安装

npm i weixin- js-sdk

在mian.js用使用

import wx  From  & # 39;weixin-js -s dk'

判断是微信小程序环境

通过 userAgent 为 mic rom essenger ，或者 window.__wxjs_ env ironment 来判断

从微信 7.0.0 开始，可以通过判断userAgent中包含mini PR ogram字样来判断小程序web-view环境。

import wx from "weixin-js-sdk";

let OS = "PC"; //假设有多种环境

let ua = window.navigator.userAgent.toLowerCase();
if (
  ua.indexOf(" ;m icromessenger") >= 0 ||
  window.__wxjs_environment  ===  "miniprogram"
) {
  //在微信或者小程序中
  wx.miniProgram.getEnv((res) => {
    if (res.miniprogram) {
      //在小程序中
      OS = "w XM iniprogram";
      window.wx = wx;
    } else {
      //在微信中
      OS = "weixin";
    }
  });
}

引入了 sdk ，知道了环境变量，下面就是开干了。

交互示例小程序端

使用小程序端的组件，新建 /page/webview/index.wx ML

web-view会自动铺满整个小程序页面，个人类型与海外类型的小程序暂不支持使用。客户端6. 7.2 版本开始，navigationStyle: custom对组件无效

<!-- 通过src 来传递当前url, 通过bindmessage 来监听html的传值 -->
<web-view src="{{url}}" bindmessage="getMessage" />

新建 /page/webview/index.js

// pages/webview/index.js
const app = getApp();
Page({
  data: {
    url: "",
    sha red ata: {},
    postData: {},
  },
  onLoad: function (options) {
    // nickName ,token 是登录之后拿到的信息 , 用来和h5 交互
    let nickName = wx.getStorageSync("nickName");
    let token = wx.getStorageSync("token");

    let url = options.url;
    if (url) {
      //请注意传递url 请务必使用 decodeURI component  和 encodeURIComponent , 不然会 白屏 
      url = decodeURIComponent(url);
    }
    //因为小程序 貌似还不能主动和H5 交互,所以拿到的登录信息,我们通过url 来传递.
    let localUrl = "";
    if (token) {
      localUrl = url + "?token=" + userToken + "&am p; nickName=" + nickName;
    }
    //犹豫地址存了token 和其他信息,分享会暴露,所以要手动重置分享地址 数据为 shareData
    this.setData({
      url: localUrl,
      shareData: {
        t IT il: "测试小程序",
        desc: "测试小程序藐视描述",
        path: url,
      },
    });
  },
  getMessage(e) {
    //此处接收html传递过来的参数
    this.postData = e.det ai l.data;
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
    //重置分享链接和路径
    return {
      title: this.shareData.title,
      desc: this.shareData.desc,
      path: this.shareData.path,
    };
  },
});

交互示例web端

在web端，我们知道如何判断web是在小程序中，可以通过微信 jsskd 直接发送交互信息，和在原生的微信小程序里一样

做路由跳转

// 前面我们已经定义了window.wx = wx ,这里可以直接调用
// 还可以通过url 来获取token 等相关信息

if (OS  ==  "RN") {
  //这里假设我们有多重环境 .. 
}
if (OS == "wxminiprogram") {
  wx.miniProgram. navigate To({
    url:
      "/pages/webview/index?url=" +
      decodeURIComponent("https://HdhCmsTestchuchur测试数据?id=100"),
  });
}

给小程序发送数据

wx.miniProgram.postMessage({
  data: {
    hello: "wrold",
  },
});
//web-view 则通过 bindmessage 来监听 传过来的数据

更多方法

wx.miniProgram.navigateBack(); //返回
wx.miniProgram.switchTab(); //切换底部的导航
wx.miniProgram.reLaunch(); //重新加载
wx.miniProgram.redirectTo(); //地址重定向
wx.miniProgram.getEnv(); //获取当前环境

总结

以上是为你收集整理的浅析微信小程序和web之间的交互（代码分享）全部内容，希望文章能够帮你解决浅析微信小程序和web之间的交互（代码分享）所遇到的问题。

如果觉得网站内容还不错，推荐好友。

查看更多关于浅析微信小程序和web之间的交互（代码分享）的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did204470

更新时间：2023-04-30 阅读：36次