SpringBoot接入微信JSSDK,看這篇妥妥的！

雖然我很菜鳥，但我還想分享
有需要csdn積分下載需求的同學,評論關注回覆我咋都可以，免費給大家下載⚽
我堅信愛分享的人運氣一定不差，進步很快樂，分享更快樂😬

GitHub

先給猴急的客官上乾貨代碼，接入微信JSSDK GitHub地址

前言

事情的起因是因爲疫情嚴重，領導要求做一個專題頁，能夠儘可能幫助所需要的人。
於是乎本狗與同事挑燈奮戰，加班加點趕工出來。
部署上線完成，用微信內置瀏覽器分享後，理想狀態應該是這樣的，如下圖⬇️

但是，結果卻不是理想的這樣，默默地留下了沒有技術的淚水，如下圖⬇️

竟然沒有關鍵字和展示圖片，在本菜狗的不懈努力下，終於承認技術不行，去請教了大佬，得出如下結論。

• 1.微信內置瀏覽器分享若需要自定義展示描述及右側封面圖，必須接入微信JSSDK,並且一定需要有配合本站的微信公衆號（appId和appSecret）纔可自定義分享，切記小程序（appId和appSecret）的不可以
• 2.非微信分享，如QQ瀏覽器，UC瀏覽器等各大廠商，會根據自身定義獲取HTML頁面中的TDK(title，description，keyword)，舉例UC瀏覽器分享⬇️
  
  
  所以，對接微信JSSDK,勢在必行！

---

Tip

史上最詳細的接入微信JSSDK菜鳥教程，本文全面的記錄了接入微信JSSDK的步驟，具體的代碼及遇到的坑，並且展示發佈最終效果,並將代碼發佈GitHub。隨篇幅較長，但史上最全。大佬勿噴，新手入門，親測可用！！！

本文試用人羣

• 需要接入微信JSSDK卻看不懂文檔的同學
• 看懂文檔但是實操不知如何下手的同學
• 下了手但是出錯不知道如何調試修改的同學
• 成功接入過但是想重溫具體流程的同學

本文目標

• 實戰進行H5網站微信自定義分享
• 實戰進行H5網站調取相冊選取圖片

放鬆心態，慢慢來看

---

正文

官方文檔

任何平臺接入，官方文檔是標杆，雖有些關鍵點一筆帶過，我們也要通讀有個印象，點擊微信官方文檔打開文檔，如下⬇️

總覽

• 1.x是接入關鍵步驟，需仔細品讀，與接入有關
• 2.x - 12.x 具體接口接入，需要對接時具體參考
• 13.x 需要注意下，api_ticket 微信臨時票據，與接入有關
• 16-22 均是附錄，可查閱錯誤列表對應含義，及接口菜單列表等描述

---

實操步驟

使用IDEA工具，新建SpringBoot項目，項目名爲springboot-wexin，目錄結構如下

AjaxJson.java - 自定義接口返回前臺數據格式的封裝類

/**
 * Copyright &copy; 2005-2020 <a href="http://www.jhmis.com/">jhmis</a> All rights reserved.
 */
package net.javadog.springbootwexin.common;

import com.fasterxml.jackson.annotation.JsonIgnore;

import java.util.LinkedHashMap;
import java.util.List;


/**
 * $.ajax後需要接受的JSON
 *
 */
public class AjaxJson {

	private boolean success = true;// 是否成功
	private String errorCode = "-1";//錯誤代碼
	private String msg = "操作成功";// 提示信息
    private Long count;             //返回表格記錄數量
    private List<?> data;           //返回表格數據
	private LinkedHashMap<String, Object> body = new LinkedHashMap<String, Object>();//封裝json的map

	public static AjaxJson ok(){
		AjaxJson j = new AjaxJson();
		return j;
	}

	public static AjaxJson ok(String msg){
		AjaxJson j = new AjaxJson();
		j.setMsg(msg);
		return j;
	}

	public static AjaxJson ok(String msg, Object object){
		AjaxJson j = new AjaxJson();
		j.setMsg(msg);
		j.setResult(object);
		return j;
	}

	public static AjaxJson ok(Object object){
		AjaxJson j = new AjaxJson();
		j.setResult(object);
		return j;
	}

