#

UNI-APP 开发微信公众号（H5）分享支付 JSSDK 的使用

先看一遍 微信 JS SDK 文档：http://caibaojian.com/wxwiki/0030551f015f01ecaa56d20b88ee3c6cb32503bf.html

什么是微信JSSDK ?

开发微信公众号的嵌入网页。想要拥有在微信浏览器的功能，就必须使用 wx JSSDK 来获取基础能力，从而实现业务。
使用范围 ?

微信公众号的操作，app 、微信小程序有单独的方法来设置功能，此jssdk 只适用于微信公众号。
前期准备？

公众号需要申请，申请特定的能力。最重要的是最要做一步参数处理。

流程如下：网页向java-web请求微信分享，然后通过公众号的appid和secret获取微信的access_token,然后通过access_token获取微信ticket,微信返回的ticket生成时间戳和nonceStr，加上当前的url 求你注意下要传前端的url，代码我写在下面了，不传递永远不可能签名成功 和ticket进行签名生成signature,然后将 appid,timestamp,nonceStr,signature返回给前端页面，前端通过config接口注入权限验证配置即可(可以使用微信开发工具测试)
```
/** * 获取当前项目的链接 */
export function getWebUrl() { 
    return window.location.href.substring(0, window.location.href.indexOf('#'));
}
```
点击查看 java 示例
引入方式 ?
在 uniapp 中可以使用模块方式引用微信 js-sdk ，微信官网直接下载的使用有问题，可以使用 jweixin-module。

安装
- NPM安装方式（不会用NPM就不要用这种方式）
  
  npm install jweixin-module —save
- 下载使用方式
  下载地址：https://unpkg.com/jweixin-module@1.6.0/lib/index.js
使用
```
var jweixin = require('jweixin-module')  
jweixin.ready(function(){   
    // TODO 
});
```
建议大家使用第一种方式，简单便捷。一句话，直接导入进去。没有啥后顾之忧。
不建议使用第二种，第二种引入的话，可能会有问题，报错的情况发生。
可能看到这里大家还是不知道如何操作。那么下面示例可以看一下。

使用方法 ?

工具类 jws.js

import * as scanCodeService from "@/common/service/scanCodeService"
// jwx.js
//#ifdef H5
const jweixin = require('jweixin-module')
//#endif
export function configWeiXin(callback) { 
    //懂点前端应该知道这里是查询接口的箭头函数，内部细节不写了，就是查询后端返回的公众号参数信息
    scanCodeService.getWeiXinJsConfig().then(result => { 
        let apiList = [ // 可能需要用到的能力 需要啥就写啥。多写也没有坏处
            'onMenuShareAppMessage',
            'onMenuShareTimeline',
            'hideOptionMenu',
            'showOptionMenu',
            'chooseWXPay',
            'checkJsApi',
            'openLocation',
            'getLocation'
        ];
        let info = { 
            debug: false, // 调试，发布的时候改为false
            appId: result.data.appId,
            nonceStr: result.data.noncestr,
            timestamp: result.data.timestamp,
            signature: result.data.signature,
            jsApiList: apiList
        };
        jweixin.config(info);
        jweixin.error(err => { 
            console.log('config fail:', err);
        });
        jweixin.ready(res => { 
            if (callback) callback(jweixin);
        });
    }).catch()
}

支付示例

payUtil.js

import * as jwx from "@/*****/jws"
/** 1. 微信 浏览器 web 支付 2. @param {Object} orderInfo */
export async function wxChatWebPay(orderInfo) { 
    return new Promise((resolve) => { 
        jwx.configWeiXin(jweixin => { 
            jweixin.chooseWXPay({ 
                nonceStr: orderInfo.nonceStr,
                timestamp: orderInfo.timestamp,
                package: orderInfo.package,
                signType: orderInfo.signType,
                paySign: orderInfo.paySign,
                success: () => { 
                    // 支付成功后
                    let count = 1;
                    let timer = setInterval(function() { 
                        uni.request({ 
                            url: '回调查询'
                            method: "GET",
                            data: { },
                            success: (res) => { 
                                if (res.data.code === 0) { 
                                    clearInterval(timer);
                                    timer = null;
                                    uni.hideLoading()
                                    resolve(true);
                                } else if (res.data.code === -1) { 
                                    if (count === 12) { 
                                        clearInterval(timer);
                                        timer = null;
                                        resolve(false);
                                    }
                                    count++;
                                } else { 
                                    resolve(false);
                                }
                            },
                            complete: () => { }
                        });
                    }, 2000);
                },
                fail: err => { 
                    // 支付失败
                    resolve(false);
                },
                cancel: err => { 
                    // 支付取消
                    resolve(false);
                }
            });
        });
    })
}

