jweixin.js如何使用

jweixin.js 是微信公众平台提供的一个用于网页开发的JavaScript库，它可以让开发者在微信内的网页中调用微信的各种功能，如分享、支付、获取地理位置等。要使用jweixin.js，首先需要在微信公众号平台上配置好JS接口安全域名，然后通过服务器端获取权限验证签名，并在前端页面中引入并初始化jweixin.js。下面将详细描述如何使用 jweixin.js：

一、配置JS接口安全域名

要使用jweixin.js，首先需要在微信公众平台上配置JS接口安全域名。这个步骤至关重要，微信会验证你的网页是否在配置的域名下运行，如果不在，则无法使用jweixin.js的功能。

登录微信公众平台。
在左侧菜单中选择“设置”->“公众号设置”->“功能设置”。
在“JS接口安全域名”处填写你的域名。

二、获取权限验证签名

在前端使用 jweixin.js 前，需要通过服务器端获取权限验证的签名。这个签名是根据微信的规则生成的，包括 nonceStr（随机字符串）、timestamp（时间戳）、url（当前网页的URL）和 jsapi_ticket（通过微信API获取的票据）。

获取access_token

curl "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET"

获取jsapi_ticket

curl "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=ACCESS_TOKEN"

生成签名

签名的生成规则如下：

string1 = "jsapi_ticket=YOUR_JSAPI_TICKET&noncestr=YOUR_NONCESTR&timestamp=YOUR_TIMESTAMP&url=YOUR_URL"
signature = sha1(string1)

三、在前端页面中引入并初始化 jweixin.js

在你的HTML文件中引入 jweixin.js，并初始化：

<!DOCTYPE html>
<html>
<head>
    <title>微信JS-SDK Demo</title>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>
<body>
    <h1>微信JS-SDK Demo</h1>
    <button id="shareBtn">分享</button>
    <script>
        wx.config({
            debug: true,
            appId: 'YOUR_APPID',
            timestamp: YOUR_TIMESTAMP,
            nonceStr: 'YOUR_NONCESTR',
            signature: 'YOUR_SIGNATURE',
            jsApiList: [
                'onMenuShareTimeline',
                'onMenuShareAppMessage'
            ]
        });
        wx.ready(function () {
            wx.onMenuShareTimeline({
                title: '分享标题',
                link: 'https://yourwebsite.com',
                imgUrl: 'https://yourwebsite.com/image.jpg',
                success: function () {
                    console.log('分享成功');
                },
                cancel: function () {
                    console.log('取消分享');
                }
            });
            wx.onMenuShareAppMessage({
                title: '分享标题',
                desc: '分享描述',
                link: 'https://yourwebsite.com',
                imgUrl: 'https://yourwebsite.com/image.jpg',
                type: '',
                dataUrl: '',
                success: function () {
                    console.log('分享成功');
                },
                cancel: function () {
                    console.log('取消分享');
                }
            });
        });
        wx.error(function (res) {
            console.log(res.errMsg);
        });
    </script>
</body>
</html>

四、详细功能介绍

一、分享功能

分享到朋友圈

使用 wx.onMenuShareTimeline 方法可以实现将网页分享到朋友圈。需要配置的参数包括 title（分享标题）、link（分享链接）、imgUrl（分享图标），成功和取消分享的回调函数。

分享给朋友

使用 wx.onMenuShareAppMessage 方法可以实现将网页分享给好友。需要配置的参数包括 title（分享标题）、desc（分享描述）、link（分享链接）、imgUrl（分享图标），成功和取消分享的回调函数。

二、图片功能

拍照或从手机相册选择图片

使用 wx.chooseImage 方法可以调用微信的拍照或从手机相册选择图片功能。配置参数包括 count（图片数量）、sizeType（可以指定是原图还是压缩图）、sourceType（可以指定是拍照还是相册）。

document.querySelector('#chooseImageBtn').addEventListener('click', function () {
    wx.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: function (res) {
            var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
        }
    });
});

预览图片

使用 wx.previewImage 方法可以预览图片。配置参数包括 current（当前显示图片的http链接）、urls（需要预览的图片http链接列表）。

document.querySelector('#previewImageBtn').addEventListener('click', function () {
    wx.previewImage({
        current: 'https://yourwebsite.com/image.jpg',
        urls: ['https://yourwebsite.com/image1.jpg', 'https://yourwebsite.com/image2.jpg']
    });
});

三、地理位置功能

获取地理位置

使用 wx.getLocation 方法可以获取地理位置。配置参数包括 type（默认为wgs84的坐标，返回gps坐标，可以改成'gcj02'，返回国测局坐标），成功和失败的回调函数。

document.querySelector('#getLocationBtn').addEventListener('click', function () {
    wx.getLocation({
        type: 'gcj02', // 默认为wgs84的坐标
        success: function (res) {
            var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
            var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
            var speed = res.speed; // 速度，以米/每秒计
            var accuracy = res.accuracy; // 位置精度
        }
    });
});

四、支付功能

发起支付请求

使用 wx.chooseWXPay 方法可以发起微信支付请求。配置参数包括 timestamp（支付签名时间戳）、nonceStr（支付签名随机串）、package（统一支付接口返回的prepay_id参数值）、signType（签名方式，默认为'SHA1'，支持SHA1和MD5）、paySign（支付签名）。

document.querySelector('#payBtn').addEventListener('click', function () {
    wx.chooseWXPay({
        timestamp: 1414723227, // 支付签名时间戳
        nonceStr: 'noncestr', // 支付签名随机串，不长于32位
        package: 'prepay_id=u802345jgfjsdfgsdg888',
        signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
        paySign: 'paySign', // 支付签名
        success: function (res) {
            // 支付成功后的回调函数
        }
    });
});

五、扫一扫功能

调起扫一扫

使用 wx.scanQRCode 方法可以调起微信扫一扫功能。配置参数包括 needResult（默认为0，扫描结果由微信处理，1则直接返回扫描结果）、scanType（可以指定扫描的类型）。

document.querySelector('#scanQRCodeBtn').addEventListener('click', function () {
    wx.scanQRCode({
        needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
        scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
        success: function (res) {
            var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
        }
    });
});

六、项目管理系统推荐

在开发过程中，使用项目管理系统可以极大地提高团队的协作效率，尤其是涉及到多个开发者和复杂的功能模块时。推荐两款高效的项目管理系统：

研发项目管理系统 PingCode：专为研发团队设计，提供从需求管理、任务分配、到进度跟踪的全方位支持。其强大的定制化功能和灵活的工作流设计，适合各种规模的研发团队。
通用项目协作软件 Worktile：这款软件不仅适用于研发团队，也适用于其他类型的团队。其直观的界面和丰富的功能模块，如任务管理、时间管理、文档协作等，能够满足团队日常协作的各种需求。

七、总结

jweixin.js 是微信公众平台提供的一个功能强大的JavaScript库，能够极大地丰富在微信内网页的功能。通过配置JS接口安全域名、获取权限验证签名，并在前端页面中引入并初始化 jweixin.js，可以实现分享到朋友圈、分享到好友、拍照或从手机相册选择图片、获取地理位置、发起支付请求、调起扫一扫等功能。在开发过程中，使用项目管理系统，如PingCode和Worktile，可以有效地提高团队的协作效率。