	public static AjaxJson fail(String errorMsg){
		AjaxJson j = new AjaxJson();
		j.setSuccess(false);
		j.setErrorCode("999");//默認錯誤碼
		j.setMsg(errorMsg);
		return j;
	}

	public static AjaxJson fail(String errorCode,String errorMsg){
		AjaxJson j = new AjaxJson();
		j.setSuccess(false);
		j.setErrorCode(errorCode);
		j.setMsg(errorMsg);
		return j;
	}
	//返回不分頁的layui表數據
    public static AjaxJson layuiTable(List<?> list){
        AjaxJson j = new AjaxJson();
        j.setSuccess(true);
        j.setCount(Long.valueOf(list.size()));
        j.setData(list);
        return j;
    }
	public LinkedHashMap<String, Object> getBody() {
		return body;
	}

	public void setBody(LinkedHashMap<String, Object> body) {
		this.body = body;
	}

	public void put(String key, Object value){//向json中添加屬性，在js中訪問，請調用data.map.key
		body.put(key, value);
	}
	
	public void remove(String key){
		body.remove(key);
	}

	/**
	 * 直接設置result內容
	 * @param result
	 */
	public void setResult(Object result){
		body.put("result", result);
	}
	@JsonIgnore//返回對象時忽略此屬性
	public Object getResult(){
		return body.get("result");
	}

	public String getMsg() {
		return msg;
	}

	public void setMsg(String msg) {//向json中添加屬性，在js中訪問，請調用data.msg
		this.msg = msg;
	}


	public boolean isSuccess() {
		return success;
	}

	public void setSuccess(boolean success) {
		this.success = success;
	}
	

	public void setErrorCode(String errorCode) {
		this.errorCode = errorCode;
	}

	public String getErrorCode() {
		return errorCode;
	}

    public Long getCount() {
        return count;
    }

    public void setCount(Long count) {
        this.count = count;
    }

    public List<?> getData() {
        return data;
    }

    public void setData(List<?> data) {
        this.data = data;
    }
}

---

WxInitController.java - 微信初始化接入Controller控制器

package net.javadog.springbootwexin.controller;
import net.javadog.springbootwexin.common.AjaxJson;
import net.javadog.springbootwexin.service.WxService;
import net.javadog.springbootwexin.utils.WxUtil;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import java.util.Map;

/**
 * 一個低端小氣沒檔次的程序狗 JavaDog
 * blog.javadog.net
 *
 * @BelongsProject: springboot-wexin
 * @BelongsPackage: net.javadog.springbootwexin.controller
 * @Author: hdx
 * @CreateTime: 2020-02-14 14:52
 * @Description: 微信初始化接入Controller控制器
 */
@RestController
@RequestMapping("/weixin")
public class WxInitController {
    protected Logger logger = LoggerFactory.getLogger(getClass());

    @Autowired
    private WxService wxService;

    /**
    *@Author: hdx
    *@CreateTime: 20:39 2020/2/14
    *@param:  shareUrl 分享url地址
    *@Description: 初始化微信JSSDK Config信息
     1.先通過appId和appSecret參數請求指定微信地址 獲取AccessToken
     2.在通過第一步中的AccessToken作爲參數請求微信地址 獲取jsapi_ticket臨時票據(此處不考慮調用頻率，使用者根據情況放入緩存或定時任務)
     3.通過第二步的JssdkGetticket和timestamp,nonceStr,url作爲參數請求微信地址，獲取簽名signature
     4.將第三步獲得的signature和jsapi_ticket,nonceStr,timestamp,url返回給前端，作爲Config初始化驗證的信息
    */
    @RequestMapping("/initWXJSSDKConfigInfo")
    public AjaxJson initWXJSConfig (@RequestParam(required = false) String url) throws Exception{
        logger.info("url=" + url);
        String json = "";
        try {
            Map map = wxService.initJSSDKConfig(url);
            json = WxUtil.mapToJson(map);
        }catch (Exception e){
            AjaxJson.fail(e.getMessage());
        }
        return AjaxJson.ok(json);
    }

}

---

WxService.java - 初始化JSSDKConfig

package net.javadog.springbootwexin.service;

import lombok.Getter;
import net.javadog.springbootwexin.utils.WxUtil;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;

