微信小程序web-view公众号与小程序支付的切换使用

微信小程序web-view公众号与小程序支付间的切换使用

        最近小程序开放了新功能，支持内嵌网页。html写的网页，官网，网站，运行在浏览器上的，有域名的那种，可以内嵌到小程序里了!

那么这意味着什么呢?你还需要开发独立开发官网小程序吗?之前的微信公众号功能大部分也可以直接通过小程序webview实现了。
这几天刚好公司也有这方面的需求，怀着激动心情的我开始了踩坑之旅。

     开发之前我们需要把需要的环境配置好，这里就引用官方的介绍了————

1. 开发者登录小程序后台，选择设置-开发设置-业务域名，新增配置域名模块。目前小程序内嵌网页能力暂不开放给个人类型帐号和海外类型帐号。
2.配置的业务域名必须时https

那么配置好后，马上可以进入开发啦！

  页面中引入公众号的首页，小程序端的代码不是很多，主要的是后台进行结合。1.在后端添加一个小程序的入口方法，

/*** 小程序第一次入口* @return*/
public String wxIndex(){//返回首页sessions=request.getSession().getId();return "home";
}

这里我没有做任何的处理，这个项目首页是不用登陆的，直接返回首页；来到这一步时我们发现之前公众号后台保存在session中的信息获取不到，使用后发现小程序每次请求sessionId都会发生改变，这样后台无法使用session储存数据。

解决方案：

小程序第一次请求后台返回一个sessionId,之后小程序在参数或header中带入这个sessionId,后台使用这个session来处理。注意session销毁以及过期设置。

