<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title></title>

    </head>

    transparent

    <body>

        <script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>

        <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            //            配置公总号自定义分享

            //            需要引入jauery

            $.ajax({

                method: 'GET',

                url: window.BASE_URL + 'api/v1/sharding/get',

                contentType: 'application/x-www-form-urlencoded',

                async: false,

                dataType: "json",

                data: {

                    url: location.href.split('#')[],

                },

                success: function(data) {

                    console.log(data.data)

                    var signatures = data.data

                    wx.config({

                        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

                        appId: signatures.appid, // 必填，公众号的唯一标识

                        timestamp: ((signatures.timeStamp).toString()).substring(, ), // 必填，生成签名的时间戳<?= $data['timestamp']?>

                        nonceStr: signatures.nonce_str, // 必填，生成签名的随机串<?= $data['noncestr']?>

                        signature: (signatures.signature).toLowerCase(), // 必填，签名<?= $data['signature']?>

                        jsApiList: ['openLocation', 'getLocation', 'translateVoice',

                            'onMenuShareTimeline',

                            'onMenuShareAppMessage',

                            'onMenuShareQQ',

                            'onMenuShareWeibo',

                            'onMenuShareTimeline',

                            'onMenuShareQZone'

                        ] // 这里先声明我们要用到打开地图的JS接口

                    });

                }

            });

            wx.ready(function() {

                wx.checkJsApi({

                    jsApiList: ['chooseImage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,

                    success: function(res) {

                        // 以键值对的形式返回，可用的api值true，不可用为false

                        // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}

                    }

                });

                var shareUrl = 'https://www.gzkny.com/h5/ziyemian/souquan.html?openid=' + openid;

                var obj = { //朋友圈

                    title: '康尼雅口腔医院', // 分享标题

                    desc: '', // 分享描述

                    link: shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致

                    // 该链接是重定向链接，因为需要获取用户code，但是该链接又无法直接写微信获取code的链接，

                    // 所以需要点击后重新加载新的页面，来实现重定向，重新打开获取code的微信链接，实现获取用户信息的功能；

                    imgUrl: 'https://i.loli.net/2019/05/29/5ceded0eaa03e44687.jpg',

                    fail: function(res) {

                        alert(JSON.stringify(res));

                    }

                };

                var obj1 = { //好友

                    title: '康尼雅口腔医院', // 分享标题

                    desc: '', // 分享描述

                    link: shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致

                    // 该链接是重定向链接，因为需要获取用户code，但是该链接又无法直接写微信获取code的链接，

                    // 所以需要点击后重新加载新的页面，来实现重定向，重新打开获取code的微信链接，实现获取用户信息的功能；

                    imgUrl: 'https://i.loli.net/2019/05/29/5ceded0eaa03e44687.jpg', // 分享图标

                    fail: function(res) {

                        alert(JSON.stringify(res));

                    }

                };

                // 2.1 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口

                wx.onMenuShareAppMessage(obj1);

                // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口

                wx.onMenuShareTimeline(obj);

                // 2.3 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口

                wx.onMenuShareQQ(obj);

                // 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口

                wx.onMenuShareWeibo(obj);

                // 2.5 监听“分享到QZone”按钮点击、自定义分享内容及分享接口

                wx.onMenuShareQZone(obj);

                // 7.2 获取当前地理位置

                wx.getLocation({

                    type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'

                    success: function(res) {

                        var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90

                        var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。

                        var speed = res.speed; // 速度，以米/每秒计

                        var accuracy = res.accuracy; // 位置精度

                        var result = []

                        result.push(longitude)

                        result.push(latitude)

                        result = JSON.stringify(result);

                        localStorage.setItem("result", result);

                        longg()

                    }

                });

            });

        </script>

    </body>

</html>

微信公众号h5页面自定义分享的更多相关文章

  1. 微信公众号h5页面alert去掉域名

    h5页面内嵌到微信公众号提示信息alert的时候会显示域名,去掉域名显示重写alert方法: window.alert = function(name){ var iframe = document. ...

  2. 微信公众号 H5页面 支付注意细节

    1.   当秘钥(AppSecretApplets) 有问题时注意是不是已经被重置过了,此时要注意获取最新的秘钥: 2.   调试时后端的东西要放在线上https 请求 不然在手机上测试时 会被拦截: ...

  3. h5跳转微信公众号关注页面

    最近在做h5项目,有个需求是如果用户没有关注公众号,需要引导用户跳转至微信公众号关注页面 制作一个链接,点击该链接跳转到公众号关注页面. 1.从公众平台登进入公众号 2.点击开发>>开发者 ...

  4. 公众号H5页面接入微信登录流程

    公众号H5页面接入微信登录流程 源码地址 https://gitee.com/szxio/h5_weixin 起步 首先创建一个项目,我们采用uni-app来作为我们的前端框架 环境安装 全局安装vu ...

  5. 微信内 H5 页面自定义分享

    起源: 最近公司在做一个活动的h5页面,在微信内打开时需要进行微信授权,然后后端会重定向到这个页面并且携带了一些参数(openid等).问题是点击微信的原生分享时,会把携带的这些参数一起分享出去,等于 ...

  6. appium操作微信公众号H5 web页面

    安卓微信公众号的H5页面是webview,一般操作需要切换context. 在执行如下步骤,就能直接像识别native样识别webview 1.代码追加: ChromeOptions options ...

  7. 微信公众号H5支付遇到的那些坑

    简史 官方文档说的很清楚,商户已有H5商城网站,用户通过消息或扫描二维码在微信内打开网页时,可以调用微信支付完成下单购买的流程. 当然,最近微信支付平台也加入了纯H5支付,也就是说用户可以在微信以外的 ...

  8. 微信公众号H5支付

    微信支付说明1.统一下单接口 统一支付接口: url: https://api.mch.weixin.qq.com/pay/unifiedorder 目的:通过此接口来创建预支付订单,获取订单支付需要 ...

  9. vue中通过WeixinJSBridge关闭微信公众号当前页面，返回微信公众号首页

    之前有个需求,点击菜单进入到微信公众号模块,然后点击返回的时候不知道到哪里去,后来觉得点返回的时候直接关闭页面,但是window.close()并不能关闭页面,然后经过查找资料,发现通过以下方法可以 ...

随机推荐

  1. 2019-暑假作业-Java语言程序设计

    本文于2017年创建,最后更新2019-07-16 任务列表 1.学会使用Markdown做笔记 本篇随笔就是使用的Markdown语法.养成做笔记的习惯! 参考资料: 极简MarkDown排版介绍( ...

  2. centos 普通用户 和 root 相互切换方法

    root 用户切换为普通用户 :用 login -f username (加 -f 不用输入密码)例如普通用户的用户名为hadoop,这里就是 login -f hadoop 普通用户切换为root用 ...

  3. Web Worker 使用教程【转】

    原文:http://www.ruanyifeng.com/blog/2018/07/web-worker.html 一.概述 JavaScript 语言采用的是单线程模型,也就是说,所有任务只能在一个 ...

  4. Java性能分析神器-JProfiler详解（转）

    前段时间在给公司项目做性能分析,从简单的分析Log(GC log, postgrep log, hibernate statitistic),到通过AOP搜集软件运行数据,再到PET测试,感觉时间花了 ...

  5. android: Android水波纹点击效果

    Android API 21及以上新增了ripple标签用来实现水波纹的效果.我们可以通过设置ripple背景来实现一些View点击效果. 该水波纹效果有两种:一种是有界的(点击后类似于一个矩形向四周 ...

  6. Docs-.NET-C#-指南-语言参考-预处理器指令：#pragma warning（C# 参考）

    ylbtech-Docs-.NET-C#-指南-语言参考-预处理器指令:#pragma warning(C# 参考) 1.返回顶部 1. #pragma warning(C# 参考) 2015/07/ ...

  7. Flutter 介绍、运行环境

    Flutter 是谷歌公司开发的一款开源.免费的移动 UI 框架,可以让我们快速的在 Android 和iOS 上构建高质量 App.它最大的特点就是跨平台.以及高性能. Flutter 基于谷歌的 ...

  8. C/C++如何监测内存泄漏

    C/C++如何监测内存泄漏 C/C++内存泄漏及检测 内存溢出就是内存越界.内存越界有一种很常见的情况是调用栈溢出(即stackoverflow),虽然这种情况可以看成是栈内存不足的一种体现.例如:递 ...

  9. Java中字符串操作的基本方法总结：

    1.字母大小写转换: package com.imooc; public class SortDemo { public static void main(String[] args) { char ...

  10. linux普通用户添加root权限

    新增一个普通用户并进入该用户: [root@VM_0_7_centos ~]# groupadd mall [root@VM_0_7_centos ~]# useradd mall -m -d /ho ...