微信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>

2.服务器配置（NodeJs版）

// 引用依赖

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 + '&timestamp=' + 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) {

  }

}

微信公众号对接JS-SDK接口 调用微信内置地图的更多相关文章

  1. 公众号第三方平台开发 教程六 代公众号使用JS SDK说明

    公众号第三方平台开发 教程一 创建公众号第三方平台 公众号第三方平台开发 教程二 component_verify_ticket和accessToken的获取 公众号第三方平台开发 教程三 微信公众号 ...

  2. 微信公众号开发C#系列-2、微信公众平台接入指南

    概述 微信公众平台消息接口的工作原理大概可以这样理解:从用户端到公众号端一个流程是这样的,用户发送消息到微信服务器,微信服务器将接收到的消息post到用户接入时填写的url中,在url处理程序中,首先 ...

  3. 微信公众号开发C#系列-12、微信前端开发利器：WeUI

    1.前言 通过前面系列文章的学习与讲解,相信大家已经对微信的开发有了一个全新的认识.后端基本能够基于盛派的第三方sdk搞定大部分事宜,剩下的就是前端了.关于手机端的浏览器的兼容性问题相信一直是开发者们 ...

  4. 微信公众号通过图片选取接口上传到阿里oss

    前言 之前写过一篇微信JS-SDK的使用方法,可进行参考 https://www.cnblogs.com/fozero/p/10256862.html 配置并调用公众号接口权限 1.配置权限微信公众号 ...

  5. 树莓派与微信公众号对接（python）

    一 内网穿透,让外网可以访问树莓派 二 树莓派对接微信 需要安装webpy和python-lxml git clonegit://github.com/webpy/webpy.git ln -s `p ...

  6. js 微信公众号网页用户授权，获取微信code，access_tocken,用户信息

    第一次做微信网页授权,过程有点艰难,主要是不知道redirect_uri的地址要怎么写,刚开始我以为就是授权结束后要跳转到的首页地址,于是写成了uri = 'http://18i194c049.ias ...

  7. 微信公众号支付之坑：调用支付jsapi缺少参数 timeStamp等错误解决方法

    这段时间一直比较忙,一忙起来真感觉自己就只是一台挣钱的机器了(说的好像能挣到多少钱似的,呵呵):这会儿难得有点儿空闲时间,想把前段时间开发微信公众号支付遇到问题及解决方法跟大家分享下,这些“暗坑”能不 ...

  8. 玩玩微信公众号Java版之一：配置微信公众平台服务器信息

    在进行微信公众平台开发前,前先做好准备工作,好了以后,我们可以开始啦!   第一.准备好服务端接口   定义一个http服务接口,主要分为如下几步:   1.创建一个servlet类,用来接收请求: ...

  9. 解决微信公众号授权登录和开放平台微信第三方应用授权登录获取到的用户Openid关联问题

    开发背景: 最近一段时间一直在做关于微信方面的网站应用开发,这段时间也收获的不少关于微信开发方面的开发技能,接触的比较多的主要有微信公众号和微信网站app第三方登录授权,以及微信会员卡,优惠券和扫描二 ...

  10. 微信公众号开发C#系列-1、微信公众平台注册

    微信公众号简介 微信公众号分为服务号.订阅号.企业号,订阅号可以个人申请,服务号和企业号要有企业资质才可以. 我们所说的微信公众号开发主要指的是公众号的账号类型,公众号的账号类型分为订阅号.服务号.企 ...

随机推荐

  1. 内存原理与PHP的执行过程

    一.内存结构 栈区:保存的是变量名(术语:引用),对于cpu来说,读写速度很快 堆区:存储“复杂”的数据,数组.对象.字符串(字符串比较特殊)等 数据段:又分为数据段全局区(用于存储简单的数据,如数字 ...

  2. List集合类

    1.1:  List.add方法——向集合列表中添加对象 public static void main(String[] args) { List<String> list=new Ar ...

  3. ZROI Day6比赛总结

    比赛还没结束而且我没有参加比赛就来这里了. T1 略 T2 设\(ans_d\)表示\(d|b_i\)的方案数(最后反演一下就可以) 设\(d\not|a_i\)的个数为\(l\)(可以\(O(n\l ...

  4. PHP全栈学习笔记25

    <?php /* *@Author: 达叔小生 **/ header("content-type:image/png"); //设置页面编码 $num = $_GET['nu ...

  5. Codeforces 1175G Yet Another Partiton Problem [DP，李超线段树]

    Codeforces 思路 首先吐槽一句:partiton是个什么东西?我好像在百度翻译里面搜不到呀qwq 发现不了什么性质,那就直接上DP吧.注意到DP可以分层,所以设\(dp_i\)表示当前层,分 ...

  6. TCP四次握手断开连接

    建立连接非常重要,它是数据正确传输的前提:断开连接同样重要,它让计算机释放不再使用的资源.如果连接不能正常断开,不仅会造成数据传输错误,还会导致套接字不能关闭,持续占用资源,如果并发量高,服务器压力堪 ...

  7. Linux网络编程四、UDP，广播和组播

    一.UDP UDP:是一个支持无连接的传输协议,全称是用户数据包协议(User Datagram Protocol).UDP协议无需像TCP一样要建立连接后才能发送封装的IP数据报,也是因此UDP相较 ...

  8. [TJOI2019]唱、跳、rap和篮球——NTT+生成函数+容斥

    题目链接: [TJOI2019]唱.跳.rap和篮球 直接求不好求,我们考虑容斥,求出至少有$i$个聚集区间的方案数$ans_{i}$,那么最终答案就是$\sum\limits_{i=0}^{n}(- ...

  9. Java 代码里乱打日志了，这才是正确的打日志姿势

    使用slf4j 使用门面模式的日志框架,有利于维护和各个类的日志处理方式统一. 实现方式统一使用: Logback框架 打日志的正确方式 什么时候应该打日志 当你遇到问题的时候,只能通过debug功能 ...

  10. TCP HTTP SOCKET之间的有什么关系

    网络由下往上分为 物理层.数据链路层.网络层.传输层.会话层.表示层和应用层. 通过初步的了解,我知道IP协议对应于网络层,TCP协议对应于传输层,而HTTP协议对应于应用层, 三者从本质上来说没有可 ...