碼上快樂

相關內容    簡體    繁體

微信公眾號H5開發筆記

本文轉載自   查看原文   2020-08-06 10:32   650    微信

來源：https://blog.csdn.net/chou342175867/article/details/62429354

利用H5開發微信公眾號

一、 首先授權配置

  1.  
    公眾號設置 --》功能設置
  2.  
    設置業務域名!
  • 1
  • 2
  • 3

自定義菜單 
這里的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地址

  1.  
    <dependency>
  2.  
    <groupId>com.github.binarywang</groupId>
  3.  
    <artifactId>weixin-java-mp</artifactId>
  4.  
    <version>2.5.0</version>
  5.  
    </dependency>
  • 1
  • 2
  • 3
  • 4
  • 5
  1.  
    在做微信支付的時候有可能會用到 xstream的包，有需要也拿去
  2.  
    xstream-1.4.7.jar,xxp3_min-1.1.4.jar,xmlpull-1.1.3.1.jar
  3.  
    maven地址
  • 1
  • 2
  • 3
  • 4
  1.  
    <dependency>
  2.  
    <groupId>com.thoughtworks.xstream</groupId>
  3.  
    <artifactId>xstream</artifactId>
  4.  
    <version>1.4.7</version>
  5.  
    </dependency>
  6.  
    <dependency>
  7.  
    <groupId>xpp3</groupId>
  8.  
    <artifactId>xpp3</artifactId>
  9.  
    <version>1.1.4c</version>
  10.  
    </dependency>
  11.  
    <dependency>
  12.  
    <groupId>xmlpull</groupId>
  13.  
    <artifactId>xmlpull</artifactId>
  14.  
    <version>1.1.3.1</version>
  15.  
    </dependency>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

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

  1.  
    @Configuration
  2.  
    @PropertySource(
  3.  
    value={"classpath:wxProperties.properties"},
  4.  
    ignoreResourceNotFound = true)
  5.  
    //@DependsOn("propertyPlaceholderConfigurer")
  6.  
    public class WeixinConfig {
  7.  
    //直接獲取資源文件中的配置的值
  8.  
    @Value("${wxProperties.appid}")
  9.  
    private String appid;//appId
  10.  
     
  11.  
    @Value("${wxProperties.appsecret}")
  12.  
    private String appsecret;//Appsecret
  13.  
     
  14.  
    @Value("${wxProperties.token}")
  15.  
    private String token;//Token
  16.  
     
  17.  
    @Value("${wxProperties.aeskey}")
  18.  
    private String aesKey;//aeskey，有就填，沒有就不填
  19.  
     
  20.  
    @Value("${wxProperties.partener_id}")
  21.  
    private String partenerId;//商戶號
  22.  
     
  23.  
    @Value("${wxProperties.partener_key}")
  24.  
    private String partenerKey;//商戶秘鑰
  25.  
     
  26.  
    @Value("${wxProperties.notify_url}")
  27.  
    private String notifyUrl;//支付后台通知接口地址
  28.  
     
  29.  
    @Bean
  30.  
    public static PropertySourcesPlaceholderConfigurer propertySourcesPlaceholderConfigurer() {
  31.  
    PropertySourcesPlaceholderConfigurer ppc = new PropertySourcesPlaceholderConfigurer();
  32.  
    ppc.setIgnoreUnresolvablePlaceholders( true);
  33.  
    return ppc;
  34.  
    }
  35.  
     
  36.  
    @Bean
  37.  
    public WxMpConfigStorage wxMpConfigStorage() {
  38.  
    WxMpInMemoryConfigStorage configStorage = new WxMpInMemoryConfigStorage();
  39.  
    configStorage.setAppId( this.appid);
  40.  
    configStorage.setSecret( this.appsecret);
  41.  
    configStorage.setToken( this.token);
  42.  
    configStorage.setAesKey( this.aesKey);
  43.  
    configStorage.setPartnerId( this.partenerId);
  44.  
    configStorage.setPartnerKey( this.partenerKey);
  45.  
    configStorage.setNotifyURL( this.notifyUrl);
  46.  
    return configStorage;
  47.  
    }
  48.  
     
  49.  
    @Bean
  50.  
    public WxMpService wxMpService() {
  51.  
    WxMpService wxMpService = new WxMpServiceImpl();
  52.  
    wxMpService.setWxMpConfigStorage(wxMpConfigStorage());
  53.  
    return wxMpService;
  54.  
    }
  55.  
     
  56.  
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56

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

  1.  
    @Autowired
  2.  
    protected WxMpService wxMpService;
  • 1
  • 2

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

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

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

  1.  
    public StatusResult<Map<String, Object>> createJsapiSignature(String url) {
  2.  
    Map<String, Object> result = new HashMap<String, Object>();
  3.  
    try {
  4.  
    WxJsapiSignature wxJsapiSignature = wxMpService.createJsapiSignature(url);
  5.  
    String getJsapiTicket = wxMpService.getJsapiTicket();
  6.  
    result.put( "wxJsapiSignature", wxJsapiSignature);
  7.  
    return StatusResult.success(result, "");
  8.  
    } catch (WxErrorException e) {
  9.  
    return StatusResult.failed("未知錯誤出現", result);
  10.  
    }
  11.  
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

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

var url = location.href.split('#')[0];
  • 1

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

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

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

  1.  
    function callPay(){
  2.  
    if (typeof WeixinJSBridge == "undefined"){
  3.  
    if( document.addEventListener ){
  4.  
    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
  5.  
    } else if (document.attachEvent){
  6.  
    document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
  7.  
    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
  8.  
    }
  9.  
    } else{
  10.  
    onBridgeReady();
  11.  
    }
  12.  
    }
  13.  
    function onBridgeReady(){
  14.  
    WeixinJSBridge.invoke(
  15.  
    'getBrandWCPayRequest', {
  16.  
    "appId":appId, //公眾號名稱，由商戶傳入
  17.  
    "timeStamp":timeStamp, //時間戳，自1970年以來的秒數
  18.  
    "nonceStr":nonceStr, //隨機串
  19.  
    "package":package,
  20.  
    "signType":"MD5", //微信簽名方式：
  21.  
    "paySign":paySign //微信簽名
  22.  
    },
  23.  
    function(res){
  24.  
    if (res.err_msg == "get_brand_wcpay_request:ok") {
  25.  
    alert( "微信支付成功!");
  26.  
    } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
  27.  
    alert( "用戶取消支付!");
  28.  
    } else {
  29.  
    alert( "支付失敗!");
  30.  
    } // 使用以上方式判斷前端返回,微信團隊鄭重提示：res.err_msg將在用戶支付成功后返回 ok，但並不保證它絕對可靠。
  31.  
    }
  32.  
    );
  33.  
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33

微信回調后台通知接口代碼示例：

  1.  
    public void getJSSDKCallbackData(HttpServletRequest request,
  2.  
    HttpServletResponse response) {
  3.  
    try {
  4.  
    synchronized (this) {
  5.  
    Map <String, String> kvm = XMLUtil.parseRequestXmlToMap(request);
  6.  
    System.out.println("微信通知返回結果：\t"+kvm.toString());
  7.  
    WxPayOrderQueryResult wxPayOrderQueryResult = wxMpService.getPayService().queryOrder("", kvm.get("out_trade_no"));//用訂單號去查詢訂單狀態，冗余代碼可看可刪
  8.  
    // if (this.wxMpService.getPayService().checkSign(kvm, kvm.get("sign"))) {
  9.  
    System.out.println("查詢訂單返回結果：\t"+wxPayOrderQueryResult.getTradeState());
  10.  
    if ("SUCCESS".equals(wxPayOrderQueryResult.getTradeState())) {
  11.  
    if (kvm.get("result_code").equals("SUCCESS")) {
  12.  
    //TODO(user) 微信服務器通知此回調接口支付成功后，通知給業務系統做處理
  13.  
    log.info("out_trade_no: " + kvm.get("out_trade_no") + " pay SUCCESS!");
  14.  
    String out_trade_no = kvm.get("out_trade_no"); //支付訂單號，接下來寫業務代碼
  15.  
    }
  16.  
    }
  17.  
    }
  18.  
    log.info("已經支付的訂單詳情\t"+aleadyPayOrder);
  19.  
    response.getWriter().write(" <xml><return_code><![CDATA[SUCCESS]]></return_code><return_msg><![CDATA[ok]]></return_msg></xml>");
  20.  
    } else {
  21.  
    log.error("out_trade_no: "
  22.  
    + kvm.get("out_trade_no") + " result_code is FAIL");
  23.  
    response.getWriter().write(
  24.  
    " <xml><return_code><![CDATA[FAIL]]></return_code><return_msg><![CDATA[result_code is FAIL]]></return_msg></xml>");
  25.  
    }
  26.  
    } else {
  27.  
    response.getWriter().write(
  28.  
    " <xml><return_code><![CDATA[FAIL]]></return_code><return_msg><![CDATA[check signature FAIL]]></return_msg></xml>");
  29.  
    log.error("out_trade_no: " + kvm.get("out_trade_no")
  30.  
    + " check signature FAIL");
  31.  
    }
  32.  
    }
  33.  
    } catch (Exception e) {
  34.  
    e.printStackTrace();
  35.  
    }
  36.  
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36

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

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

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

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

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

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

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

  1.  
    jquery( function() {
  2.  
    var expiresDate= new Date();
  3.  
    expiresDate.setTime(expiresDate.getTime() + ( 30 * 60 * 1000));//半小時
  4.  
    jquery.cookie( "openId",'${openId}', {
  5.  
    path : '/',//cookie的作用域為根目錄，任何頁面都是有效的
  6.  
    expires : expiresDate
  7.  
    }); //cookie里面保存openId
  8.  
    });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

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


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 微信公眾號開發-微信公眾號網頁H5靜默授權！！！ h5開發微信公眾號重定向到關注頁面沒有關注按鈕 （微信你個坑） 【微信公眾號h5開發】回上個頁面時強制刷新頁面 微信公眾號、H5、APP三者各有什么優勢？ h5跳轉微信公眾號關注頁面 微信公眾號H5-網頁開發須知 淺析微信支付：微信支付簡單介紹（小程序、公眾號、App、H5） 微信小程序、微信公眾號、H5之間相互跳轉 java版微信公眾號支付(H5調微信內置API) 微信公眾號開發
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM