面兩篇文章講解了前端對接微信公眾號網頁開發流程，前期配置 和 前端對接微信公眾號網頁開發流程，授權對接，授權對接，本篇文章講解關于微信JSSDK的使用

一、通過 config 接口注入權限驗證配置

所有需要使用 JS-SDK 的頁面必須先注入配置信息，否則將無法調用，同一個 url 僅需調用一次，config注入所需參數有debug、appid、timestamp、nonceStr、signature、jsApiList，除了debug和jsApiList其他幾項都需接口返回，因為代碼中不能有明文參數出現，當然前端也有辦法獲取，如果是用來測試前端也可以獲取

wx.config({
  debug: true, // 開啟調試模式,調用的所有 api 的返回值會在客戶端 alert 出來
  appId: '', // 必填，公眾號的唯一標識
  timestamp: , // 必填，生成簽名的時間戳
  nonceStr: '', // 必填，生成簽名的隨機串
  signature: '',// 必填，簽名
  jsApiList: ['chooseImage','getLocation'] // 必填，需要使用的 JS 接口列表
});

注入成功會返回以下數據

二、接口的使用

首先接口方法的使用必須是第一步能成功。下面舉幾個關于方法使用的例子

1.拍照或從手機相冊中選圖接口

wx.chooseImage({
  count: 1, // 默認9
  sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有
  sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有
  success: function (res) {
  		// 返回選定照片的本地 ID 列表，localId可以作為 img 標簽的 src 屬性顯示圖片
  }
});

2.預覽圖片接口

wx.previewImage({
  current: '', // 當前顯示圖片的 http 鏈接
  urls: [] // 需要預覽的圖片 http 鏈接列表
});

3.獲取地理位置接口

能介紹：

控制臺：表單反饋、文章、文章回收站
小程序DIY：首頁管理、萬能頁面、萬能表單、文章搜索頁、欄目頁樣式、詳情頁樣式、本地模板庫
公眾號DIY：首頁管理、萬能頁面、萬能表單、文章搜索頁、文章欄目頁、文章詳情頁、前臺鏈接說明、本地模板庫
欄目管理：欄目列表、添加欄目
內容管理：文章列表、新增文章、相冊管理、地圖管理外鏈管理、跳轉小程序、表單數據、文章回收站
會員列表：
萬能錄入：員工帳號、錄入表單、表單數據、錄入搜索頁面
站點配置：
賬號管理：
百度小程序：
支付寶小程序：
抖音小程序：

更新日志：

組件屬性選項卡分類切換功能
修復拖拽生成組件名稱顯示問題
增加選項卡組件
需更新前端

萬*能表單郵件提醒功能
修復后臺懸浮組件相對頂部定位的顯示問題
無需更新前端


組件外邊距區間調整為[-20000, 20000]
修復百度小程序詳情多個懸浮組件定位問題
百度小程序增加詳情文章seo title
首頁seo后臺自定義，增加頁seo設置（設置方法：點擊diy頁面頂部導航，在屬性欄中設置）
修復百度小程序前端欄目滑動導航無法撐開問題
欄目列表頁增加seo配置


小程序詳情頁增加搜索組件
修復萬*能表單非必傳圖片上傳組件未上傳圖片時，后臺不顯示提交數據bug
增加首頁模板保存功能，可新增、編輯模板
百度端增加自動生成sitemap文件，方便seo
百度端復制數據成功提示
百度端site文件錯誤修復
百度端水平滾動組件點擊不跳轉問題
支付寶端增加關注生活號功能
百度小程序支付寶小程序去除點擊時的自帶樣式
可手動輸入要跳轉的小程序頁面地址
需更新前端

相冊管理中增加全選功能
修復文章搜索
后臺未授權用戶過濾功能
輪播圖增加的圓角屬性
增加富文本空格、換行、分割線前端支持
增加百度小程序和支付寶小程序支持
需要更新前端

懸浮組件增加相對頂部定位
富文本多圖上傳默認全屏
增加diy快捷操作按鈕，方便操作負邊距組件
修復單圖組件設置負上外邊距后臺顯示誤差問題
修復前端ios兼容問題
增加跳轉其它小程序的數據表
應用新版功能需更新前端

