皮皮网

1.如何在React中调用微信的jsSDK
2.uni-app实现定位功能
3.微信公众号开发之如何使用JSSDK
4.如何开发一款JSSDK

如何在React中调用微信的jsSDK

       1. 微信JSSDK使用步骤简介

       æˆ‘们既然是在做基于微信的开发，当然就离不开微信的开发文档了。开始之前希望大家能先去看下《微信JS-SDK说明文档》。那么我们怎么样才能用上微信的JSSDK呢？以下基本步骤就是基于该文档的。

       éœ€è¦æ³¨æ„çš„是，如果本人下面的描述你看的有点云里雾里的话，我建议你：

       å›žå¤´çœ‹ä¸‹æœ¬ç³»åˆ—《小白学react》的历史基础文章，特别是《小白学react之altjs的Action和Store》以及《小白学react之打通React Component任督二脉》，或/和：

       ç›´æŽ¥è·³è¿‡æˆ‘的描述，在文章后面下载最新的源码，先阅读源码，碰到问题再反过来看文章的描述。

       æ­¥éª¤ä¸€ï¼šç»‘定域名

       å…ˆç™»å½•å¾®ä¿¡å…¬ä¼—平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

       å¤‡æ³¨ï¼šç™»å½•åŽå¯åœ¨â€œå¼€å‘者中心”查看对应的接口权限。

       è¿™é‡Œç»‘定的时候需要注意不要带前面的W',    accessTokenUrlin.qq.com/cgi-bin/token',    ticketUrl:'com/cgi-bin/ticket/getticket',

       }

       exports.sign = function (url,callback) {  var noncestr = config.noncestr,

              timestamp = Math.floor(Date.now()/), //精确到秒

          ...

              request(config.accessTokenUrl + '?grant_type=' + config.grant_type + '&appid=' + config.appid + '&secret=' + config.secret ,function(error, response, body){            if (!error && response.statusCode == ) {                var tokenMap = JSON.parse(body);

                      request(config.ticketUrl + '?access_token=' + tokenMap.access_token + '&type=jsapi', function(error, resp, json){                    if (!error && response.statusCode == ) {                        var ticketMap = JSON.parse(json);

                              cache.put('ticket',ticketMap.ticket,config.cache_duration);  //加入缓存

                              callback({                            noncestr:noncestr,                            timestamp:timestamp,                            url:url,                            jsapi_ticket:ticketMap.ticket,                            signature:sha1('jsapi_ticket=' + ticketMap.ticket + '&noncestr=' + noncestr + '&timestamp=' + timestamp + '&url=' + url)

                              });

                          }

                      })

                  }

              })

          }

       }

       è¿™é‡Œçš„流程和我们刚才描述的并无二致。首先是通过appId和secret获得调用获取jsapi_ticket的access_token，然后通过该access_token获得我们签名需要用到的jsapi_ticket。noncestr我们是提前随便填写好的。timestamp的算法也比较简单。

       æœ€åŽå°±æ˜¯é€šè¿‡sha1这个库提供的方法，将jsapi_ticket，noncestr，timestamp和页面url进行sha1签名，然后将以上这些信息通过callback返回给上层调用函数。

       é‚£ä¹ˆæˆ‘们往下看下我们的上层调用函数。其实就是我们的express路由:

app.get("/api/signature", function(req,res) {    const url = req.query.url.split('#')[0];

          signature.sign(url,function(signatureMap){

              signatureMap.appId = wechat_cfg.appid;

              res.send(signatureMap);

          });

       })

       æ ¹æ®å¾®ä¿¡å¼€å‘文档需求，我们首先需要将传进来的url的锚点后面的数据给去掉，保留前面的有效部分。

       ç„¶åŽå°±æ˜¯è°ƒç”¨ä¸Šé¢çš„sign方法来生成签名。上面的签名方法最后传进来的json数据就是这里的signatureMap。我们最终会将这些数据发送回react客户端。

       åŒæ—¶ï¼Œé€šè¿‡ä¸Šé¢çš„wx.config的示例，我们知道还需要用到微信公众号的appId。所以这里一并将其放到signatureMap中进行返回。

       é‚£ä¹ˆåˆ°æ­¤ä¸ºæ­¢ï¼Œreact客户端调用服务端的"/api/signature"返回的数据示例如下:

{

        noncestr: 'Wm3WZYTPz0wzccnW',

        timestamp: ,

        url: 'com/?code=kGsdxcm7F1PAFfUudkGsdr&state=',

        jsapi_ticket: 'sM4AOVdWfPE4DxkXGEs8VBqyVbs-TKGYp4d_ZSQa0Q5WvvMUPNQ6XGpyEcgKOD_xID_GrMCaalSmIF9JbrGaOg',

        signature: 'ffaf4b9eb0dfcfefe3daae3c'

       }

       3.  å®¢æˆ·ç«¯èŽ·å–签名信息

       3.1 获取签名信息并注入jssdk

       å’Œä¹‹å‰çš„获取微信用户信息一样，我们这里会建立一个新的Source文件WechatSdkSource.js来调用远程服务器的"/api/signature"接口:

var WechatSdkSource = {

        fetchSignatureMap() {    return {

            remote(state,url) {        return co(function *() {          let signatureMap = null;          const getSignatureMapUrl = `/api/signature`;          try {            let result = yield request.get(getSignatureMapUrl).query({ url:url});

                  signatureMap = result.body;

                } catch (e) {

                  signatureMap = null;

                }          //console.log("userInfo:", userInfo);

                return signatureMap;

              });

            },

            local() {        // Never check locally, always fetch remotely.

              return null;

            },      success: WechatSdkActions.updateSignatureMap,      error: WechatSdkActions.getSignatureMapFailed,      loading: WechatSdkActions.getSignatureMap,

          }

        }

       };

       è¿™é‡Œä¼ è¿›æ¥çš„url由下面将要谈及的上层函数所生成。整个流程就没有什么好说的了，说白了就是通过相应的库发送一个带有url的query参数的请求到服务器端来请求签名信息，相信有跟着这个系列文章的朋友都是很清楚的了。

       æœ€ç»ˆè¯·æ±‚成功返回的时候就会调用WechatSdkActions的updateSignatureMap这个Action。

