微信小程序和web之间交互教程

通常我们会编写一组我们想要在各种环境中使用的自适应 Web 程序。 比如在app里，在微信小程序里，在各种app的分享中，如果只能用app浏览，问题不大，但是需要app里面使用。 嵌入到app中并与app本身交互需要各种折腾，于是有了这篇文章。

访问条件
您必须先获得开发者权限

必须有服务器并且有上传文件的权限，否则无法验证

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

您的相关域名配置了有效的证书并启用了https服务

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

上述条件必须同时具备，微信JSSDK的引入缺一不可。

微信JSSDK介绍
外部引入

//进一步提升服务稳定性，当上述资源不可访问时，可改访问

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

安装

npm i weixin-js-sdk
判断是微信小程序环境
由 userAgent 为 micromessenger，或 window.__wxjs_environment判断

从微信7.0.0开始，可以通过判断userAgent中包含miniProgram这个词来判断小程序web-view环境。

import wx from "weixin-js-sdk";
 
let OS = "PC"; //假设有多种环境
 
let ua = window.navigator.userAgent.toLowerCase();
if (
  ua.indexOf("micromessenger") >= 0 ||
  window.__wxjs_environment === "miniprogram"
) {
  //在微信或者小程序中
  wx.miniProgram.getEnv((res) => {
    if (res.miniprogram) {
      //在小程序中
      OS = "wxminiprogram";
      window.wx = wx;
    } else {
      //在微信中
      OS = "weixin";
    }
  });
}

sdk引入，环境变量已知，下面开始。

交互式示例小程序
使用小程序端的组件，新建/page/webview/index.wxml

web-view 会自动覆盖整个小程序页面。 目前不支持个人和海外小程序。 从客户端版本 6.7.2 开始，navigationStyle:custom 对组件无效

新建/page/webview/index.js

// pages/webview/index.js
const app = getApp();
Page({
  data: {
    url: "",
    shareData: {},
    postData: {},
  },
  onLoad: function (options) {
    // nickName ,token 是登录之后拿到的信息 , 用来和h5 交互
    let nickName = wx.getStorageSync("nickName");
    let token = wx.getStorageSync("token");
 
    let url = options.url;
    if (url) {
      //请注意传递url 请务必使用 decodeURIComponent 和 encodeURIComponent , 不然会白屏
      url = decodeURIComponent(url);
    }
    //因为小程序 貌似还不能主动和H5 交互,所以拿到的登录信息,我们通过url 来传递.
    let localUrl = "";
    if (token) {
      localUrl = url + "?token=" + userToken + "&nickName=" + nickName;
    }
    //犹豫地址存了token 和其他信息,分享会暴露,所以要手动重置分享地址 数据为 shareData
    this.setData({
      url: localUrl,
      shareData: {
        titil: "测试小程序",
        desc: "测试小程序藐视描述",
        path: url,
      },
    });
  },
  getMessage(e) {
    //此处接收html传递过来的参数
    this.postData = e.detail.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.navigateTo({
    url:
      "/pages/webview/index?url=" +
      decodeURIComponent("https://www.chuchur.com?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(); //获取当前环境