微信小程序和web之间的交互
前言
通常我们写了一套自适应的web程序,想在多种环境中使用.比如app里,微信小程序里,各种app分享中,假如只是能使用app浏览,问题不大,但是要在被嵌入app里面和app本身交互,就要做各种折腾,如是就有了本文。
正文
接入条件
-
首先得有开发者权限
-
你得有台服务器,有权限上传文件,不然验证无法通过
-
必须是企业小程序,个人和海外小程序无法使用
web-view
组件 -
你的相关域名配置了有效的证书,并且开启了
https
服务 -
你要访问的网址必须加入了业务域名白名单,网址所调用的api接口必须加入了服务器域名白名单,并且
api
接口也使用的https
协议
以上条件必须同时满足,缺一不可微信JSSDK
引入
微信 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="https://www.php.cn/{{url}}" bindmessage="getMessage" />
新建/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(); //获取当前环境
相关问题
-
你有没有遇到过
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
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanfbgee
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01