2. 程式人生 > >利用H5開發微信公眾號

利用H5開發微信公眾號

阿新 • • 發佈：2017-06-09
enc 兩個 寫入 iss mps rep ast htm chang

一、 首先授權配置

 公眾號設置 --》功能設置
 設置業務域名!

技術分享
這裏的MP_verify_w7tdZrafqhkK9Mcj.txt文件，需要放到你項目的根目錄下，例子：你的項目war包叫 test.war ，裏面包含了src,WEB-INFO兩個文件夾,則把MP_verify_w7tdZrafqhkK9Mcj.txt放到這兩個文件夾的同級目錄下;即現在test.war下有兩個文件夾一個txt文件:src,WEB-INFO,MP_verify_w7tdZrafqhkK9Mcj.txt.
後面就需要配置js接口安全域名和網頁授權域名了,最好和業務域名配置為一樣就好了。
二、開發中的配置
在開發目錄下的基本配置中進行配置。
基本配置–》開發者ID–》AppID(應用ID)，AppSecret(應用密鑰);
基本配置–》微信開放平臺賬號綁定
這裏需要綁定微信開放平臺,若不綁定,在獲取用戶信息的時候就只能獲取到用戶的openId,不能獲取到unionId.
技術分享


註意：定義菜單的時候有講究了，
如果你想在用戶點這個菜單的時候就拿到用戶的微信基本信息(性別,昵稱,openId,unionId),這裏直接可以配置成為授權鏈接,授權鏈接回調url直接寫成你後臺的一個接口地址,然後由這個接口來跳轉到其它頁面.
例子：H5授權的鏈接：
http://open.weixin.qq.com/connect/oauth2/authorize?appid=xxxxxxxxx&redirect_uri=http://xxxx.com/test/login&response_type=code&scope=snsapi_userinfo&state=xxx&connect_redirect=1#wechat_redirect
微信回調的url是一個接口地址：http://xxxx.com/test/login,不能回調網頁,因為存在跨域錯誤。
state的值是可以自定義的。
這裏的scope是用的snsapi_userinfo，這樣可以直接在後臺拿到用戶信息。
微信回調這個接口的時候會把code和state的值返回,接口就可以通過code去拿用戶的信息了。
若要用code去拿用戶的信息，又會去做一堆事情，這些事情確實麻煩；推薦直接使用第三方的jar包，一步就拿到了。
推薦的jar包:weixin-Java-mp-2.5.0.jar，weixin-java-common-2.5.0.jar;
maven地址

    <dependency>
      <groupId>com.github.binarywang</groupId>
      <artifactId>weixin-java-mp</artifactId>
      <version>2.5.0</version>
    </dependency>
 在做微信支付的時候有可能會用到xstream的包，有需要也拿去
 xstream-1.4.7.jar,xxp3_min-1.1.4.jar,xmlpull-1.1.3.1.jar
 maven地址 

 
    <dependency>
        <groupId>com.thoughtworks.xstream</groupId>
        <artifactId>xstream</artifactId>
        <version>1.4.7</version>
    </dependency>
    <dependency>
        <groupId>xpp3</groupId>
        <artifactId>xpp3</artifactId>
        <version>1.1.4c</version>
    </dependency>
    <dependency>
        <groupId>xmlpull</groupId>
        <artifactId>xmlpull</artifactId>
        <version>1.1.3.1</version>
    </dependency>

這裏說下weixin-java-mp-2.5.0.jar的使用方法,
1.weixin-java-mp-2.5.0.jar裏面最重要的類是
WxMpInMemoryConfigStorage和WxMpService；
WxMpInMemoryConfigStorage是用來存微信公眾號的基本信息的，
在spring+SpringMvc中的使用方法例子：

@Configuration
@PropertySource(
        value={"classpath:wxProperties.properties"},
        ignoreResourceNotFound = true)
[email protected]("propertyPlaceholderConfigurer")
public class WeixinConfig {
    //直接獲取資源文件中的配置的值
    @Value("${wxProperties.appid}")
    private String appid;//appId

    @Value("${wxProperties.appsecret}")
    private String appsecret;//Appsecret

    @Value("${wxProperties.token}")
    private String token;//Token

