微信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. Cogs 12. 运输问题2(有上下界的有源汇最大流)

    运输问题2 ★★☆ 输入文件:maxflowb.in 输出文件:maxflowb.out 简单对比 时间限制:1 s 内存限制:128 MB 运输问题 [问题描述] 一个工厂每天生产若干商品,需运输到 ...

  2. Vue的学习--遇到的一些问题和解决方法（二）

    1.关于图片路径问题 1.关于图片路径问题 在.vue的html中可以直接使用相对路径,但是从浏览器后台可以看出,最后路径是自行做了替换的.如果需要在js文件中使用,则需要自己使用require进行替 ...

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

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

  4. 2018-2019-2 20165222《网络对抗技术》Exp9 Web安全基础

    1.实践过程记录 1.字符串型注入. 2.整数型注入 3.注入语句查看其他内容 4.xss是一种漏洞,这种漏洞允许用户输入脚本并且浏览器提交的时候不加编码.这种东西是最为流行并且有害的web应用的问题 ...

  5. 关于JAVA线程池-ThreadPoolExecutor

    1. 源码翻译 /* * * * * * * Written by Doug Lea with assistance from members of JCP JSR-166 * Expert Grou ...

  6. viewbag

    How does ViewBag in ASP.NET MVC work behind the scenes? https://stackoverflow.com/a/16950197/3782855 ...

  7. ab 压测

    Linux学习14-ab报错apr_pollset_poll: The timeout specified has expired (70007) 前言 使用ab压力测试时候出现报错apr_polls ...

  8. vue实现滚动条滚到相应高度触发动画的操作

    一.vue项目引入animate.css 第一步:在命令行中执行: npm install animate.css --save 第二步:引入及使用: main.js中: import animate ...

  9. python 设计模式之享元(Flyweight)模式

    #写在前面 这个设计模式理解起来很容易.百度百科上说的有点绕口. #享元模式的定义 运用共享技术来有効地支持大量细粒度对象的复用. 它通过共享已经存在的对橡大幅度减少需要创建的对象数量.避免大量相似类 ...

  10. 用html+css+js实现一个无限级树形控件

    https://blog.csdn.net/cc_fys/article/details/81284638 树形菜单示例: <!DOCTYPE html> <head> < ...