微信小程式web-view公眾號與小程式支付間的切換使用

        最近小程式開放了新功能，支援內嵌網頁。html寫的網頁，官網，網站，執行在瀏覽器上的，有域名的那種，可以內嵌到小程式裡了!

那麼這意味著什麼呢?你還需要開發獨立開發官網小程式嗎?之前的微信公眾號功能大部分也可以直接通過小程式webview實現了。
這幾天剛好公司也有這方面的需求，懷著激動心情的我開始了踩坑之旅。

     開發之前我們需要把需要的環境配置好，這裡就引用官方的介紹了————

1. 開發者登入小程式後臺，選擇設定-開發設定-業務域名，新增配置域名模組。目前小程式內嵌網頁能力暫不開放給個人型別帳號和海外型別帳號。
2.配置的業務域名必須時https

那麼配置好後，馬上可以進入開發啦！

  頁面中引入公眾號的首頁，小程式端的程式碼不是很多，主要的是後臺進行結合。

1.在後端新增一個小程式的入口方法，

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

這裡我沒有做任何的處理，這個專案首頁是不用登陸的，直接返回首頁；來到這一步時我們發現之前公眾號後臺儲存在session中的資訊獲取不到，使用後發現小程式每次請求sessionId

解決方案：

小程式第一次請求後臺返回一個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");// 使用者加密資訊,用於解密獲取unionid
    String 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.js
          Page({
  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中直接呼叫支付的介面。
如果大家有更好的實現思路，千萬別忘了告訴我哦。
由於作者還是個工作不到一年的小菜。在程式碼編寫上還有很多的不足，歡迎大家指正。
這也是我的第一篇部落格，嗯嗯嗯還是有點小激動。^_^