    @Value("${wxProperties.aeskey}")
    private String aesKey;//aeskey，有就填，沒有就不填

    @Value("${wxProperties.partener_id}")
    private String partenerId;//商戶號

    @Value("${wxProperties.partener_key}")
    private String partenerKey;//商戶秘鑰

    @Value("${wxProperties.notify_url}")
    private String notifyUrl;//支付後臺通知接口地址

    @Bean
    public static PropertySourcesPlaceholderConfigurer propertySourcesPlaceholderConfigurer() {
       PropertySourcesPlaceholderConfigurer ppc = new PropertySourcesPlaceholderConfigurer();
       ppc.setIgnoreUnresolvablePlaceholders(true);
       return ppc;
    }

    @Bean
    public WxMpConfigStorage wxMpConfigStorage() {
        WxMpInMemoryConfigStorage configStorage = new WxMpInMemoryConfigStorage();
        configStorage.setAppId(this.appid);
        configStorage.setSecret(this.appsecret);
        configStorage.setToken(this.token);
        configStorage.setAesKey(this.aesKey);
        configStorage.setPartnerId(this.partenerId);
        configStorage.setPartnerKey(this.partenerKey);
        configStorage.setNotifyURL(this.notifyUrl);
        return configStorage;
    }

    @Bean
    public WxMpService wxMpService() {
        WxMpService wxMpService = new WxMpServiceImpl();
        wxMpService.setWxMpConfigStorage(wxMpConfigStorage());
        return wxMpService;
    }

}

這裏是配置微信公眾號的基本信息，其它地方要使用就直接使用：

    @Autowired
    protected WxMpService wxMpService;

2.獲取微信用戶基本信息示例代碼：

WxMpOAuth2AccessToken accessToken;
WxMpUser wxMpUser = null;
accessToken = this.wxMpService.oauth2getAccessToken(code);
wxMpUser = this.wxMpService.getUserService().userInfo(accessToken.getOpenId(), null);
//用戶的基本信息就在wxMpUser中了,需要的就拿去用了。（註意：微信用戶的性別：0：未知，1：男 2：女）

3.H5若要使用微信封裝好的js,則需要一些基本的配置信息，完全可以從後天臺獲取然後返回，示例代碼：

 public StatusResult<Map<String, Object>> createJsapiSignature(String url) {
        Map<String, Object> result = new HashMap<String, Object>();
        try {
            WxJsapiSignature  wxJsapiSignature = wxMpService.createJsapiSignature(url);
            String getJsapiTicket = wxMpService.getJsapiTicket();
            result.put("wxJsapiSignature", wxJsapiSignature);
            return StatusResult.success(result, "");
        } catch (WxErrorException e) {
            return StatusResult.failed("未知錯誤出現", result);
        }
    }

這裏的url是H5用js代碼獲取的：

