基本配置1.设置—公众号设置—功能设置—配置JS接口安全域名

安全域名配置规则如下

2.开发—基本配置

开发者密码第一次使用需要重新设置

记录 开发者ID(AppID) 开发者密码（）后面会用到

3.IP白名单配置

推荐填写当前本地开发IP地址和服务器IP地址

本地开发地址获取方式

服务器IP地址（根据自己的服务器Ip地址自行填写）

多个IP地址填写用回车隔开

4重要的一步

在：微信公众号-开发-接口权限查看想要调用的开发接口是否可用

如果有相关接口权限无法开启，推荐使用：微信公众平台-开发-开发者工具-公众平台测试帐号开发

开始开发1.引入JS文件

在需要调用JS接口的页面引入如下JS文件，（支持https）：

2通过config接口注入权限验证配置（最重要的一步）

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的JS接口列表
});

appID（前面在微信公众号基本配置中已经拿到了）

:['','eData'] (例：上传图片接口,和自定义分享接口)

签名算法（微信官方提供）

生成签名之前必须先了解一下，是公众号用于调用微信JS接口的临时票据。正常情况下，的有效期为7200秒，通过来获取。由于获取的api调用次数非常有限，频繁刷新会导致api调用受限，影响自身业务，开发者必须在自己的服务全局缓存 。

参考以下文档获取（有效期7200秒，开发者必须在自己的服务全局缓存）：用第一步拿到的 采用http GET方式请求获得（有效期7200秒，开发者必须在自己的服务全局缓存）：2.1签名获取拆解第一步GET请求

的有效期为7200秒（不必反复请求）

appid 和 secret 在前面的基本配置中其实都已经拿到。但是由于开发者密码（）是校验公众号开发者身份的密码，具有极高的安全性。不能直接暴露在前端代码中，所以的请求需在后端完成，这里签名的生成过程都在后端完成。

当前以node搭建后端服务

//获取到access_token示例
var url = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`;
        request(url, function (error, response, body) {
            if (!error && response.statusCode == 200) {
                console.log("access_token值" +JSON.parse(body).access_token)
            }
        });

第二步GET请求

的有效期为7200秒（不必反复请求）

用第一步获取到的的值进行请求

//
var url = `https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${access_token}&type=jsapi`
        request(url, function (error, response, body) {

            if (!error && response.statusCode == 200) {
                console.log("jsapi_ticket值" + JSON.parse(body).ticket);
            }
        });

第三步生成算法签名

const = (Date.now() / 1000) //生成签名的时间戳

const = Math.random().(36).substr(2, 15) //生成签名的随机串

let //在第二步生成

let url//签名用的url必须是调用JS接口页面的完整URL（前端请求服务端接口带入）

const sha1 = require('sha1')//这里需要引入一个插件npm install sha1
router.get('/', (req, res, next) => {
const url = decodeURIComponent(req.query.url)//这里的url采用前端加密，后端解密的形式获取
const timestamp = parseInt(Date.now() / 1000)
const nonceStr = Math.random().toString(36).substr(2, 15)
let jsapi_ticket = "在第二步拿到了"
const params = {
        nonceStr,
        jsapi_ticket,
        timestamp,
        url
    }
    const string = Object.keys(params).sort().map(key => `${key.toLowerCase()}=${params[key]}`).join('&')
    const signature = sha1(string)//生成的签名
    
    res.status(200).json({//将参数返回给前端
        timestamp,
        signature,
        nonceStr
    });
    
    })
module.exports = router;
    

3前端静态页面实际调用

    
    


    
    
分享页面

    <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script>
    function wxFN(){
        $.ajax({
                type: "get",
                url: `http://*************/api/wx?url=${encodeURIComponent(location.href.split('#')[0])}`,
                success: function(data) {
                    console.log(data);
                    wx.config({
                        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        appId: data.appId, // 必填，公众号的唯一标识
                        timestamp: data.timestamp, // 必填，生成签名的时间戳
                        nonceStr: data.nonceStr, // 必填，生成签名的随机串
                        signature: data.signature, // 必填，签名
                        jsApiList: ['updateAppMessageShareData'] // 必填，需要使用的JS接口列表
                    });
                }
            });
    }
        wxFN()
        wx.ready(function() { //需在用户可能点击分享按钮前就先调用
            wx.updateAppMessageShareData({
                title: '', // 分享标题
                desc: '', // 分享描述
                link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: '', // 分享图标
                success: function() {
                    alert("成功")
                    // 设置成功
                }
            })
        });
        
        wx.error(function(res) {
            console.log('err', res)
        });
    </script>
    

4常见错误及解决方法(微信提供)

调用config 接口的时候传入参数 debug: true 可以开启debug模式，页面会alert出错误信息。以下为常见错误及解决方法：

invalid url domain当前页面所在域名与使用的appid没有绑定，请确认正确填写绑定的域名，仅支持80（http）和443（https）两个端口，因此不需要填写端口号（一个appid可以绑定三个有效域名，见 ]目录1.1.1）。

invalid 签名错误。建议按如下顺序检查：

确认签名算法正确，可用页面工具进行校验。确认config中（js中驼峰标准大写S）, 与用以签名中的对应, 一致。确认url是页面完整的url(请在当前页面alert(.href.split('#')[0])确认)，包括'http(s)/'部分，以及'？'后面的GET参数部分,但不包括'#'hash后面的部分。确认 config 中的 appid 与用来获取 的 appid 一致。确保一定缓存和。确保你获取用来签名的url是动态获取的，动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名，前端需要用js获取当前页面除去'#'hash部分的链接（可用.href.split('#')[0]获取,而且需要），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。

the value is offline 这个错误是因为config没有正确执行，或者是调用的JSAPI没有传入config的参数中。建议按如下顺序检查：