微信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. 2.设计模式-Abstract Factory 抽象工厂模式

    大神勿喷,不对的地方请指出来,学笔记而已. 解决的问题:应对多系列对象构建的变化或多系列(例如:崎岖的山路和平坦的马路属于一个系列) 不断的变化的创建. 使用场景:对象不变(比如有3个对象 " ...

  2. 四川大学第二届SCUACM新生赛（同步赛）题解

    周末没事干,就不要脸地去一边吃饭一边看学弟沈阳拿银一边水了个比赛,水都水了,简单写个题解. 比赛链接 A,丁姐姐喜欢Fibonacci.签到1,斐波那契%3 1 1 0 1 1 0 1 1 0..., ...

  3. Python里面如何拷贝一个对象？（赋值，浅拷贝，深拷贝的区别）

    答:赋值(=),就是创建了对象的一个新的引用,修改其中任意一个变量都会影响到另一个. 浅拷贝:创建一个新的对象,但它包含的是对原始对象中包含项的引用(如果用引用的方式修改其中一个对象,另外一个也会修改 ...

  4. FOI冬令营 Day 3

    目录 T1.签到题(sort) 传送门 Code T2.送分题(queue) 传送门 Code T3.简单题(game) 传送门 Code 咕咕咕 T1.签到题(sort) 传送门 原题:LOJ 27 ...

  5. Python接口自动化测试（一）什么是接口？

    接口:API(Application Programming Interface)即应用程序接口.你可以认为API是一个软件组件,或是一个Web服务与外界进行交互的接口. 1.从功能层面上 可以将接口 ...

  6. centos6下安装docker

    安装docker对内核版本的要求很高,需要内核3.10以上. 一.docker卸载 查看内核版本: 如果不升级内核到3.10安装docker,后面会有很多奇怪的问题,像我就是拉取不到镜像. 以下我是r ...

  7. Leetcode题 257. Binary Tree Paths

    Given a binary tree, return all root-to-leaf paths. For example, given the following binary tree: 1 ...

  8. @Deprecated注解

    它的作用是对不应该再使用的方法添加注解,当编程人员使用这些方法时,将会在编译时显示提示信息,它与javadoc里的@deprecated标记有相同的功能,准确的说,它还不如javadoc @depre ...

  9. osgViewer::Viewer::Windows

    osg自带窗口去掉边框 #ifdef _WIN32 #include <Windows.h> #endif // _WIN32 #include<iostream> #incl ...

  10. QML小例子【QML工程里信号与槽】

    1.效果 代码参考B站视频:https://www.bilibili.com/video/av36584062 功能:点击左边,会发出信号,右边会有个颜色动画,然后计数+1 2.分析: 一共有两个对象 ...