之前的文章《深入浅析React Native与Web的基本交互（附代码）》中，给大家了解一下React Native与Web交互。下面本篇文章给大家了解一下微信小程序和web之间的交互，有需要的朋友可以参考一下，希望对你们有帮助。
背景
通常我们写了一套自适应的web程序，想在多种环境中使用.比如app里，微信小程序里,各种app分享中，假如只是能使用app浏览，问题不大，但是要在被嵌入app里面和app本身交互，就要做各种折腾，如是就有了本文。
在ReactNative里折腾，请看这里
接入条件
首先得有开发者权限
你得有台服务器，有权限上传文件，不然验证无法通过
必须是企业小程序，个人和海外小程序无法使用web-view组件
你的相关域名配置了有效的证书，并且开启了https服务
你要访问的网址必须加入了业务域名白名单，网址所调用的api接口必须加入了服务器域名白名单，并且api接口也使用的https协议
以上条件必须同时满足，缺一不可微信JSSDK引入
微信 JSSDK 引入
外部引入
//进一步提升服务稳定性，当上述资源不可访问时，可改访问
登录后复制
使用AMD/CMD标准模块加载方法加载
安装
npm i weixin-js-sdk
登录后复制
在mian.js用使用
import wx from '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(); //获取当前环境
登录后复制
相关问题
你有没有遇到过redirectTo死都无法跳转的问题呢，你怎么改他都不执行，或者执行成功了，还是无法跳转，你甚至改为redirectTo都没有用。
因为redirectTo无法跳转到当前的page，以及在app.json下面tabBar=> list里面定义的pagePath，假如你要跳转的url刚好在pagePath里面定义过，那么请使用switchTab。
更多 API
请参见官网API的地址：
https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
请参见微信JS-SDK说明文档的地址：
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
推荐学习：H5视频教程
以上就是浅析微信小程序和web之间的交互（代码分享）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2907477.html
