微信钱包入口开发笔记

简介: 原文:微信钱包入口开发笔记  之所以要写这篇文章,主要是最近一段时间在负责做微信方面的开发工作,领导对系统有两个基本的要求: 1.只能在微信环境下打开; 2.自适应微信客户端的语言设置,呈现对应语言的界面及内容; 作为一名攻城狮,经过简单的分析,可以从这两个需求中提取出两个技术点: 1.如何判定当前系统是在微信环境中运行; 2.如何获取微信客户端的语言设置信息; 如果我们能通过某种手段解决了两个技术点,也就可以大胆的向领导立军令状了。
原文: 微信钱包入口开发笔记

 

之所以要写这篇文章,主要是最近一段时间在负责做微信方面的开发工作,领导对系统有两个基本的要求

1.只能在微信环境下打开;

2.自适应微信客户端的语言设置,呈现对应语言的界面及内容;

作为一名攻城狮,经过简单的分析,可以从这两个需求中提取出两个技术点

1.如何判定当前系统是在微信环境中运行;

2.如何获取微信客户端的语言设置信息;


如果我们能通过某种手段解决了两个技术点,也就可以大胆的向领导立军令状了。

 

好了,闲话少说,我们进入正题。先说一下我们要做的这个项目是H5项目,讲到H5相信部分小伙伴已经知道怎么玩了,不过我还是继续往下说,既然是H5,那么我们首先会想到的是什么?没错,是浏览器。那么我们怎么通过抓取浏览器的信息来判定是在微信中打开的呢?我们接下来就看下如果一个页面是使用微信内置浏览器打开的会有什么特殊的标识。

微信客户端内置浏览器HTTP报文

 

普通浏览器HTTP报文

 

相信眼疾手快的小伙伴已经发现了,没错就是User-Agent,通过上面两张图我们不难发现,如果是使用微信内置浏览器打开的网页User-Agent中都会包含一个关键词MicroMessenger/6.6.6 其中6.6.6是微信客户端版本呢,我们这里用不到,我们只需要获取当前User-Agent的值并判定是否包含MicroMessenger即可判定,当前H5是否运行在微信内置浏览器中。

 

好了,解决了判定H5是否运行在微信内置浏览器的问题,接下来要做的事情就是就如何获取微信客户端的语言设置,这里可能有的小伙伴要问了,User-Agent里面有一段文案Language/en会不会就是当前微信客户端的语言设置,哈哈,我们来验证下,方法同上上,通过不断修改微信客户端的语言和抓包可以发现,User-Agent中的Language/en果然会跟着微信客户端的语言设置变化做相应的变化,换句话说我们可以通过Language/en来得到微信客户端的语言设置。

 

手痒了,下面我们来看下怎么通过代码获取到User-Agent的数据并判定是否运行在微信客户端内(获取并判定微信客户端语言设置同理),对于User-Agent的数据,可以通过前端获取也可以通过服务器端获取,我们下面分别展示下:

前端以Javascript为例:

1 function runInWeChat(){
2   var userAgent = window.navigator.userAgent.toLowerCase();
3   if(ua.match(/MicroMessenger/i)=="micromessenger") {
4     return true;
5   } else {
6     return false;
7   }
8 }

 

服务器端获取以.NET为例:

1 string micMessage = System.Web.HttpContext.Current.Request.ServerVariables["HTTP_USER_AGENT"];
2 if (micMessage.ToStringEx().ToLower().Contains("micromessenger"))
3 {
4   //当前运行在微信客户端内置浏览器中
5 }

 

写到这里,相信聪明的小伙伴也已经知道如何获取判定当前微信客户端语言设置了,祝各位好运。

目录
相关文章
|
1月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
485 7
|
1月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
540 1
|
1月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
111 7
|
1月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
192 1
|
1月前
|
小程序 前端开发 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【10月更文挑战第3天】随着移动互联网的发展,微信小程序凭借便捷的用户体验和强大的社交传播能力,成为企业拓展业务的新渠道。本文探讨了小程序全栈开发中的身份认证与授权机制,包括手机号码验证、微信登录、第三方登录及角色权限控制等方法,并强调了安全性、用户体验和合规性的重要性,帮助开发者更好地理解和应用这一关键技术。
63 5
|
1月前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【10月更文挑战第3天】微信小程序作为新兴应用形态,凭借便捷体验与社交传播能力,成为企业拓展业务的新渠道。本文探讨了微信小程序全栈开发中的PWA技术应用,包括离线访问、后台运行、桌面图标及原生体验等方面,助力开发者提升小程序性能与用户体验。PWA技术在不同平台的兼容性、性能优化及用户体验是实践中需注意的关键点。
60 5
|
1月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
547 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
27天前
|
存储 小程序 安全
微信的开发管理都需要配置什么?
【10月更文挑战第17天】微信的开发管理都需要配置什么?
30 0
|
1月前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
322 0
|
1月前
|
小程序
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
489 0