微信小程序与oracle交互,微信小程序和web之间的交互

最新推荐文章于 2024-04-12 22:31:51 发布

weixin_39725924

最新推荐文章于 2024-04-12 22:31:51 发布

阅读量381

点赞数

文章标签：微信小程序与oracle交互

背景

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

在ReactNative里折腾,请看

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

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

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

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

你要访问的网址必须加入了业务域名白名单,网址所调用的api接口必须加入了服务器域名白名单,并且api接口也使用的https协议

以上条件必须同时满足,缺一不可

微信 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.wxmlweb-view会自动铺满整个小程序页面，个人类型与海外类型的小程序暂不支持使用。

客户端6.7.2版本开始，navigationStyle: custom对组件无效

新建/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(); //获取当前环境