VUE开发微信公众号指定页面分享

最新推荐文章于 2024-07-15 15:23:04 发布

flee-lether

最新推荐文章于 2024-07-15 15:23:04 发布

阅读量1.4k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： web vuejs 微信公众号文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_23398171/article/details/105060213

最近使用VUE（hash模式）开发微信公众号页面分享时，遇到一个奇怪的问题，仅以此文记录。
最初实现的分享逻辑如下：

获取当前路径url，即location.href;
填充到微信分享API

const href = location.href;
updateAppMessageShareData(
    "title",
    "desc",
    "imgURL",
    href
);

分享给朋友后打开，Android跳转到公众号首页（部分手机跳转到指定页面，但不是很稳定），IOS可以跳转到指定页面。
在尝试各种解决方案后终于想明白了，Android手机上默认把hash值忽略了，具体原因不明。
那么既然是把hash值忽略了，那我不用hash不就行了，但是我要跳转到指定页面呀，重定向的方案就来了。
我把hash值当作一个参数，指定一个中间页，用原生的方式获取query然后再跳转回来。

中间页代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

flee-lether

关注关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue开发微信公众号调用相机和相册(上传到自己的服务器)

qq_47381208的博客

08-01

2112

vue开发微信公众号调用相机和相册(上传到自己的服务器)

记录vue开发微信公众号的问题

weixin_47783830的博客

03-29

545

最近在开发公众号网页，用的vue开发。此篇就记录开发中遇到的问题首先了解公众号开发的概念，其实就是h5的页面，只是需要管理人员配置给你。由于我只是单纯的开发，那些配置我也不是配置者，就不说了。应该跟小程序配置差不多，公司也不会要你去配置。 1。项目开发时，后台会给你定义一个网址，就是公众号网页的重定向地址：例如： http://xxx.com/?Api-Token=xxx&Mp-Appid=xxx#/user/console 这是我们的重定向地址页面,所以你在配置路由的时候，一定记得将项目首页

参与评论您还未登录，请先登录后发表或查看评论

vue微信分享的实现(在当前页面分享其他页面)

01-21

