一般咱们写了一套自适应的web程序，想在多种情况中应用.比如app里，微信小程序里,各种app分享中，倘若只是能应用app浏览，问题不年夜，然而要在被嵌入app外面以及app自身交互，就要做各种折腾，如是就有了本文。
接入条件
首先患上有开辟者权限
你患上有台效劳器，有权限上传文件，否则考证无奈通过
必须是企业小程序，集体以及海外小程序无奈应用web-view组件
你的相干域名配置了实用的证书，而且开启了https效劳
你要访问的网址必须退出了营业域名白名单，网址所调用的api接口必须退出了效劳器域名白名单，而且api接口也应用的https协定
以上条件必须同时满足，缺一不可微信JSSDK引入
微信JSSDK引入
外部引入
//进一步提拔效劳稳固性，当上述资本不可访问时，可改访问应用AMD/CMD规范模块加载方法加载
布置
npmiweixin-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 以及其余信息,分享会袒露,以是要手动重置分享所在 数据为 shareDatathis.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(); //获取以后情况
本文链接：https://addon.ciliseo.com/wei-xin-xiao-cheng-xu-he-web-zhi-jian-de-jiao-hu-fu-dai-dai-ma.html
网友评论