微信公众号对接JS-SDK接口 调用微信内置地图
时间:2019-11-07
本文章向大家介绍微信公众号对接JS-SDK接口 调用微信内置地图,主要包括微信公众号对接JS-SDK接口 调用微信内置地图使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
微信js-sdk开发文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
1.页面配置
引用微信js-sdk, http://res.wx.qq.com/open/js/jweixin-1.2.0.js ,然后通过config接口注入权限验证配置。先在自己的服务器上写个获取数据的接口
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>位置信息</title> <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script> </head> <body> <!-- <h1>微信地图</h1> --> </body> <script> // 获取微信sdkConfig function getWxJSSDK() { // 拿到当前页面url var thisPageUrl = location.href; $.ajax({ url: "/api/h5/getWxJsSdkConfig", type: "post", dataType: "JSON", data: { "url": thisPageUrl, }, success: function (result) { console.log(result); configWeiXin(result.obj); }, error: function (err) { } }); } function configWeiXin(data) { wx.config({ debug: false, // true开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: data.appId, timestamp: data.timestamp, nonceStr: data.nonceStr, signature: data.signature, jsApiList: ['openLocation', 'getLocation'] }); } getWxJSSDK(); wx.ready(function () { wx.openLocation({ latitude: "<%-lag%>", // 纬度,浮点数,范围为90 ~ -90 longitude: "<%-lng%>", // 经度,浮点数,范围为180 ~ -180。 name: "<%-shopName%>", // 位置名 address: "<%-shopAddress%>", // 地址详情说明 scale: 15, // 地图缩放级别,整形值,范围从1~28。默认为最大 infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转 }); }); </script> </html>
服务器配置
// 引用依赖 const sha1 = require('sha1'); // 接口方法 async getWxJsSdkConfig(ctx) { try { const createRule = { url: { type: 'string', required: true }, }; try { ctx.validate(createRule, ctx.request.body); } catch (e) { return ctx.body = packageRes.packageRes(3, "参数错误", ""); } let url1 = ctx.request.body.url let jsapi_ticket = '微信 JSAPI_TICKET' let appid = '微信APPID' let nonce_str = '123456' // 密钥,字符串任意,可以随机生成 let timestamp = moment().unix() // 时间戳 // 将请求以上字符串,先按字典排序,再以'&'拼接,如下:其中j > n > t > u,此处直接手动排序 let str = 'jsapi_ticket=' + jsapi_ticket + '&noncestr=' + nonce_str + '×tamp=' + timestamp + '&url=' + url1 // 用sha1加密 let signature = sha1(str) let data = { debug: false, appId: appid, timestamp: timestamp, nonceStr: nonce_str, signature: signature, } return ctx.body = packageRes(0, "", data) } catch (error) { } }
原文地址:https://www.cnblogs.com/zyulike/p/11812681.html
- Javascript跨域后台设置拦截
- 奇怪的登录问题及解决 (75天)
- Optional乱用Empty之No value present
- Java中ArrayList remove会遇到的坑
- Dagger2 入门解析
- Git 工作流的正确打开方式
- 如何从两个List中筛选出相同的值
- 【Windows编程】系列第八篇:创建通用对话框
- 使用dropwizard(3)-加入DI-dagger2
- 巧用shell生成数据库检查脚本 (74天)
- 【专业技术】OPENGL与EGL
- 在dropwizard中使用feign,使用hystrix
- 用python抓取淘宝评论
- 使用Dropwizard(2)-配置分类ConfiguredBundle
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux 日常操作
- 回顾|腾讯云 CFS 文件存储给 Serverless 云函数带来的业务新场景
- Apache NIFI Run Duration深入理解
- Controller services are daemons
- 动手体验JVM中Class对象的唯一性
- Java SPI机制
- Apache NIFI项目结构的类资源隔离机制
- Java类加载器
- Java反射原理
- 小谈WEB简史
- Java 常用验证方法(commons-validator,hutool)
- 类加载机制
- 使用R语言绘制string蛋白互作图
- R语言教程,去除重复的蛋白质、基因互作关系
- Python自学成才之路 with到上下文管理器