微信小程序和web之间的交互（附带代码）

此处内容已经被作者隐藏，请输入验证码查看内容

验证码：

请关注本站微信公众号，回复“验证码”，获取验证码。在微信里搜索“钞能力。你在哪？”或者“mdyc919293”或者微信扫描右侧二维码关注公众号。

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

接入条件
首先得有开发者权限

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

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

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

你要访问的网址必须加入了业务域名白名单，网址所调用的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.jsconst 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(); //获取当前环境