这篇文章主要介绍微信小程序和web之间如何实现交互,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
首先得有开发者权限
你得有台服务器,有权限上传文件,不然验证无法通过
必须是企业小程序,个人和海外小程序无法使用web-view
组件
你的相关域名配置了有效的证书,并且开启了https
服务
你要访问的网址必须加入了业务域名白名单,网址所调用的api接口必须加入了服务器域名白名单,并且api
接口也使用的https
协议
以上条件必须同时满足,缺一不可微信JSSDK
引入
外部引入
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script> //进一步提升服务稳定性,当上述资源不可访问时,可改访问 <script type="text/javascript" src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js "></script>
使用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对组件无效
<!-- 通过src 来传递当前url, 通过bindmessage 来监听html的传值 --> <web-view src="{{url}}" bindmessage="getMessage" />
新建/page/webview/index.js
// pages/webview/index.js const app = getApp(); Page({ data: { url: "", shareData: {}, postData: {}, }, onLoad: function (options) { // nickName ,token 是登录之后拿到的信息 , 用来和h6 交互 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是在小程序中,可以通过微信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(); //获取当前环境
以上是“微信小程序和web之间如何实现交互”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。