var url = location.href.split(‘#‘)[0];

4.公眾號支付
流程：
頁面發起–>後臺下單後返回前端所需要的參數–>頁面發起支付–>用戶輸入密碼付款成功–>微信回調後臺通知接口–>業務處理完成
H5頁面發起支付：
微信公眾號的頁面支付首先要配置微信公眾號：
微信支付–>開發配置–>支付授權目錄（正式、測試的目錄必須要不一樣,否則有你好看的,）
註意：設置授權目錄的時候必須要精確到需要支付頁面的目錄文件夾；
例子：需要支付的H5頁面 http://xxxxx.com/test/html/pay/pay.html
則授權目錄配置為 http://xxxxx.com/test/html/pay/
配置完成後就可以發起下單了，
後臺下單代碼示例：

public StatusResult<Map<String, String>> getJSSDKPayInfo(HttpServletResponse response,
                                HttpServletRequest request) {
        StatusResult<Map<String, String>> result = null;
        String spbill_create_ip = request.getRemoteAddr();//訂單生成的機器 IP
        Map<String, String> map = new HashMap<String, String>();    
        WxMpConfigStorage wx= wxMpService.getWxMpConfigStorage();
        WxPayUnifiedOrderRequest prepayInfo = new WxPayUnifiedOrderRequest();
        //TODO change all request parameters to a VO class
        prepayInfo.setOpenid("openId");        
        prepayInfo.setOutTradeNo("out_trade_no");//設置訂單商戶號
        int total_fee = 0.01 * 100;
        total_fee = 1;
        prepayInfo.setTotalFee(Integer.valueOf(total_fee));//設置支付金額 單位為分 
        prepayInfo.setBody("xxxxx");//支付的內容簡介
        prepayInfo.setTradeType("JSAPI");//渠道：公眾號支付
        prepayInfo.setSpbillCreateIp(spbill_create_ip);//終端ip 
        //TODO(user) 填寫通知回調地址
        prepayInfo.setNotifyURL(wx.getNotifyURL());
        try {
            兩種下單方式,如果報錯請先仔細檢查微信配置的各種參數
            //WxPayUnifiedOrderResult  wxPayUnifiedOrderResult= wxMpService.getPayService().unifiedOrder(prepayInfo);
            Map<String, String> payInfo = this.wxMpService.getPayService().getPayInfo(prepayInfo);
            if(payInfo != null){
                //業務代碼
            }
            result = StatusResult.success(payInfo);
            return result;
        } catch (WxErrorException e) {
            log.error(e.getError().toString());
            map.put("error", e.getError().toString());
            return StatusResult.failed("微信下單失敗",map);
        }
    }

H5頁面支付js代碼(需要引入微信js哈)：

function callPay(){
            if (typeof WeixinJSBridge == "undefined"){
               if( document.addEventListener ){
                   document.addEventListener(‘WeixinJSBridgeReady‘, onBridgeReady, false);
               }else if (document.attachEvent){
                   document.attachEvent(‘WeixinJSBridgeReady‘, onBridgeReady); 
                   document.attachEvent(‘onWeixinJSBridgeReady‘, onBridgeReady);
               }
            }else{
               onBridgeReady();
            }       
        }
        function onBridgeReady(){
               WeixinJSBridge.invoke(
                   ‘getBrandWCPayRequest‘, {
                       "appId":appId,     //公眾號名稱，由商戶傳入     
                       "timeStamp":timeStamp,         //時間戳，自1970年以來的秒數     
                       "nonceStr":nonceStr, //隨機串     
                       "package":package,     
                       "signType":"MD5",         //微信簽名方式：     
                       "paySign":paySign //微信簽名 
                   },
                   function(res){     
                       if (res.err_msg == "get_brand_wcpay_request:ok") {    
                            alert("微信支付成功!");
                        } else if (res.err_msg == "get_brand_wcpay_request:cancel") {    
                            alert("用戶取消支付!");
                        } else {  
                             alert("支付失敗!");
                        }     // 使用以上方式判斷前端返回,微信團隊鄭重提示：res.err_msg將在用戶支付成功後返回    ok，但並不保證它絕對可靠。 
                   }
               ); 
        }

微信回調後臺通知接口代碼示例：

 public void getJSSDKCallbackData(HttpServletRequest request,
            HttpServletResponse response) {
        try {
            synchronized (this) {
                Map<String, String> kvm = XMLUtil.parseRequestXmlToMap(request);
                System.out.println("微信通知返回結果：\t"+kvm.toString());
                WxPayOrderQueryResult  wxPayOrderQueryResult = wxMpService.getPayService().queryOrder("", kvm.get("out_trade_no"));//用訂單號去查詢訂單狀態，冗余代碼可看可刪
//                if (this.wxMpService.getPayService().checkSign(kvm,  kvm.get("sign"))) {
                System.out.println("查詢訂單返回結果：\t"+wxPayOrderQueryResult.getTradeState());
                if ("SUCCESS".equals(wxPayOrderQueryResult.getTradeState())) {
                    if (kvm.get("result_code").equals("SUCCESS")) {
                        //TODO(user) 微信服務器通知此回調接口支付成功後，通知給業務系統做處理
                        log.info("out_trade_no: " + kvm.get("out_trade_no") + " pay SUCCESS!");
                        String out_trade_no = kvm.get("out_trade_no"); //支付訂單號，接下來寫業務代碼                       
                                }
                            }
                        } 
                        log.info("已經支付的訂單詳情\t"+aleadyPayOrder);
                        response.getWriter().write("<xml><return_code><![CDATA[SUCCESS]]></return_code><return_msg><![CDATA[ok]]></return_msg></xml>");
                    } else {
                        log.error("out_trade_no: "
                            + kvm.get("out_trade_no") + " result_code is FAIL");
                        response.getWriter().write(
                            "<xml><return_code><![CDATA[FAIL]]></return_code><return_msg><![CDATA[result_code is FAIL]]></return_msg></xml>");
                    }
                } else {
                    response.getWriter().write(
                        "<xml><return_code><![CDATA[FAIL]]></return_code><return_msg><![CDATA[check signature FAIL]]></return_msg></xml>");
                    log.error("out_trade_no: " + kvm.get("out_trade_no")
                        + " check signature FAIL");
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

到此為止公眾號支付完成。

三、微信js中接口使用
分享等很常見的，需要初始化微信的js，需要利用到上面寫的createJsapiSignature後臺接口。
公眾號的分享給朋友、朋友圈、QQ空間等方法在微信js中是可以直接調用的，分享的內容可以自己改變的，但是分享出去的按鈕只能是微信右上角的分享，開發者不能自定義分享按鈕。。。這一點讓人非常不爽。
H5頁面js的代碼示例：

引入微信的js，然後初始化，然後微信會自動執行wx.ready中的方法

wx.config({
    debug: false,   //開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。  
    appId: appId,   //必填，公眾號的唯一標識
    timestamp: timestamp,   // 必填，生成簽名的時間戳 
    nonceStr: nonceStr,   //必填，生成簽名的隨機串 
    signature: signature,   // 必填，簽名
    jsApiList: [//需要多少接口就寫多少接口
        ‘checkJsApi‘,//判斷當前客戶端是否支持指定JS接口
        ‘onMenuShareAppMessage‘//獲取“分享給朋友”按鈕點擊狀態及自定義分享內容接口
    ] //必填，需要使用的JS接口列表，所有JS接口列表 
}); 
wx.ready(function () {  
    var title = "xxxx";
    var desc = "xxxx";
    var imgUrl = "http://xxx.com/test/picture/xxxxx.png";
    wx.onMenuShareAppMessage({
        title: title, // 分享標題
        desc: desc, // 分享描述
        link: url, // 分享鏈接,h5網頁的地址或者其它
        imgUrl: imgUrl,
        trigger: function(res) {
            alert(‘用戶點擊發送給朋友‘);
        },
        success: function(res) {
            alert(‘已分享‘);
        },
        cancel: function(res) {
            alert(‘已取消‘);
        },
        fail: function(res) {
            alert(JSON.stringify(res));
        }
    });
});

調用微信js中的方法流程：
初始化config–>執行wx.ready
開發者需要更多的功能就依照葫蘆畫瓢了，或者去微信js sdk文檔去copy方法了。

讓人不愉快的事情又發生了，微信在4月29日開始限制自定義分享的鏈接啦，必須要是安全域名下的鏈接才可以分享。
詳情請看：
JSSDK自定義分享接口的策略調整
這樣導致不能直接分享自己想要的鏈接了，但是解決方法還是有的：
在你的域名下新建一個H5頁面，在這個H5頁面的js代碼中做一個跳轉就好啦（但是如果你分享出去的是支付頁面，那多半是支付不了地）！

四、處理微信直接可以分享頁面問題
有時候業務需要不能把當前的頁面分享出去，但是微信自帶的分享、復制鏈接按鈕是可以在任何頁面拿到當前頁面的地址，如果別人點擊就會進入。為了避免這個情況發生，有幾種處理方法：
1.後端足夠強大，頁面跳轉完全由後端完成，在加入了權限驗證的情況下就不怕這個的，後端會攔截請求驗證，驗證不過就跳指定的error頁面就好。
2.前端做驗證
jsp可以用session，判斷session中的一個全局參數即可。
H5可以使用cookie,在項目的開始頁寫入cookie，在js中寫一個驗證方法，每個頁面都調用這個驗證方法進行驗證，雖然有冗余代碼，但是這個是可以實現地，簡單粗暴，速度快。
設置cookie的方法：

jquery(function() {
    var expiresDate= new Date();
    expiresDate.setTime(expiresDate.getTime() + (30 * 60 * 1000));//半小時
    jquery.cookie("openId",‘${openId}‘, {
          path : ‘/‘,//cookie的作用域為根目錄，任何頁面都是有效的
          expires : expiresDate
         });//cookie裏面保存openId
});

然後在js中寫一個方法每個頁面都調用判斷。

利用H5開發微信公眾號

相關推薦

利用H5開發微信公眾號

enc 兩個 寫入 iss mps rep ast htm chang 一、 首先授權配置 公眾號設置 --》功能設置 設置業務域名! 這裏的MP_verify_w7tdZrafqhkK9Mcj.txt文件，需要放到你項目的根目錄下，例子：你的項目war包叫 tes

大四學長手把手教我們從零開始利用Python開發微信公眾號！已學會

基礎配置 微信公眾 快遞 技術分享 工作 信息 怎麽 test 實現 在一般的使用中，我們可以通過設置關鍵字實現一些基本的自動回復功能，但是這樣的關鍵字回復遠遠不能滿足我們的實際需求，比如我們要實現一個查快遞的功能，必然是要通過調用快遞接口對不同用戶的不同輸

vux+vuex+vue+Es6開發微信公眾號的坑

賦值 問題 ack 組件 公眾 rip cor es6 變量 初次開發微信公眾號遇到很多問題，可能是基礎不怎麽牢靠，最近幾天一直在看vue的東西，現在就來慢慢介紹vux和vue這個騷東西的用法： 細看文檔一步步來， npm install vux --save 安裝vux這

教你如何用node.js開發微信公眾號（一）

內容簡介 本文章簡單介紹瞭如何用node.js開發微信公眾號。主要內容包括signature的驗證，access_token的生成，微信事件的接收，還有各種api的呼叫。 準備工作 開發前需要安裝好node.js,因為我是基於express框架開發的，所以裝了express(框架按自己的需求選擇),需要

Nodejs開發微信公眾號--測試號配置篇

微信公眾號感覺入門是真的難啊，受許可權的約束，個人開發者真的挺難走的，特別像博主這種主攻前端的人。由於遲遲沒把域名備案辦下來。先從測試號入手。 申請頁面資訊 開啟測試號申請頁面，可以看到需要填寫的內容。 首先要做的就是介面配置資訊這部分內容了。 內網穿透 一般我

vue開發微信公眾號小技巧(易除錯環境)

本主要對 在開發微信公眾號時，遇到的一些問題進行總結 使用(vue)哦~ 除錯微信公眾號 大家在本地環境開發的時候，修改樣式，及除錯介面一遍又一遍的在微信開發者工具上開啟，因為在我們本地瀏覽器是打不開微信的頁面的，或者每次更改一個細節就發一遍測試環境，非常耗時影響開發，這時~~~~

開發微信公眾號小技巧(微信授權跳轉)

出發微信公眾號 先pick一個小技巧 開發過公眾號的朋友們知道流程，在使用者點選登入後，會在url上返回code...等值，這時候要取code值傳給後端同學，然後跳轉到我們的主頁面,大多數的朋友都是這種流程 window.location.href = 'url' // 但是呢，這樣會有

C# ASP.NET 解決方案開發微信公眾號

小重山 · 昨夜寒蛩不住鳴    ___ 宋 · 岳飛         昨夜寒蛩不住鳴。驚回千里夢，已三更。起來獨自繞階行。人悄悄，窗外月朧明。         白首為功名。舊山松竹

java開發微信公眾號（二）--測試號申請、微信與java程式碼初步互動

一、申請測試號 個人不能夠免費申請服務號，訂閱號有很多限制，介面許可權出來基本的幾乎沒有，如圖， 在微信公眾平臺，檢視介面許可權 那麼怎麼使用服務號的介面許可權呢？微信推出了測試號，交給大家使用，開通的步驟是： 1.在微信平臺頁面，在服務號中，點選開發者文件 2

springboot框架開發微信公眾號（四）之自定義選單的使用

關於自定義選單，微信為我們提供了幾個介面分別是建立、查詢和刪除。我們平時使用最多的就是建立選單了，往往我們執行了建立選單的程式碼後，選單並不會當即在我們關注過的公眾號上顯示出來，我們可以通過重新關注的方法，來檢視我們建立或更改後的選單。下面就來跟筆者來學一學這些介面的使用方法吧 一、由於這幾個介

springboot框架開發微信公眾號（三）之訊息的使用以文字訊息和圖文訊息為例

流程圖 程式碼實現 封裝各種訊息的屬性 響應訊息基類 package com.gzc.weixin.message.response; /** * * @Description: 響應訊息基類（公眾賬號→普通使用者） * @Parameters: * @Return: *

springboot框架開發微信公眾號（二）之訊息的接受與響應

在開發之前我們要先知道使用者傳送的資訊是先傳送到微信伺服器，微信伺服器在以xml的格式傳送給進行公眾號 開發流程圖 程式碼實現 控制層程式碼 /** * 微信核心控制器（驗證服務號是否合法，以及訊息轉發都需要通過此controller） */ package com.

springboot框架開發微信公眾號（一）之連線微信伺服器

前幾個月研究了一下用springboot開發微信公眾號，現在做一下整理總結 開發準備 1.申請微信公眾平臺測試號(測試號適用於開發階段) 2.有jdk和開發工具（這裡筆者選擇jdk1.8和STS） 流程圖 程式碼實現 1.新建springboot專案，在controller層建立一個

springmvc開發微信公眾號介面 微信公眾號測試賬號配置介面Token驗證

綜合筆者多年的微信公眾號以及微信產品開發經驗，本篇內容把微信公眾號測試賬戶的介面配置過程分享給廣大開發者朋友，開發語言是Java，採用目前流行的springmvc框架開發。 開發前必讀以及準備工作： 1、微信公眾平臺開發是指為微信公眾號進行業務開發，為移動應用、PC端網站、公眾號第

開發微信公眾號小技巧(全域性分享及單頁分享)

全域性分享 全域性分享: 在wx.ready中寫進分享,就不用一個頁面一個頁面寫了, 但是分享的各個引數都是固定的。 // config過程就不說了百度一大堆，就拿朋友圈舉例了，分享給朋友一樣 ...wx.config // 分享到朋友圈 wx.onMenuShareTi

【轉載】使用圖靈機器人介面開發微信公眾號聊天功能、設定自定義選單及申請測試賬號

<?php header("Content-type: text/html; charset=utf-8"); //以下為固定用法，實現和微信的對接、驗證 define("TOKEN", "callTuling"); $wechatObj

使用C# .net開發微信公眾號之給使用者傳送模板訊息

傳送模板訊息微信開發手冊中是這樣描述的： 傳送模板訊息 介面呼叫請求說明 http請求方式: POST https://api.weixin.qq.com/cgi-bin/message/template/send?access_token=ACCESS_TOKE

使用C# .net開發微信公眾號之建立自定義選單

自定義選單能夠幫助公眾號豐富介面，讓使用者更好更快地理解公眾號的功能。開啟自定義選單後，公眾號介面如圖所示： 請注意： 1、自定義選單最多包括3個一級選單，每個一級選單最多包含5個二級選單。 2、一級選單最多4個漢字，二級選單最多7個漢字，多出來的部分將會以“...”代替。 3、建立自定義選單後，選單

Java開發微信公眾號（二）——開發請求校驗程式

開發IDE：MyEclipse或Eclipse或IDEA都可以，我現在用的是MyEclipse。 請求校驗流程分析 上一篇中我們講了微信開發環境的搭建，下面就來寫請求校驗程式的開發，目的是是為了驗證訊息的確來自微信伺服器。 開發者提交資訊後，微信伺服器將傳送GET

Java開發微信公眾號（一）——微信開發環境搭建

1.開發語言使用Java 2.使用微信介面測試賬號進行本地測試 3.使用natapp（原ngrok）將本地地址對映到外網地址實現微信公眾號的本地除錯 準備工作 最近學習微信公眾平臺的開發，在申請一個微信公眾號的時候，發現如果不是公司或組織只能申請訂閱號（並且是個