wx.login({success: function (res) {        wx.getSetting({success(setRes) {// 判断是否已授权  if (!setRes.authSetting['scope.userInfo']) {// 授权访问  wx.authorize({scope: 'scope.userInfo',success() {//获取用户信息  wx.getUserInfo({lang: "zh_CN",success: function (userRes) {// var session_id= wx.getStorageSync('JSESSIONID');//发起网络请求  wx.request({url: 'https://www.ulin5.com/vip/buser-bind-mobile_wxXiaoChengXuLogin.html',data: {code: res.code,encryptedData: userRes.encryptedData,iv: userRes.iv},header: {"Content-Type": "application/x-www-form-urlencoded"},method: 'POST',//服务端的回掉  success: function (result) {console.log(result)// var session_id = wx.getStorageSync('JSESSIONID');//本地取存储的sessionID  // if (session_id == null || session_id == "") {wx.setStorageSync('JSESSIONID', result.data.sessionId) //如果本地没有就说明第一次请求 把返回的session id 存入本地  // }console.log(result.data.openId)getApp().openid = result.data.openId// var data = result.data.result;// data.expireTime = nowDate + EXPIRETIME;// wx.setStorageSync("userInfo", data);// userInfo = data;}})}})}})})

 把小程序所需要的openid和unionid拿到，由于公众号的openid   和小程序的openid不同，所以这需要用到unionid。
换句话说，同一用户，对同一个微信开放平台帐号下的不同应用，UnionID是相同的。
此前的OpenID机制，每个微信号对应每个公众号只有唯一的OpenID，所以不同微信公众号之间是不能共享用户的，现在有了UnionID就可以了。前面说到小程序每次请求的sessionId不同，所以通过sessionId可以获取到我们存储的数据信息。注意Servlet2.1之后不支持SessionContext里面getSession(String id)方法。我这里通过HttpSessionListener监听器和全局静态map自己实现一个SessionContext。

public class MySessionContext {private static HashMap mymap = new HashMap();public static synchronized void AddSession(HttpSession session) {if (session != null) {mymap.put(session.getId(), session);}}public static synchronized void DelSession(HttpSession session) {if (session != null) {mymap.remove(session.getId());}}public static synchronized HttpSession getSession(String session_id) {if (session_id == null)return null;return (HttpSession) mymap.get(session_id);}}

        public class SessionListener implements HttpSessionListener {
/*public static Map userMap = new HashMap();  */
/*private   MySessionContext myc=MySessionContext.getInstance();  */@Override
public void sessionCreated(HttpSessionEvent arg0) {/*myc.AddSession(arg0.getSession()); */MySessionContext.AddSession(arg0.getSession());
}@Override
public void sessionDestroyed(HttpSessionEvent arg0) {HttpSession session = arg0.getSession();  /*myc.DelSession(session);*/MySessionContext.DelSession(session);
}}

web.xml添加一个监听器：

<listener>
<listenerclass>com.common.util.SessionListener</istener-class>
</listener>

根据sessionId获取Session对象：

String sessionId = request.getParameter("sessionId");

HttpSession session = MySessionContext.getSession(sessionId);

写到这里已经算是完成一半了，只要在后台加一个处理小程序进来的方法，把所需要的用户信息保存到数据库中。
我们不需要改变以前写好处理公众号的任何代码（根据项目进行整合），

public String wxLogin(){//java后端
String Code = request.getParameter("code");// 登陆状态码String typeDate = request.getParameter("encryptedData");// 用户加密信息,用于解密获取unionidString iv = request.getParameter("iv");// 解密密钥String OPENID_URL = "https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret"+ "=SECRET&js_code=JSCODE&grant_type=authorization_code";// 获取openid的地址UserInfo userInfo = null;String url = OPENID_URL.replace("APPID", Pkcs7Encoder.APPID).replace("SECRET", Pkcs7Encoder.APPSECRET).replace("JSCODE", Code);JSONObject jsonObject = null;jsonObject = Pkcs7Encoder.doGetStr(url);// 调取Get提交方法String OpenId = jsonObject.getString("openid"); // 获取openid/** ResourceBundle resource = ResourceBundle.getBundle("weixin");* //读取属性文件*/String requestUrl = "https://api.weixin.qq.com/sns/jscode2session"; // 请求地址/* String wxUserInfo=Pkcs7Encoder.sendPost(requestUrl, requestUrlParam); */// 获取会话密钥（session_key）String session_key = jsonObject.getString("session_key");   ....     //通过逻辑代码保存我们需要的信息
}

  接下来到最重要的环节了，到了我们最期待的支付环节了。由于web-view目前还不支持支付接口。我们需要判断是否运行在小程序环境中进行支付的互换，从而实现支付功能。

<script type="text/javascript"src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>

在网页内可通过window.__wxjs_environment变量判断是否在小程序环境。

// web-view下的页面内 wx.ready(function() { console.log(window.__wxjs_environment === 'miniprogram') // true })

例如：

  var isWxMini = window.__wxjs_environment ===       'miniprogram';if (isWxMini) {//判断是否在微信小程序环境中调用支付接口$("#wxloading").hide();var jumpUrl = encodeURIComponent(window.location)//把要用到的参数传到小程序中进行支付var path = '/pages/pay/pay?jhNum='+jhNum+'&cproType='+cproType+'&zcProId='+zcProId+'&url='+url+'&cproId='+cproId+'&esOrderc='+esOrderc;wx.miniProgram.navigateTo({url: path})}else{//公众号支付
window.location.href="/vip/buy-group_saveJoinPt.html?cproId="+cproId+"&jhNum="+jhNum+"&cproType="+cproType+"&zcProId="+zcProId+"&esOrderc="+esOrderc;
}

小程序pay文件夹下新建pay.js和pay.wxml

 pay.jsPage({onLoad: function (options) {console.log(options)// 获取网页传过来的值// TODO 用es6解构来获取值TODO
var jhNum = options.jhNum
var cproType = options.cproType
var zcProId = options.zcProId
var cproId = options.cproId
var esOrderc = options.esOrderc
// var jumpUrl = decodeURIComponent(options.jumpUrl)
var tourl=options.url
// console.log(tourl)
var openid = getApp().openid
console.log(openid)
var session_id = wx.getStorageSync('JSESSIONID')//本地取存储的sessionID
// console.log('----------sessionid' + session_id+'-----------------')
wx.request({url: tourl,data: {openid: openid,jhNum: jhNum,cproType: cproType,zcProId: zcProId,cproId: cproId,esOrderc: esOrderc},header: {"Content-Type": "application/x-www-form-urlencoded",'Cookie': 'JSESSIONID=' + session_id},method: 'POST',success: function (res){console.log(res)wx.requestPayment({'timeStamp': res.data.timeStamp,'nonceStr': res.data.nonceStr,'package': res.data.package,'signType': 'MD5','paySign': res.data.sign,'success': function (res) {console.log('支付成功')wx.navigateBack() //返回会上个页面},'fail': function (res) {console.log('支付失败')wx.navigateBack() //返回会上个页面}})}
})
}
})

到这基本上已经完成，个人感觉这种实现方式在用户体验度上并不是很友好，但是基本的功能都可以实现。
相信官方也会对webview更进一步的优化。能在webview中直接调用支付的接口。
如果大家有更好的实现思路，千万别忘了告诉我哦。
由于作者还是个工作不到一年的小菜。在代码编写上还有很多的不足，欢迎大家指正。
这也是我的第一篇博客，嗯嗯嗯还是有点小激动。^_^

微信小程序web-view公众号与小程序支付的切换使用相关推荐

限时团购，6.9折：《微信开发深度解析：公众号、小程序高效开发秘籍》推荐序
全书由目 Senparc.Weixin SDK 作者苏震巍历时 2 年完成,涵盖了开发微信公众号及小程序需要用的的各项后端开发技能.技巧.避坑提示,以及 Senparc.Weixin SDK 微信公众 ...
微信（jspai版本即公众号h5版）支付-微信下单支付及企业转账到零钱
微信(jspai版本即公众号h5版)支付-微信下单支付及企业转账到零钱一.后端前置条件二.配置h5 devServer 三.后端开发代码四.前端开发代码(uniapp) 一.后端前置条件准备好 ...
小程序跳转小程序，小程序跳转公众号，小程序跳转h5
1:小程序跳转小程序 uni.navigateToMiniProgram({appId:'wx11111111111111111111' ,//小程序appidpath:'pages/phone/in ...
axure小程序模板_公众号和小程序模板消息
前言今天和大家简单聊聊微信公众号和微信小程序的模板消息机制,大家在做微信小程序或者微信公众号消息通知的时候可以参考. 微信小程序订阅消息推送位置:服务通知跳转能力:可以跳转到小程序页面解释: ...
运势运程星座运势算命程序源码公众号版小程序源码
功能模块: 1.首页Banner 轮播图 2.九宫格功能(星座卡片.星座档案.单向历.姓名解析) 3.星座运势 4.测算专区(20多种测算栏目) 5.测算栏目支持自定义热门测算 6.支持关注公众号组件 ...
WeiPHP5.0，公众号与小程序结合的最佳开发框架
WeiPHP5.0,公众号与小程序结合的最佳开发框架介绍 WeiPHP5.0是一个开源,高效,简洁的移动应用系统,它实现一个后台同时管理和运营多个客户端(公众号,微信小程序,后续将支持支付宝小程序, ...
公众号和小程序用户关联
很多人都觉得小程序用起来比较方便,并且小程序项目的运行速度要比嵌在公众号中的项目运行速度更快,刚好大家有这个需求,微信也有这个解决办法,大家都知道不管小程序还是公众号用户都有自己的唯一标识,那就是op ...
小程序webview关注公众号_公众号与小程序有什么区别
自从2017年1月,腾出推出小程序以来,不少企业.商家都纷纷开发了属于自己的小程序.而这些企业之前往往已经拥有属于自己微信公众号,但为什么又要开发小程序呢?公众号与小程序有什么区别?下面不妨跟着上海黄 ...
微信小程序如何跳转到微信公众号文章，小程序如何关联公众号或订阅号
微信小程序如何跳转到微信公众号文章,小程序如何关联公众号或订阅号前置条件公众号最高管理权限(或能与最高权限管理者配合操作) 小程序开发权限或最高管理权限小程序方面根据官方资料描述,小程序中展示 ...
微信小程序跳转公众号
长按识别跳转步骤: 新建一个页面使用web-view组件的src链接到公众号编辑好的一篇带有公众号的二维码的文章微信规则只有小程序关联的公众号里的文章可以长按识别二维码 <template& ...

微信小程序web-view公众号与小程序支付的切换使用

微信小程序web-view公众号与小程序支付间的切换使用

微信小程序web-view公众号与小程序支付的切换使用相关推荐

最新文章

热门文章