在微信小程序的开发中,经常遇到需要使用 内嵌 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&&parameter.success(res);

},

fail:function(e) {

parameter.fail&&parameter.fail(e);//console.log(e.errMsg);

wx.showToast({

title:'网络信号较差',

icon:'loading',

duration:3000});

},

complete:function() {

parameter.complete&&parameter.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 时,登录问题的处理方法...相关推荐

  1. 微信小程序中嵌套html_微信小程序:web-view嵌套H5实现微信支付功能解决方案及填坑...

    ab7117c7d4947210c39e126a01d23ede.jpg 最近一个多月加班比较严重,偶尔休息一天也是在补睡眠+陪家人,比较长时间没有来进行总结记录了.今天不加班,开始为这段时间做的东西 ...

  2. 前端企业微信开发内嵌H5记录

    前端企业微信开发内嵌H5记录(Vue) 文章目录 前端企业微信开发内嵌H5记录(Vue) 一.引入相应JS-SDK 1.JS-SDK 二.授权(网页授权) 1.构造网页授权链接 2.发起授权 3.注入 ...

  3. 小程序嵌套h5页面_快速小程序开发之微信小程序内嵌 H5

    简介:微信小程序中可以直接运行 web 页面,这一新组件 web-view 的产生,可能直接导致小程序数量迎来一波高峰.本篇博文将从业务选型,微信小程序后台配置,使用 web-view 完成登录业务以 ...

  4. 小程序嵌套h5页面_微信小程序内嵌h5页面

    概况 使用 标签能在小程序中打开外部网页,但是要打开的网页的域名必须跟小程序的业务域名(业务域名可以在小程序的后台管理界面添加)一致,否则在真机上是打不开的.如果开发工具上勾选了'不校验域名',在开发 ...

  5. 实现微信小程序web-view内嵌H5中的下载功能(大文件切片下载)

    实现微信小程序内嵌H5中的下载功能 一.项目场景: 难点 解决方案: 1.H5微信小程序: a.首先必不可少的是安装jweixin-module模块: b.在main.js中将依赖绑定: c.H5对应 ...

  6. [微信小程序]WebView内嵌H5实现本地文件上传

    [官方文档] 小程序与H5如何互相跳转 小程序与H5交互以上传文件为例 微信小程序开放能力web-view使用之h5页面与小程序页面交互传值 快速小程序开发之微信小程序内嵌 H5 微信小程序web-v ...

  7. 微信小程序与webview H5交互(内嵌H5跳转原生页面)

    在开发中,使用web-view组件内嵌H5页面是非常常见的,但很多人不知道webview内嵌H5如何与原生小程序 交互.下面介绍下实现微信小程序与webview H5交互的方法. web-view功能 ...

  8. 微信小程序内嵌H5网页

    微信小程序内嵌网页 1.登录微信公众平台,选择对应的小程序进入(个人类型的小程序暂不支持使用) 2.在小程序后台左侧菜单选择"开发"–"开发管理"–" ...

  9. 微信小程序webview内嵌H5页面缓存

    微信小程序webview内嵌H5页面缓存 参考链接: link. 问题描述: 公司项目已经开发了一个移动端的vue项目,以微信小程序作为一个入口,节省资源去原生开发,webview成了最好的选择.vu ...

最新文章

  1. 一起谈.NET技术,VS2010测试功能之旅:编码的UI测试(3)-操作对象的识别原理...
  2. java自定义监听器例子_Spring 实现自定义监听器案例
  3. CSP认证201712-1 最小差值[C++题解]:遍历
  4. 模块降额设计_模块电源需要注意的四个点
  5. Maven学习-目录结构
  6. C语言选择结构和循环结构的汇总
  7. Alibaba Nacos配置中心功能介绍与不同命名空间、分组等配置
  8. 暴风集团冯鑫因涉嫌犯罪被采取强制措施 蓝港互动王峰:等他出来喝酒
  9. ACL 2021 | PENS: 个性化新闻标题生成数据集
  10. 正常的vite创建项目并且安装vue router,vant的代码示例
  11. chmod命令使用详解
  12. Java Synchronized的用法
  13. cesium之地图显示坐标、比例尺、海拔高度效果篇
  14. gaster字体转换器_gautami字体
  15. 计算机书籍每周销量排行榜
  16. MATLAB 多行注释
  17. 清华天才王垠和阿里 P10 面试官赵海平神仙打架后,我们来说说技术面试中的该与不该!...
  18. Jmeter设置之ramp-up
  19. 2018年全国国家级自然保护区功能区划空间分布
  20. 关于vue项目中移动端实现用户选择照片、照片裁剪、一次上传多张图片功能。

热门文章

  1. 为什么猪一辈子离不开圈,狼却可以横行天下?
  2. 【二分匹配】 HDOJ 3118
  3. 爬梯:指令规则和语义
  4. SystemUI 解密悬浮通知上滑后不显示悬浮通知的原因
  5. 苹果x充电慢是什么原因_冬季冬季婴儿游泳馆水温上升慢是什么原因呢?该怎么办呢?...
  6. 【JAVAWeb】Tomcat
  7. oracle恢复主键丢失,案例:Oracle重建控制文件丢失undo异常恢复 ORA-01173模拟与恢复...
  8. 公司HR面试经常问的问题及回答思路
  9. CPA2021_会计_东奥张志凤_03_会计信息质量要求
  10. 事业窗CEO吴冬梅:连接业务,人力资源赋能平台助力企业人才效能提升|企服三会系列报道...