修復bug
非強制跳轉獲取手機號，用戶拒絕后返回首頁
文章支持評論點贊生成分享海報
百度小程序文章詳情web化seo支持

技術框架

開發語言：JAVA

數據庫：MYSQL

JAVA開發框架：SpringBoot+Mybatis

緩存框架：j2cache

前端開發框架：Layui+JQuery+html

前臺模板引擎：art-template

SmartWx是一款基于JAVA企業級平臺研發的微信公眾號管理系統， 依托企業級JAVA的高效、安全、穩定等優勢，開創國內JAVA版開源微信公眾號管理系統先河。

- SmartWx采用最流行的Spring語言，來實現多公眾號的管理。

- 如果您要需要搭建一個微信公眾號管理系統,那么您可以用SmartWx

- 如果您厭煩了微信公眾號管理后臺枯燥的頁面，那么您可以用SmartWx

- 如果您手中有很多公眾號，那么您可以用SmartWx

## 功能模塊

#### 賬號信息

1. 綁定公眾號信息

#### 文本信息

1. 新建消息

2. 消息發送

#### 模板消息

1. 由于模板消息需要自己創建模板，系統中只是演示功能，大家可以自行更改

#### 圖文管理

1. 多圖文

2. 單圖文

#### 菜單管理

1. 支持幾乎所有的微信菜單類型

2. 可視化管理

3. 保存&同步

#### 粉絲管理

1. 批量同步粉絲

2. 單個粉絲同步

3. 發送文本消息和圖文消息

#### 多賬號管理

1. 添加公眾號

2. 選擇公眾號

## 環境要求

- JDK7或更高版本

- Tomcat7.0或更高版本

- MySQL5.1或更高版本

## 部署說明

1. 創建數據庫。如使用MySQL，字符集選擇為`utf8`。

1. 執行數據庫腳本。數據庫腳本在`/doc`目錄下。

1. 在eclipse中導入maven項目。點擊eclipse菜單`File` - `Import`，選擇`Maven` - `Existing Maven Projects`

1. 設置項目編碼為utf-8，選擇jdk1.7版本或以上，不要選擇jre。

1. 修改數據庫連接。打開`/src/main/resources/property/jdbc.properties`文件，根據實際情況修改`jdbc.url`、`jdbc.username`、`jdbc.password`的值

1. 上傳圖片設置。upload.properties 如屬性文件所描述，如圖片想放到項目中，res.upload.url注釋即可

1. 緩存設置。為兼容jdk1.7，此版本中暫時廢棄j2cache，默認僅使用ehcache緩存，如想使用，修改J2CacheUtil,用CacheJ2Utils替換CacheUtils,修改依賴文件

1. 七牛云配置。app.properties 項目中暫時未用到，可廢棄

1. 項目中為簡化代碼，用到了 ***lombok*** 插件，大家可自行安裝。

1. 由于項目采用前后臺分離，也為了將來配置讀寫分離，項目需 ***root*** 根目錄運行，如若不然可能會js，css加載不到的情況（自己可修改）

1. 編譯項目。在eclipse中，右鍵點擊項目名，選擇`Run as` - `Maven build...`，`Goals`填入`clean package`，然后點擊`Run`，第一次運行需要下載jar包，請耐心等待

1. 部署項目。將項目部署到Tomcat7或以上版本，啟動Tomcat。也可使用maven tomcat7插件運行，jetty插件運行暫時有問題

1. 訪問系統。地址：[http://localhost:8080/](http://localhost:8080/)；用戶名：smartwx，密碼：smartwx

1. 由于eclipse識別問題，部分xml文件和html頁面會報錯，無需關心，運行即可。

1. 添加公眾號頁面，url和token兩項自動生成，***無需手動填寫***。將 ***開通80端口的公網ip或域名（切記全路徑）+url*** 和 ***token*** 這兩項填入到微信后臺即可

1. 添加完公眾號，大家先嘗試下 同步粉絲功能，若成功，則項目配置完成，若無法獲取accesstoken，切記檢查 微信后臺 ***獲取accesstoken白名單設置***

需要獲取源碼請登錄轉自瑪雅資源網(www.mayazy.com)