/**
 * 一個低端小氣沒檔次的程序狗 JavaDog
 * blog.javadog.net
 *
 * @BelongsProject: springboot-wexin
 * @BelongsPackage: net.javadog.springbootwexin.service
 * @Author: hdx
 * @CreateTime: 2020-02-14 20:43
 * @Description: 微信相關service
 */
@Service
public class WxService {
    @Getter
    private static String AppId;
    @Value("${wx.appId}")
    public void setAppId(String appId) {
        AppId = appId;
    }
    /**
    *@Author: hdx
    *@CreateTime: 20:46 2020/2/14
    *@param:  shareUrl 分享的url
    *@Description: 初始化JSSDKConfig
    */
    public Map initJSSDKConfig(String url) throws Exception {
        //獲取AccessToken
        String accessToken = WxUtil.getJSSDKAccessToken();
        //獲取JssdkGetticket
        String jsapiTicket = WxUtil.getJssdkGetticket(accessToken);
        String timestamp = Long.toString(System.currentTimeMillis() / 1000);
        String nonceStr = UUID.randomUUID().toString();
        String signature = WxUtil.buildJSSDKSignature(jsapiTicket,timestamp,nonceStr,url);
        Map<String,String> map = new HashMap<String,String>();
        map.put("url", url);
        map.put("jsapi_ticket", jsapiTicket);
        map.put("nonceStr", nonceStr);
        map.put("timestamp", timestamp);
        map.put("signature", signature);
        map.put("appid", AppId);
        return map;
    }
}

---

WxUtil.java - 微信工具類

package net.javadog.springbootwexin.utils;

import com.google.gson.Gson;
import com.google.gson.reflect.TypeToken;
import lombok.Getter;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Component;
import org.springframework.web.client.RestTemplate;
import java.security.MessageDigest;
import java.util.Map;

/**
 * 一個低端小氣沒檔次的程序狗 JavaDog
 * blog.javadog.net
 *
 * @BelongsProject: springboot-wexin
 * @BelongsPackage: net.javadog.springbootwexin.utils
 * @Author: hdx
 * @CreateTime: 2020-02-14 21:19
 * @Description: 微信工具類
 */
@Component
public class WxUtil {
    @Getter
    protected static String AppId;
    @Getter
    protected static String AppSecret;
    @Getter
    protected static String JssdkAccesstokenUrl;
    @Getter
    protected static String JssdkGetticketUrl;

    @Value("${wx.appId}")
    public void setAppId(String appId) {
        AppId = appId;
    }

    @Value("${wx.appSecret}")
    public void setAppSecret(String appSecret) {
        AppSecret = appSecret;
    }

    @Value("${wx.jssdk_accesstoken_url}")
    public void setJssdkAccesstokenUrl(String jssdkAccesstokenUrl) {
        JssdkAccesstokenUrl = jssdkAccesstokenUrl;
    }

    @Value("${wx.jssdk_getticket_url}")
    public void setJssdkGetticketUrl(String jssdkGetticketUrl) {
        JssdkGetticketUrl = jssdkGetticketUrl;
    }

    /**
    *@Author: hdx
    *@CreateTime: 21:31 2020/2/14
    *@param:  * @param null
    *@Description:
    
    */
    public static String getJSSDKAccessToken() {
        String token = null;
        String url = JssdkAccesstokenUrl.replaceAll("APPID",
                AppId).replaceAll("APPSECRET",
                AppSecret);
        String json = postRequestForWeiXinService(url);
        Map map = jsonToMap(json);
        if (map != null) {
            token = (String) map.get("access_token");
        }
        return token;
    }

    /**
    *@Author: hdx
    *@CreateTime: 21:40 2020/2/14
    *@param:  * @param null
    *@Description: 根據accessToken獲取JssdkGetticket

    */
    public static String getJssdkGetticket(String accessToken) {
        String url = JssdkGetticketUrl.replaceAll("ACCESS_TOKEN", accessToken);
        String json = postRequestForWeiXinService(url);
        Map map = jsonToMap(json);
        String jsapi_ticket = null;
        if (map != null) {
            jsapi_ticket = (String) map.get("ticket");
        }
        return jsapi_ticket;
    }

