微信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. jQuery网页加载的不同方式

    一.window.onload 代码是从上而下执行的,通过window.onload可以使事件在页面加载完毕再执行 注意:window.onload事件多个只会执行最下面的一个,前面的会被覆盖 < ...

  2. gcc/g++ 链接库的编译与链接

    GCC编译步骤 gcc -E t1.c -o t1.i 预处理 gcc -S t1.i -o t1.s 转成汇编语言 gcc -c t1.s -o t1.o 转成机器码 gcc t1.o -o t1. ...

  3. Selenium操作Chrome模拟手机浏览器

    目录 使用指定设备 使用自定义设备 在使用Chrome浏览网页时,我们可以使用Chrome开发者工具模拟手机浏览器,在使用Selenium操作Chrome时同样也可以模拟手机浏览器.主要有以下两种用途 ...

  4. UOJ#467. 【ZJOI2019】线段树 线段树,概率期望

    原文链接www.cnblogs.com/zhouzhendong/p/ZJOI2019Day1T2.html 前言 在LOJ交了一下我的代码,发现它比选手机快将近 4 倍. 题解 对于线段树上每一个节 ...

  5. Cesium中的坐标系及转换

    在我们开始学习Entity之前,我们首先需要先学习下Cesium中的坐标系,Cesium中有多个坐标系,在进行添加Entity时经常会使用到. 一.坐标系介绍 我们先来列举下Cesium中的坐标系:W ...

  6. Cesium入门-1-展示一个地球

    Cesium 官网教程地址 https://cesium.com/docs/tutorials/getting-started//tutorials/getting-started/ 第一个程序代码: ...

  7. zabbix 定义触发器，并使用邮件，微信消息报警。

    触发器可根据监控项获取到的值来进行一些操作,如监控项获取到的values为0,触发器可判断为正常,如果获取到了1,就触发报警. 定义报警方式比较简单,但是用shell脚本实现起来,总是有格式问题,所以 ...

  8. 使用notepad++插件远程编辑linux下的配置文件

    目录 1.安装插件管理器(Plugin Manager) 2.安装NppFTP 3.使用nppFTP连接远程linux服务器 1.安装插件管理器(Plugin Manager) 如果没有则需要安装 3 ...

  9. thymeleaf中double/float格式化,四舍五入显示两位小数

    private Float balance; 代码: <span class="A124_balance_num" th:text="${#numbers.form ...

  10. Python - Django - 作者表多对多关联书籍表

    models.py 代码: from django.db import models # Create your models here. # 出版社 class Publisher(models.M ...