微信小程序中嵌套html_微信小程序中使用 web-view 内嵌 H5 时,登录问题的处理方法...
在微信小程序的开发中,经常遇到需要使用 内嵌 H5 的需求。在这种需求中比较棘手的问题应该就是登录状态的判断了,小程序中的登录状态怎样与H5中的登录状态保持一致?
一般来说,后端开发同事多数会要求我们在 H5 中的接口请求中携带 cookie,来获取用户当前的登录状态。这个该如何实现呢?
分为以下几步:
1、小程序中,封装统一的接口请求方法(以便在每个接口中都携带 cookie,放在 header 中);
const request = parameter =>{//url必填项
if (!parameter || parameter == {} || !parameter.url) {
console.log('Data request can not be executed without URL.');return false;
}else{var murl =parameter.url;var headerCookie = wx.getStorageSync('cookie');//判断是否有独自cookie请求
var selfCookie =parameter.selfCookie;
selfCookie&& (headerCookie +=selfCookie);
wx.request({
url: murl,
data: parameter.data||{},
header: {//'Content-Type': 'application/x-www-form-urlencoded',
'Cookie': headerCookie
},
method: parameter.method|| 'POST',
success:function(res) {
parameter.success&¶meter.success(res);
},
fail:function(e) {
parameter.fail&¶meter.fail(e);//console.log(e.errMsg);
wx.showToast({
title:'网络信号较差',
icon:'loading',
duration:3000});
},
complete:function() {
parameter.complete&¶meter.complete();
}
});
}
}
2、小程序中,当用户成功登录之后,保存当前cookie;
utils.request({
url: url,
data: {},
success: (res)=>{
wx.setStorageSync('cookie', res.header["Set-Cookie"]);
}
});
3、在 内嵌 H5 的页面,获取已保存的 cookie 值,使用 url 拼接的方式传给 H5 页面;
// 页面模板
//cookie 处理
let value = wx.getStorageSync('cookie'),cookie_vl;
if (value) {
cookie_vl= value.match(new RegExp("(^| )"+"jxi-m-sid"+"=([^;]*)(;|$)"))[2] ;
}
// 处理 url,拼接 cookie 值
this.setData({
url: `${this.data.url}?${cookie_vl}`
});
4、在H5中的处理方法是: 获取 cookie 值并写入。
let cookie = window.location.href.split('?')[1];
document.cookie= `jxi-m-sid=${cookie};domain=${host};path=/`;
上述代码中的 host 值得是 H5 链接中的域名。
这样处理之后,接口发送请求时会携带该 cookie,后端同事获取之后就可以判断登录状态了。
微信小程序中嵌套html_微信小程序中使用 web-view 内嵌 H5 时,登录问题的处理方法...相关推荐
- 微信小程序中嵌套html_微信小程序:web-view嵌套H5实现微信支付功能解决方案及填坑...
ab7117c7d4947210c39e126a01d23ede.jpg 最近一个多月加班比较严重,偶尔休息一天也是在补睡眠+陪家人,比较长时间没有来进行总结记录了.今天不加班,开始为这段时间做的东西 ...
- 前端企业微信开发内嵌H5记录
前端企业微信开发内嵌H5记录(Vue) 文章目录 前端企业微信开发内嵌H5记录(Vue) 一.引入相应JS-SDK 1.JS-SDK 二.授权(网页授权) 1.构造网页授权链接 2.发起授权 3.注入 ...
- 小程序嵌套h5页面_快速小程序开发之微信小程序内嵌 H5
简介:微信小程序中可以直接运行 web 页面,这一新组件 web-view 的产生,可能直接导致小程序数量迎来一波高峰.本篇博文将从业务选型,微信小程序后台配置,使用 web-view 完成登录业务以 ...
- 小程序嵌套h5页面_微信小程序内嵌h5页面
概况 使用 标签能在小程序中打开外部网页,但是要打开的网页的域名必须跟小程序的业务域名(业务域名可以在小程序的后台管理界面添加)一致,否则在真机上是打不开的.如果开发工具上勾选了'不校验域名',在开发 ...
- 实现微信小程序web-view内嵌H5中的下载功能(大文件切片下载)
实现微信小程序内嵌H5中的下载功能 一.项目场景: 难点 解决方案: 1.H5微信小程序: a.首先必不可少的是安装jweixin-module模块: b.在main.js中将依赖绑定: c.H5对应 ...
- [微信小程序]WebView内嵌H5实现本地文件上传
[官方文档] 小程序与H5如何互相跳转 小程序与H5交互以上传文件为例 微信小程序开放能力web-view使用之h5页面与小程序页面交互传值 快速小程序开发之微信小程序内嵌 H5 微信小程序web-v ...
- 微信小程序与webview H5交互(内嵌H5跳转原生页面)
在开发中,使用web-view组件内嵌H5页面是非常常见的,但很多人不知道webview内嵌H5如何与原生小程序 交互.下面介绍下实现微信小程序与webview H5交互的方法. web-view功能 ...
- 微信小程序内嵌H5网页
微信小程序内嵌网页 1.登录微信公众平台,选择对应的小程序进入(个人类型的小程序暂不支持使用) 2.在小程序后台左侧菜单选择"开发"–"开发管理"–" ...
- 微信小程序webview内嵌H5页面缓存
微信小程序webview内嵌H5页面缓存 参考链接: link. 问题描述: 公司项目已经开发了一个移动端的vue项目,以微信小程序作为一个入口,节省资源去原生开发,webview成了最好的选择.vu ...
最新文章
- 一起谈.NET技术,VS2010测试功能之旅:编码的UI测试(3)-操作对象的识别原理...
- java自定义监听器例子_Spring 实现自定义监听器案例
- CSP认证201712-1	最小差值[C++题解]:遍历
- 模块降额设计_模块电源需要注意的四个点
- Maven学习-目录结构
- C语言选择结构和循环结构的汇总
- Alibaba Nacos配置中心功能介绍与不同命名空间、分组等配置
- 暴风集团冯鑫因涉嫌犯罪被采取强制措施 蓝港互动王峰:等他出来喝酒
- ACL 2021 | PENS: 个性化新闻标题生成数据集
- 正常的vite创建项目并且安装vue router,vant的代码示例
- chmod命令使用详解
- Java Synchronized的用法
- cesium之地图显示坐标、比例尺、海拔高度效果篇
- gaster字体转换器_gautami字体
- 计算机书籍每周销量排行榜
- MATLAB 多行注释
- 清华天才王垠和阿里 P10 面试官赵海平神仙打架后,我们来说说技术面试中的该与不该!...
- Jmeter设置之ramp-up
- 2018年全国国家级自然保护区功能区划空间分布
- 关于vue项目中移动端实现用户选择照片、照片裁剪、一次上传多张图片功能。
热门文章
- 为什么猪一辈子离不开圈,狼却可以横行天下?
- 【二分匹配】 HDOJ 3118
- 爬梯:指令规则和语义
- SystemUI 解密悬浮通知上滑后不显示悬浮通知的原因
- 苹果x充电慢是什么原因_冬季冬季婴儿游泳馆水温上升慢是什么原因呢?该怎么办呢?...
- 【JAVAWeb】Tomcat
- oracle恢复主键丢失,案例:Oracle重建控制文件丢失undo异常恢复 ORA-01173模拟与恢复...
- 公司HR面试经常问的问题及回答思路
- CPA2021_会计_东奥张志凤_03_会计信息质量要求
- 事业窗CEO吴冬梅:连接业务,人力资源赋能平台助力企业人才效能提升|企服三会系列报道...