5月23日微信更新6.6.7版本,新加的文章缩小浮窗功能确实很赞。不过,有一处更新颇使H5开发者感到困扰,就是在iPhone上H5页面最底部多了一个白色的前进后退控制栏,即下图底部的那个白条
在微信里只要发生页面跳转,这个控制浏览器前进后退的白色条就会出现。如果进入H5首页每次都要微信授权来获取用户信息,那这个白条将每次都会出现,因为oauth授权一定会有跳转。第一次授权跳转是无法避免的,那么只要避免用户进行二次授权,也就避免了白条的再次出现。所以,解决问题的关键点在于如何避免微信二次授权。
实现思路是,引入cookie功能,创建一个存储访客微信用户信息的cookie。当用户首次访问时,通过oauth授权获取用户信息,并存储于cookie中。当用户再次访问时,判断是否有相应cookie来调取用户信息,这样就不会触发二次授权。
首先,定义创建和读取cookie的函数,
// 创建cookie
function setCookie(c_name, value, expiredays){
var exdate = new Date();
exdate.setDate(exdate.getDate() + expiredays);
document.cookie = c_name+ "=" + escape(value) +
((expiredays==null) ? "" : "; expires="+exdate.toGMTString());
}
// 读取cookie
function getCookie(c_name){
if(document.cookie.length > 0){
c_start = document.cookie.indexOf(c_name + "=");
if(c_start != -1){
c_start = c_start + c_name.length + 1 ;
c_end = document.cookie.indexOf(";", c_start)
if(c_end == -1){
c_end = document.cookie.length;
}
return unescape(document.cookie.substring(c_start, c_end));
}
}
return "";
}
然后,通过检查是否有用户信息cookie值,来判断是否要跳转授权,
var openid; // 用户openid
var nickname; // 用户昵称
var headimgurl; //用户头像
// 检查cookie
function checkCookie(){
userinfo = getCookie('userinfo');
if(userinfo != null && userinfo != "" && userinfo != "null,null,null"){ // 有相应cookie,读取用户信息
var strArr = userinfo.split(',');
openid = strArr[0];
nickname = strArr[1];
headimgurl = strArr[2];
}else{ // 没有相应cookie,重新授权并写入cookie
openid = getUrlParam("openid");
nickname = getUrlParam("nickname");
headimgurl = getUrlParam("headimgurl");
/*
此处为“跳转授权,获取用户信息代码”。上篇分享过,这里省略... ...
*/
var strInfo = openid + "," + nickname + "," + headimgurl;
setCookie('userinfo', strInfo, 365); // 创建cookie,cookie的名称、值以及过期天数。
}
}
在进入页面后,调用以上方法,即可解决问题。 来源:https://blog.csdn.net/gaofei880219/article/details/80569026
本篇主要讲述,如何在微信中打开自家的页面,在然后在用户分享的时候,能由我们自定义分享出去后,展示的页面卡片中的页面标题、页面描述、页面图片和分享链接。
ios因为微信内置浏览器对 history 的支持不够全面 所以对于开启了 History Mode 的 SPA 应用,只会保存第一条 url 只要每个页面都刷新一次,判断环境为iOS的微信环境时候,使用重定向跳转的方式
最近微信官方重磅推出了一个统一 Web 前端和小程序的框架 —— Kbone 。微信小程序的底层模型和 Web 端不同,开发者无法直接把 Web 端的代码挪到小程序环境内执行。
在ios微信里面打开h5页面,当遇到input输入框调出软键盘时候。用户输入完成失去焦点,键盘收回后,会发现input输入框的位置发现变化的情况。这里需要监听失焦事件
由上面效果图可以看出,是否实现了自定义分享绝对了您分享出去的推广链接的展示效果。实现自定义分享后分享给好友或者朋友圈可以实现自定义标题
开发微信H5页面的时候,在Ios微信内置浏览器中点击返回按钮返回上一页时,上一页面不会被刷新。在浏览器缓存机制中,在返回上一页的操作中, html/js/css/接口等动静态资源不会重新请求
由于项目中使用了vue,使用了gulp和普通的页面跳转。并没有引入vue-router。所以不能使用 watch监控$router。微信公众号ios点击后退按钮,优选读取缓存,所以vue里的生命周期不会在进行调用。所以项目中执行隐藏分享qq,空间。等功能不被再次执行。
微信公众平台申请一个测试公众号;配置nodeJS 使用express框架搭建服务器;使用内网穿透工具(例如:natapp)把本地服务器映射到公网上去;前端使用微信JSDK
在项目中遇到的一个神奇的 BUG,点击「返回」按钮返回到上一页,但是页面却没有刷新。这是 ios 微信的缓存机制造成的,跳转到下一页时仍然会缓存当前页。
使用微信打开网址时,对于安卓端而言无法打开常用下载软件,手机APP等。大家常用的方法是,弹出一个遮罩提示用户在新的浏览器窗口打开。 但是我们基于微信接口开发了一款全新的手机端微信中推广助手,用户在微信中点击的话
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!