面两篇文章讲解了前端对接微信公众号网页开发流程，前期配置 和 前端对接微信公众号网页开发流程，授权对接，授权对接，本篇文章讲解关于微信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)