    /**
    *@Author: hdx
    *@CreateTime: 21:41 2020/2/14
    *@param:ticket 根據accessToken生成的JssdkGetticket
    *@param:timestamp 支付簽名時間戳，注意微信jssdk中的所有使用timestamp字段均爲小寫。但最新版的支付後臺生成簽名使用的timeStamp字段名需大寫其中的S字符
    *@param:nonceStr 隨機字符串
    *@param:url 當前網頁的URL
    *@Description: 構建分享鏈接的簽名

    */
    public static String buildJSSDKSignature(String ticket,String timestamp,String nonceStr ,String url) throws Exception {
        String orderedString = "jsapi_ticket=" + ticket
                + "&noncestr=" + nonceStr + "&timestamp=" + timestamp
                + "&url=" + url;

        return sha1(orderedString);
    }

    /**
     * sha1 加密JSSDK微信配置參數獲取簽名。
     *
     * @return
     */
    public static String sha1(String orderedString) throws Exception {
        String ciphertext = null;
        MessageDigest md = MessageDigest.getInstance("SHA-1");
        byte[] digest = md.digest(orderedString.getBytes());
        ciphertext = byteToStr(digest);
        return ciphertext.toLowerCase();
    }
    /**
     * 將字節數組轉換爲十六進制字符串
     *
     * @param byteArray
     * @return
     */
    private static String byteToStr(byte[] byteArray) {
        String strDigest = "";
        for (int i = 0; i < byteArray.length; i++) {
            strDigest += byteToHexStr(byteArray[i]);
        }
        return strDigest;
    }
    /**
     * 將字節轉換爲十六進制字符串
     *
     * @param mByte
     * @return
     */
    private static String byteToHexStr(byte mByte) {
        char[] Digit = { '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F' };
        char[] tempArr = new char[2];
        tempArr[0] = Digit[(mByte >>> 4) & 0X0F];
        tempArr[1] = Digit[mByte & 0X0F];

        String s = new String(tempArr);
        return s;
    }
    /**
    *@Author: hdx
    *@CreateTime: 21:49 2020/2/14
    *@param:  map
    *@Description:  mapToJson

    */
    public static String mapToJson(Map map){
        Gson gson = new Gson();
        String json = gson.toJson(map);
        return json;
    }

    /**
    *@Author: hdx
    *@CreateTime: 21:37 2020/2/14
    *@param:  json
    *@Description: jsonToMap

    */
    private static Map jsonToMap(String json) {
        Gson gons = new Gson();
        Map map = gons.fromJson(json, new TypeToken<Map>(){}.getType());
        return map;
    }

    /**
    *@Author: hdx
    *@CreateTime: 21:36 2020/2/14
    *@param:  * @param null
    *@Description: 調取微信接口

    */
    private static String postRequestForWeiXinService(String getAccessTokenUrl) {
        RestTemplate restTemplate = new RestTemplate();
        ResponseEntity<String> postForEntity = restTemplate.postForEntity(getAccessTokenUrl, null, String.class);
        String json = postForEntity.getBody();
        return json;
    }

}

---

SpringbootWexinApplication.java - SpringBoot啓動類

package net.javadog.springbootwexin;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class SpringbootWexinApplication {

    public static void main(String[] args) {
        SpringApplication.run(SpringbootWexinApplication.class, args);
    }

}

---

config/application.yml - 基礎配置文件

spring:
  profiles:
    #激活配置文件
    active: prod
  #配置靜態資源路徑
  resources:
    static-locations: classpath:/static/

#日誌相關
logging:
  #配置文件日誌路徑
  config: classpath:logback-spring.xml

#微信相關配置
wx:
  #appId （到時候換成自己公衆號的）
  appId: wx4ad618620f8c3528
  #appSecret（到時候換成自己公衆號的）
  appSecret: b772c7863b29e270aa86e40f9b9e6215
  #參考以下文檔獲取access_token（有效期7200秒，開發者必須在自己的服務全局緩存access_token）
  jssdk_accesstoken_url: https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
  #用第一步拿到的access_token 採用http GET方式請求獲得jsapi_ticket（有效期7200秒，開發者必須在自己的服務全局緩存jsapi_ticket）
  jssdk_getticket_url: https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

application-dev.yml -開發配置文件（可選）

# 開發環境配置
spring:
  profiles: dev

#端口設置
server:
  port: 8000