分享示例：

分享需要注意，进入页面时就要设置好分享的参数。这样点击右上角分享才能分享的是你是设置的参数。

比如你想全局设置的话。不管在哪一个页面都能分享是同一个内容。然后这里面是有层级关系的。

全局 < 页面，单独页面上设置的分享比全局设置的要高.

全局分享设置

需要利用全局混入的方式设置。 app.vue 中写下下面示例代码。

import * as jwx from "@/*****/jws"
/** *微信公众号 全局混入微信 wxjsSdk * 偏于微信公众号获取位置 支付 等等 内置 sdk 使用 * 条件必须是公众号才配置此功能参数 * 全局混入 公众号分享设置内容 */
Vue.mixin({ 
    onUnload() { 
    },
    onShow() { 
        // 公众号全页面设置分享 这里的工具类我就不提供了，
        // 具体就是一些条件判断 如果是h5 并且是微信公众号的情况下 才会执行
        if (authenticateUtil.isYlsdH5()) { 
            if (UtilsService.isWeixinByJs()) { 
                // 分享页面配置
                    jwx.configWeiXin(jweixin => { 
                        let shareInfo = { 
                            title: '标题内容',
                            desc: '描述',
                            link: window.location.href,
                            imgUrl: '图片地址',
                            success: function() { }
                        };
                        jweixin.onMenuShareAppMessage(shareInfo);
                        jweixin.onMenuShareTimeline(shareInfo);
                    });
            }
        }
    },
    methods: { 
    },
    onLoad() { 
    }

    });
**单独页面分享设置**
把内容写在 单独页面里面就行了。 他的层级比全局的要高，请注意。
    import * as jwx from "@/*****/jws"
    onShow() { 
                // 公众号全页面设置分享 这里的工具类我就不提供了，
                // 具体就是一些条件判断 如果是h5 并且是微信公众号的情况下 才会执行
                if (authenticateUtil.isYlsdH5()) { 
                    if (UtilsService.isWeixinByJs()) { 
                        // 分享页面配置
                            jwx.configWeiXin(jweixin => { 
                                let shareInfo = { 
                                    title: '标题内容',
                                    desc: '描述',
                                    link: window.location.href,
                                    imgUrl: '图片地址',
                                    success: function() { }
                                };
                                jweixin.onMenuShareAppMessage(shareInfo);
                                jweixin.onMenuShareTimeline(shareInfo);
                            });
                    }
                }
            },

注意事项：
** 好兄弟！！！公众号后台注意：别忘了配置 js 域名不然不管用。**

-————————————————————————-分割线 2021-2-8 —————————————————————
发现评论区不确定 scanCodeService.getWeiXinJsConfig() 是一个什么方法返回什么参数我把内容细节给大家发出来方便大家学习。

// 获取微信jssdk的授权token
// http.get 是我封装的请求你可以用 uni.request 方式返回调用服务器接口，这个因人而异
export function getWeiXinJsConfig() {
```
return http.get('你的服务器接口地址',
        { 
            header: authenticateUtil.getHeader()
        }).then(response => { 
        if (response.data && response.data.code === 0) { 
            return response.data;
        } else { 
            return null;
        }
    })
    .catch(error => { 
        return error;
    });
```
}

UtilService.js

/** * 根据设备判断是否是微信环境的 */
export function isWeixinByJs() { 
    let ua = window.navigator.userAgent.toLowerCase();
    return ua.match(/MicroMessenger/i) == 'micromessenger';
}
有问题欢迎大家指出，感觉 不清楚、实现不出效果、感觉混乱的读者。请联系 qq 1019011560.