步骤一：绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

备注：登录后可在“开发者中心”查看对应的接口权限。

配置的规则：

步骤二：引入模块

下载模块

npm install weixin-js-sdk --save

引用

import wx from "weixin-js-sdk";

步骤三：通过 config 接口注入权限验证配置

wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: config.appId, // 必填，公众号的唯一标识timestamp: config.timestamp, // 必填，生成签名的时间戳nonceStr: config.nonceStr, // 必填，生成签名的随机串signature: config.signature, // 必填，签名jsApiList: ['checkJsApi',// 'onMenuShareTimeline',//旧// 'onMenuShareAppMessage',//旧'updateAppMessageShareData','updateTimelineShareData'], // 必填，需要使用的JS接口列表
});

配置参数的获取途径是通过接口传当前页面的url给后台，需要过滤掉#后面的链接，不然部分手机会出现分享错误的情况
调试的时候把debug设置为true

步骤四：设置分享信息

1.4之前的版本即将废弃，我们这边用最新方法。这边是预设分享信息，需要在用户点击分享按钮前设置

wx.ready(function () {      //需在用户可能点击分享按钮前就先调用//自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）wx.updateTimelineShareData({ title: '', // 分享标题link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致imgUrl: '', // 分享图标success: function () {// 设置成功}})//自定义“分享到朋友圈”及“分享到 QQ 空间”按钮的分享内容（1.4.0）wx.updateTimelineShareData({ title: '', // 分享标题link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致imgUrl: '', // 分享图标success: function () {// 设置成功}})
});

步骤五：分享

制作一个蒙版，在用户点击分享按钮的时候引导用户点击右上角的三个点打开弹窗进行分享

uniapp h5 微信分享相关推荐

Vue开发微信H5 微信分享签名失败问题解决方案
Vue开发微信H5 微信分享签名失败问题解决方案参考文章: (1)Vue开发微信H5 微信分享签名失败问题解决方案 (2)https://www.cnblogs.com/golddemon/p/94 ...
h5 微信分享和踩坑指南
文章目录思路踩坑集锦链接不能直接作用与分享 url 参数不能携带特殊字符,比如花括号 "{}" 代码实现思路 h5 微信分享的官方文档在这里,如果链接挂了,可以按照一下路 ...
uniapp,h5微信如何分享页面，完整设置分享链接图片简介
这是分享完成的效果链接图片都修改过了,下面给大家介绍如何实现该功能首先第一步 var wx = require('jweixin-module'); 第二步,微信分享你一定要主动去触发,根据后台给 ...
对hash签名失败_详解Vue开发微信H5微信分享签名失败问题解决方案
关于Vue中路由使用history模式,开发微信H5页面分享时在安卓上签名有效成功,但是在IOS设备上一直报错签名失效问题问题描述:在Vue开发过程中,路由使用History模式下,在使用微信分享时 ...
H5微信分享朋友、朋友圈、QQ
一.微信分享 1.准备工作 APPID公众号id.申请好友分享接口.ip白名单.js接口安全域名设置(必须是通过备案).要先登录微信公众平台进入"公众号设置"的功能设置里填写&qu ...
uniapp h5 微信打开双标题处理
uniapp h5 在微信内打开双标题的问题解决办法在page.json文件下将 globalStyle 下的 navigationStyle 设置为 "custom" 即可解 ...
（拿走不谢）H5微信分享时，在苹果手机分享一直不行，公开微信分享完整工具，以及微信地图
做微信分享时,在苹果手机分享一直不行,就尝试监听URL变化,发现不行.后来用刷新页面解决了. watch: { $route(to, from) { /** * route是异步改变的,所以,在cre ...
uniApp配置微信分享 uniApp跳转微信小程序
最近在做uniApp时需要跳转微信小程序进行支付,以为和跳转支付宝小程序支付一样简单结果让我发狂,跳转微信代码其实很简单就是下面这一段,但是要配置一大推东西提示:plus为App端默认的系统参数,不 ...
H5微信分享接口开发JS-SDK PHP［附源码］
背景 H5开发中几乎所有项目都要用到自定义分享,见过的分享接口有php引入和ajax调用两种,使用不方便且对代码环境有要求.故共享一版可通过javascript文件引入方式来实现自定义分享的接口(这是 ...
uniapp实现微信分享
在 uniapp 中实现微信分享具体属性请参考官方文档 uniapp官网 onShareAppMessage(res) { //res参数可判断该分享的事件源if (res.from === 'bu ...

uniapp h5 微信分享

步骤一：绑定域名

步骤二：引入模块

步骤三：通过 config 接口注入权限验证配置

步骤四：设置分享信息

步骤五：分享

uniapp h5 微信分享相关推荐

最新文章

热门文章