application-prod.yml -生產配置文件（因JS接口安全域名限制，則採取正式生產配置）

# 生產環境配置
spring:
  profiles: prod

#端口設置
server:
  port: 8002

application-test.yml -測試配置文件（可選）

# 生產環境配置
spring:
  profiles: prod

#端口設置
server:
  port: 8002

---

**demo.html ** - 測試h5頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>測試jssdk</title>
    <!--引入微信JS文件-->
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>
    <!--引入jquery-->
    <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script>
    //獲取當前頁面地址
    var url = (window.location.href).split('#')[0];
    //調取後臺接口獲取權限驗證配置
    $.ajax({
        type : "get",
        /*！！！切記到時候改成自己的*/
        url : "http://wxjssdk.javadog.net/weixin/initWXJSSDKConfigInfo?url="+url,//替換網址，xxx根據自己jssdk文件位置修改
        success : function(data){
            console.log("返回值爲=" + data);
            var msg = "";
            if(data.success){
                msg = JSON.parse(data.msg);
            }
            //通過config接口注入權限驗證配置
            wx.config({
                debug: true, // 開啓調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時纔會打印
                appId: msg.appid,
                timestamp: msg.timestamp,
                nonceStr: msg.nonceStr,
                signature: msg.signature,
                /*！！！切記到時候按需自己選擇，參考文檔填寫*/
                jsApiList: [
                    "onMenuShareAppMessage",//分享給好友
                    "chooseImage"
                ]
            });
        },
        error:function(data){
            alert(JSON.stringify(data));
        }
    });

    //通過ready接口處理成功驗證
    wx.ready(function (){
        wx.checkJsApi({
            jsApiList: ['chooseImage','onMenuShareAppMessage'],
            success: function (res) {JSON.stringify(res)}
        });
        var shareData = {
            title: '標題',
            desc: '簡介',//這裏請特別注意是要去除html
            link: url,
            imgUrl: 'http://b2b.haier.com/shop/userfiles/sys/1/files/201912/af656b3a-8c2c-424d-937b-a8035deb78f5.jpg'
        };
        wx.onMenuShareAppMessage(shareData);


    });
    //從相冊選取圖片
    function wxchooseImage(){
        wx.chooseImage({
            count: 1, // 默認9
            sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有
            sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有
            success: function (res) {
                var localIds = res.localIds; // 返回選定照片的本地ID列表，localId可以作爲img標籤的src屬性顯示圖片
            }
        });
    }
</script>
</head>
<body>
<button onclick="wxchooseImage();">點我選取相冊</button>
</body>
</html>

---

🔥nginx 配置，此處不是項目中的代碼！！！
nginx.config - nginx服務器配置

 server
    {
	    listen   80;                           #監聽端口設爲 80。
	    server_name  wxjssdk.javadog.net;      #請綁定自己的前綴域名。
	    location / {
        proxy_set_header HOST $host;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://127.0.0.1:8002/;
      }
    }

MP_verify_B0vMQLCguxRzP1Rc.txt - JS接口安全域名驗證文件（到時候替換成自己公衆號上的），必須在域名根路徑下可以訪問

#一定把自己公衆號上的txt驗證文件放上!!!
B0vMQLCguxRzP1Rc

---

步驟詳解

打開文檔JSSDK使用步驟段落，如下⬇️

1.綁定域名

先登錄微信公衆平臺進入“公衆號設置”的“功能設置”裏填寫“JS接口安全域名”。如下⬇️

點擊設置如下⬇️

關鍵點

• 1.只能是三個域名或路徑，中文，ip，帶端口等路徑均不可
• 2.域名必須是ICP備案過的，有些同學使用內網穿透花生殼之類的無法設置JS安全域名
• 3.必須將txt文件放置安全域名所對應的目錄，如wxjssdk.javadog.net/xxx.txt。可由nginx配置，只要能訪問即可，如果訪問不到則無法設置JS安全域名

2.引入JS文件

實際引用在我們的項目Demo.html頁面中第9行，如

3.通過config接口注入權限驗證配置

關鍵點

必須在後臺開放一個對外獲取config接口注入權限的接口
對應我們代碼中WxInitController.java 中的initWXJSSDKConfigInfo()方法，會返回文檔中所需的必填項appId,timestamp,nonceStr,signature驗證參數