var alt = require('../alt');module.exports  = alt.generateActions(    'updateSignatureMap',    'getSignatureMap',    'getSignatureMapFailed',

       );

       è€Œè¿™ä¸ªaction就会触发所监听的WechatSdkStore的onUpdateSignatureMap这个回调。

class WechatSdkStore {  constructor() {    this.signatureMap = [];    this.errorMessage = null;    this.ready = false;    this.bindActions(WechatSdkActions);    this.exportAsync(WechatSdkSource);

uni-app实现定位功能

       uni-app实现定位功能的步骤如下：

       首先，获取用户地理位置权限。使用uni-app内置的authorize方法，请求用户授权。在manifest.json文件中，点击"源码视图"，仿aspku源码在mp-weixin配置部分添加相关配置代码。

       接下来，确保在app.json文件中也配置好权限请求。运行项目到微信开发者工具，再次配置相关代码。在authorize方法中，设置scope参数为userLocation，以请求获取位置信息。若用户拒绝授权，提示他们访问小程序设置页面。

       在实际使用前，得物页面源码要检查是否已获取到定位权限。如果未授权，应适时提示用户并请求授权。

       若需实现精准定位，可以借助腾讯地图。首先，注册腾讯地图开发者，获取key并下载qqmap-wx-jssdk.min.js。rc-form源码然后，在该文件末尾替换相关代码，并将SDK文件放入libs文件夹。创建腾讯地图对象后，调用逆地址解析方法获取位置信息。

       对于常见问题，解决方案包括：

       - 如果微信小程序定位出错，检查manifest.json的体温上报系统源码配置，确保已添加正确的权限代码，并在app.json中同步配置。然后，重新编译项目并启动，uni.getLocation方法应该能正常返回经纬度。此外，务必确认AppID已正确配置，可在manifest.json的领跑投票系统源码"微信小程序配置"部分查看。

微信公众号开发之如何使用JSSDK

        微信开发交流群：

        欢迎留言、转发、打赏

        系列文章参考地址 极速开发微信公众号

        项目源码参考地址 点我点我--欢迎Start

        服务号、订阅号可以通过登录 微信公众平台 查看 开发>接口权限

        使用JSSDK主要包括

        1、判断当前客户端版本是否支持指定JS接口、

        2、分享接口（微信认证）

        3、图像接口

        4、音频接口

        5、智能接口（识别语音并返回结果）

        6、设备信息（获取网络状态）

        7、地理位置

        8、界面操作

        9、微信扫一扫

        、微信小店（服务号必须通过微信认证）

        、微信卡券 （微信认证）

        、微信支付（服务号必须通过微信认证）

        官方参考文档

        步骤一：绑定域名

        先登录微信公众平台进入 公众号设置 的 功能设置 里填写 JS接口安全域名 。

        步骤二：引入JS文件

        在需要调用JS接口的页面引入如下JS文件，（支持/open/js/jweixin-1.0.0.js

        如需使用摇一摇周边功能，请引入 /open/js/jweixin-1.1.0.js

        备注：支持使用 AMD/CMD 标准模块加载方法加载

        步骤三：通过config接口注入权限验证配置

        签名算法生成规则

        请 官方参考文档

        下面具体来讲讲 开源项目 weixin_guide 中的封装。

        使用的时候只要在Controller方法上添加一个拦截器 JSSDKInterceptor 来实现签名验证再将 wx.config 需要的参数设置对应的属性在页面上进行获取。

        拦截器实现如下：

        在Controller中使用

        JSP页面上面使用

        测试结果

        在AppConfig 中添加路由 me.add("/jssdk", JSSDKController.class,"/view"); 手机中访问 http://域名[/项目名称]/jssdk ,如果设置了 debug= true 成功了就会弹出

        如果出现 { "errorMsg":"config:invalid url domian"} 请检查步骤一：绑定域名与你访问的域名是否在安全域名列表当中

        步骤四：通过ready接口处理成功验证

        步骤五：通过error接口处理失败验证

        步骤六：接口调用

        拦截器具体实现 参考地址 点这里

        js 接口调用参考地址 点这里

        以上就是JSSDK使用的介绍。

        欢迎留言、转发、打赏项目

        源码参考地址 点我点我--欢迎Start

如何开发一款JSSDK

       开发一款JSSDK，首先理解其本质：JSSDK是前端开发者使用的软件开发工具包，它封装了一系列JavaScript API，便于集成特定功能，如社交分享、地图服务和支付等。JSSDK主要包含三个核心组件：JavaScript库、API文档和示例代码，其中JavaScript库是基础，API文档指导开发者使用，示例代码则提供实践参考。

       针对不同功能，JSSDK可以分为UI组件库、JS工具库、分析统计SDK和社交媒体SDK。以问卷投放SDK为例，设计时需遵循单一职责原则，只关注投放和回收逻辑，而内容展示等内部逻辑则不在SDK范围内。

       在项目结构上，src目录存放源代码，API设计分为生命周期方法和实例方法，并确保每个API都有回调机制。在项目架构中，入口文件如Index负责对外暴露SDK功能，通过initQaSDK初始化问卷SDK实例。rollup.config.mjs是关键配置文件，定义了输入和输出设置，包括ES、CJS和UMD三种模块格式，以便适应多种开发环境。