首先以分享给朋友为例 1、先看官方文档 wx.onMenuShareAppMessage({ title: '', // 分享标题 desc: '', // 分享描述 link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: '', // 分享图标 type: '', // 分享类型,music、video或link，不填默认为link dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空 success: function () { // 用户确认分享后

Vue微信公众号分享全过程

loading-world

09-18

2204

Vue关于微信分享的资料很少，记录一下本人开发的全过程，不足之处多多指点。 微信公众号的文档就不贴了。下载微信js-sdk 推荐使用npm安装,npm install jweixin-module --save 分享页面引用 var wx = require('jweixin-module') 后端签名接口（java spring boot 开发） controller @RequestMa...

vue做微信公众号分享,支付

weixin_33973609的博客

12-25

429

在前段时间做了一个微信公众号,因为我又是新手,没什么经验,拿起vue就开始,导致一坑再坑,简直阔怕!!!对于此次项目,我主要用到的是vue的整框架和必要的插件,但是我没用vuex,用vuex的话会方便很多很多 1.首先从认证获取openid说起; 因为我们后天也是第一次做微信公众号,导致大家都走了很多弯路,刚开始认证是由前端来转认证跳转,...

VueH5公众号分享到微信朋友圈或好友

qq_59626859的博客

11-21

1363

VueH5公众号分享到微信朋友圈或好友

如何使用vue开发公众号网页

杨振洲的博客

05-17

3794

通过vue-cli创建项目安装脚手架工具 npm install -g @vue/cli # OR yarn global add @vue/cli 创建一个项目 vue create water_project 关于移动的适配因为是移动端网页，所以需要做适配。网上有很多适配方案这里就不展开说了，主要说下本项目使用的方案是amfe-flexible结合rem来做的，是淘宝的一种解决方案。关于设计稿的单位px转换为rem使用的是postcss的postcss-pxtorem方案。其实用webp

微信公众号开发实现点击返回按钮就返回到聊天界面

08-31

本文分享了微信公众号开发实现点击返回按钮就返回到聊天界面的示例代码。需要的朋友一起来看下吧

vue3.0 开发微信公众号调用相机和相册(解决ios首次进入调用不了)

qq_39291270的博客

07-15

411

vue3开发微信公众号项目，调用jssdk：wx.chooseImage、wx.getLocalImgData，兼容ios

vue全局封装微信公众号分享模块

coldriversnow的专栏

05-26

367

1.新建一个文件夹，这里我以vxshare.js文件为例。tips:如果不知道微信JSDK使用的话，可点击。2.其他文件引入与使用。

用vue写的公众号

06-26

用打开命令提示行在里面输入npm install，然后npm run dev 运行就可以啦

Vue微信公众号网页分享的示例代码

10-15

主要介绍了Vue微信公众号网页分享的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

vue 分享给好友点击分享按钮_点击网页分享按钮，触发微信分享功能

weixin_39640090的博客

01-30

1945

微信公众平台开始支持前端网页，大家可能看到很多网页上都有分享到朋友圈，关注微信等按钮，点击它们都会弹出一个窗口让你分享和关注，这个是怎么实现的呢？今天就给大家讲解下如何在微信公众平台前端网页上添加分享到朋友圈，关注微信号等按钮。我们可以发现微信内嵌浏览器定义了一个私有 JavaScript 对象：WeixinJSBridge，通过操作这个对象的相关方法可以实现分享到微信朋友圈，和判断一个微信号的关...

【微信公众号网页项目】Vue+Spring Boot，微信公众号网页项目，授权微信并获取用户个人信息

分享初级全栈工程师日常琐碎心得，感谢关注

01-15

2989

【微信公众号网页项目】Vue+Spring Boot，微信公众号网页项目，授权微信并获取用户个人信息

vue 实现iframe跨域通信

sunlizhen的专栏

11-11

2073

父页面: <template> <div class="appStore"> <div> <el-row :gutter="20"> <el-col :span="6" style="text-align: center;" v-for="(item, index) in dataList"> <div class="grid-content bg-purple"> .

vue 项目如何使用微信分享接口

weixin_30740295的博客

12-12

398

首先做微信网页都要接入微信sdk；安装sdk npm install weixin-js-sdk --save 具体可以查看微信公众平台技术文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 引入sdk vue是单页面项目，比如你想要接入微信分享功能，分享功能在每个路由地址都要有，因...

Vue开发微信公众号调用微信JS-SDK的分享接口（实现微信公众号分享功能）

闲云野鸟的博客

01-31

1875

描述使用微信提供的分享功能，其实就是JSSDK使用，使用它提供的接口功能。可以先看下微信公众号开发文档，上面介绍的很详细。提供了那些功能，怎么去使用。 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#67 代码绑定域名这个不需要说了。引入js文件的话直接在Vue项目中找到index.html...

微信公众号之分享接口

youhebuke225的博客

09-15

2863

当我们点击右上角的三个点，就会有默认的分享分享后的卡片如下。

Vue H5微信分享功能实现

deary

07-27

5018

微信网页开发/JS-SDK说明文档概述微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。 JSSDK使用步骤可以详细查看说明文档分享接口请注意，不要有诱导分享等违规行为，对于诱导分享行为将永久回收公众号接口...

uniapp开发微信公众号教程

最新发布

02-26

### 如何使用 UniApp 开发微信公众号 #### 准备工作为了使开发顺利，在开始前需准备好必要的环境配置。确保已安装 HBuilderX 或其他支持 UniApp 的 IDE，并注册微信公众平台账号，完成相应认证流程。 #### 创建新项目启动HBuilderX并新建一个基于Vue框架的UniApp应用模板作为基础架构[^2]。 #### 配置 OAuth2.0 登录功能对于希望集成社交化分享或个性化服务的应用来说，通过OAuth协议来获取用户的公开资料是非常重要的一步。具体操作如下： - **设置回调页面域名**：进入微信公众平台后台管理界面中的“开发者中心”，按照指引设定合法的JS接口安全域名以及网页授权回调页域名为本地服务器地址或其他托管站点。 - **发起请求获得临时票据 (code)**：当用户访问带有特定参数链接时触发跳转至微信开放平台指定URL模式，该过程由前端负责构建携带必要字段（如appid、redirect_uri等）组成的GET请求发送给API网关；成功后浏览器会被重定向回预先定义好的路径同时附带`?code=CODE&state=STATE`形式查询字符串[^1]。 ```javascript // 示例代码片段用于展示如何处理返回的数据 const code = getUrlParam('code'); // 自定义函数解析URL参数提取Code值 if(code){ console.log(`Received authorization code:${code}`); }else{ alert("Failed to get the authorization code."); } ``` #### 调用微信 JSSDK 实现更多交互特性除了基本的身份验证外，还可以借助于WeChat JS-SDK进一步增强用户体验，比如自定义菜单按钮样式、上传图片视频等内容共享行为。以下是简化的接入步骤概述[^4]: ##### 步骤一：引入依赖库下载官方提供的 `jweixin-module` 插件包并将之添加到项目的根目录下，接着修改 `main.js` 文件以全局混入扩展方法以便后续调用。 ```bash npm install @dcloudio/uni-app-jweixin --save ``` ##### 步骤二：初始化 SDK 并注入权限签名在每次加载含有Webview容器组件之前都需要向后端申请有效的ticket令牌用来签署当前页面所需使用的各项能力列表，之后再利用这些信息填充wx.config()选项从而激活对应的功能模块。 ```javascript import wx from 'jweixin-module'; export function initWxJsSdk(configData) { wx.config({ debug: false, appId: configData.appId, timestamp: configData.timestamp, nonceStr: configData.nonceStr, signature: configData.signature, jsApiList: ['chooseImage', 'uploadImage'] // 只填所需的接口名称即可 }); } ```