實現步驟

 1.先通過appId和appSecret參數請求指定微信地址 獲取AccessToken
 2.在通過第一步中的AccessToken作爲參數請求微信地址 獲取jsapi_ticket臨時票據(此處不考慮調用頻率，使用者根據情況放入緩存或定時任務)
 3.通過第二步的JssdkGetticket和timestamp,nonceStr,url作爲參數請求微信地址，獲取簽名signature
 4.將第三步獲得的signature和jsapi_ticket,nonceStr,timestamp,url返回給前端，作爲Config初始化驗證的信息

• 1.先通過appId和appSecret參數請求指定微信地址 獲取AccessToken
  對應我們代碼中WxUtil.java第61行getJSSDKAccessToken()方法
  
  通過自己公衆號的appId和appSecret調用微信服務器access_token接口地址獲取token,地址如下
  https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
  將其中APPID和APPSECRET替換成自己公衆號的appId和appSecret，調取後返回Json字符串結果，獲取access_token

• 2.通過第一步中的AccessToken作爲參數請求微信地址 獲取jsapi_ticket臨時票據
  對應我們代碼中WxUtil.java第81行getJssdkGetticket()方法
  
  通過上一步獲得的access_token調用微信服務器jsapi_ticket接口地址獲取jsapi_ticket,地址如下
  https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
  將其中ACCESS_TOKEN替換成上一步獲取的access_token，調取後返回Json字符串結果，獲取jsapi_ticket

• 3.通過第二步的JssdkGetticket和timestamp,nonceStr,url作爲參數請求微信地址，獲取簽名signature
  對應我們代碼中WxUtil.java第102行buildJSSDKSignature()方法
  
  通過上一步獲得的jsapi_ticket，加上timestamp(支付簽名時間戳),nonceStr(隨機字符串),url(當前網頁的URL),按照字段名的ASCII 碼從小到大排序（字典序）後通過sha1進行簽名，生成最終簽名數據。
  對應我們代碼中WxUtil.java第115行sha1()方法
  

• 4.前端成功接到返回值

對應我們代碼中demo.html第16行$.ajax方法

接口返回值爲

JSON.parse(msg)轉化一下JSON對象，對應我們代碼中的Demo.html中24行，轉化後數據做wx.config接口注入權限驗證，對應我們代碼demo.html第37行

4.通過ready接口處理成功驗證

關鍵點

所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行
在我們代碼在demo.html第46行，自定義分享接口，需要在頁面初始化加載時就放入ready纔可生效

反之不需要初始化加載的即可通過用戶事件觸發執行即可
在我們代碼在demo.html第63行，用戶點擊按鈕觸發-拍照或從手機相冊中選圖接口

發佈

我採用的IDEA插件Alibaba Cloud Toolkit工具一鍵部署本地應用到ECS服務器，可百度或等我下篇文章詳解一下這個插件的用法。


Target ECS：目標服務器，我買的是阿里的服務器，則直接可以搜索到。
Target Directory: 目標目錄，需要把打成的jar包上傳至哪個路徑下 如：/usr/local/hdx/web/
Command: 上傳後執行的操作命令 如：nohup java -jar /usr/local/hdx/web/springboot-wexin.jar

發佈成功後會在終端出現成功提示信息

然後大功告成，訪問一下試試 http://wxjssdk.javadog.net/demo.html
如果調試推薦使用微信開發者工具，也就是

切記配置nginx和服務器安全端口訪問權限！！！否則會404哦！！！

測試

• 1.先來測試下拍照或從手機相冊中選圖接口
  
  調試正常

• 2.再來測試微信內置分享
  
  調試報錯，這是個小坑。本狗在這調試了好久，原因出在個人的訂閱號是沒有自定義分享權限的！！
  

小坑總結

1. 訂閱號和服務號所涉及權限不同，需詳細查看微信開發文檔，查詢公衆號權限
2. IP白名單未設置,會報40164
   
   IP白名單需要在公衆號安全中心設置
   
3. invalid signature 簽名異常
   建議使用微信JSSDK簽名驗證工具驗證是否有誤

我是JavaDog，謝謝博友耐心看完了，點個贊👍再走唄，不行批評點評兩句也行啊！！！