mpvue小程序开发（十一）：分享转发

最新推荐文章于 2022-04-07 18:06:38 发布

你所有承诺

最新推荐文章于 2022-04-07 18:06:38 发布

阅读量1.7k

点赞数

分类专栏：小程序 mpvue vue js 文章标签： mpvue 微信小程序分享图片 mpvue 分享图片 mpvue 小程序分享图片小程序分享图片 mpvue 小程序开发

本文链接：https://blog.youkuaiyun.com/stronglyh/article/details/97615610

版权

js 同时被 3 个专栏收录

38 篇文章

订阅专栏

vue

14 篇文章

订阅专栏

mpvue

13 篇文章

订阅专栏

本文详细介绍了小程序中实现页面分享的方法，包括按钮绑定分享功能、添加默认分享方法及自定义分享内容的具体步骤。通过实例展示了如何设置分享标题、路径及图片，帮助开发者轻松掌握小程序分享技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们把小程序开发完了，想分享一个页面，那么如何操作呢

一：给按钮绑定分享功能

<button open-type="share" class="cu-btn bg-green lg">邀请</button>

嗯，如上，添加 open-type="share"，表示分享

二：添加分享方法

如果添加方法，则默认截图是分享所在的功能页面，高宽5：4

三：自定义方法

onShareAppMessage: function(res) {
return { title: 'vue论坛',
path: '/pages/index/index?goods_id=' + wx.getStorageSync("goods_id"), 
imageUrl:'https://www.vue-js.com//public/images/vue.png'
 }}

点击按钮出现如下图片：

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

你所有承诺

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

解决mpvue小程序分享到朋友圈无效问题

代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。

07-17

1230

手动修改一下mpvue这个包，在node_modules里面找到mpvue在index里面搜索下onShareAppMessage找到 // 用户点击右上角分享 onShareAppMessage: rootVueVM.$options.onShareAppMessage ? function (options) { return callHook$1(rootVueVM, 'onShareAppMessage', options); } : null, 在这一段代码下面添加一个处理就可以了 //

在小程序/mpvue中使用flyio发起网络请求的方法

10-18

在小程序和基于Vue.js的框架如mpvue中，发起网络请求是应用程序不可或缺的一部分。传统的HTTP请求库往往只能在特定环境下工作，例如浏览器或Node.js，但在多端开发中，如微信小程序、Weex、React Native等，需要一个...

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

vue项目中实现的微信分享功能示例

01-21

本文实例讲述了vue项目中实现的微信分享功能。分享给大家供大家参考，具体如下： /* 微信分享 */ Vue.prototype.wechatShare = (shareData) => { let resource = { title: '随我心愿！', desc: '体验优质服务', link: 'https://www.abc.cn/', img: 'http://huoche.7234.cn/images/jb51/abnprpojuhp.jpg' } let obj = Object.assign({}, resource, shareData) let p

mpvue关于小程序的转发给好友

xin的博客

04-29

2006

这里是实现分享的按钮，按照小程序的规定，必须用到button标签和open-type=“share” 属性 <button open-type="share" class="tis desc col999 lin50 tu dja"> <img :src="wxhy">微信好友 </button&gt...

Vue开发小程序之页面分享错误小记录

m0_54468696的博客

03-23

187

## Vue开发小程序分享好友方法

小程序分享功能实现_mpvue框架下小程序分享朋友圈功能实现

weixin_34803466的博客

01-15

488

点击上方蓝字可以订阅哦分享朋友圈很适合内容型小程序，本文介绍下该功能在mpvue框架下的使用。本文小程序码基础库要求基础库需要2.11.3版本以上设置分享状态需同时允许两个设置设置允许“发送给朋友”(shareAppMessage)设置允许“分享到朋友圈”(shareTimeline)mounted() { wx.showShareMenu({ menus: ['shareAppM...

mpvue框架下小程序分享朋友圈功能实现

薛定喵君的博客

07-19

2271

记一下小程序分享朋友圈功能的实现分享朋友圈很适合内容型小程序，所以就在博客小程序里加了这个功能(可能也用不到????) 基础库要求设置分享状态真机效果注意事项错误处理参考资料# 基础库要求基础库需要2.11.3版本以上目前仅支持安卓 # 设置分享状态需同时允许两个设置设置允许“发送给朋友”(shareAppMessage) 设置允许“分享到朋友圈”(shareTimeline) 注意：事件处理...

mpvue技术实现的豆瓣电影微信小程序开发教程

- mpvue是一个使用Vue.js开发微信小程序的前端框架，它将Vue.js的开发体验带给了小程序开发。 - 它允许开发者利用Vue.js的语法和特性来构建小程序页面和组件，同时提供了与小程序原生开发兼容的API。 - mpvue基于...

使用mpvue+VantUI+flyio开发小程序实战指南

在小程序开发中使用Vant Weapp，可以快速构建美观且功能齐全的应用界面。安装Vant Weapp，需要克隆其仓库，将dist文件夹放入项目静态资源目录，引入所需组件，并在页面中使用。 3. **Fly.io**：Fly.js是一个轻量级...

:scroll:meEdu微信小程序。(meedu wxapp)

01-20

A Mpvue wxApp for meEdu ... 升级了Mpvue2.0理论支持支付宝，百度，头条小程序 添加公众号关注组件（配置：）规划评论优化项目优化配置化结构 api core server.js // http封装 artic

小程序分享功能

weixin_57456178的博客

12-16

819

在软件开发中，经常会被用到的功能之一：分享----悄悄咪咪的献给小伙伴 onShareAppMessage（）这个函数就是在分享的时候必须要用到的钩子：分享跳转的页面这里我的分享是封装的组件，大伙使用的时候要看清楚了哦~ father.vue 父组件中申明相对应的参数 data (){ return{ share: { sharehrefTitle: '', // 分享标题 shareImg: '', // 分

mpvue 微信小程序 显示转发按钮

solocao的专栏

02-15

1388

在js中定义 showShareMenu 函数，页面右上角就会出现转发的按钮。官方文档 https://developers.weixin.qq.com/miniprogram/dev/api/share.html 具体想在哪个页面增加转发的按钮，就添加下面的代码 mounted() { wx.showShareMenu(); }, 这只是最简单的增加一个转发按钮，更多转发功能，后面遇到再更...

mpvue分享小卡片

Follow_the_heart的博客

01-17

855

准备一个按钮 <button class="share_button" id="shareBtn" open-type="share" type="primary">分享</button> 在与methods方法同级的下面写上onShareAppMessage方法 // 转发 onShareAppMessage: function (res) {

小程序Mpvue全站前后端实力首导开发

qq_42702947的博客

07-17

306

课程目录第1回教程介绍 1-1 教程介绍 1-2 github 获取源码 1-3 github 桌面版简单管理代码 ...

⑥mpvue 很基础的小程序页面搭建（vuex管理状态、实现收藏和分享功能）

一个努力学习的程序猿

05-31

977

mpVue主页面部分的搭建本人是个新手，写下博客用于自我复习、自我总结。如有错误之处，请各位大佬指出。学习资料来源于：尚硅谷当我们初始化项目后，要编写我们自己代码就要把 src里的文件清空。（因为配置的原因，项目的构建就会去找src里的文件。当然如果不觉得麻烦，也可以去build里的webpack.base.conf中修改源文件路径）主页面部分的搭建在src中，先建好app.vue和main.js。 app.vue <script> export default {

mpvue开发小程序分享朋友圈无法自定义标题解决方法

Admans的专栏

01-08

1070

在node_modules里面找到mpvue，手动修改一下mpvue这个包下的index.js文件 // 用户点击右上角分享到朋友圈 onShareTimeline: rootVueVM.$options.onShareTimeline ? function (options) { return callHook$1(rootVueVM, 'onShareTimeline', options); } : null, 找到LIFECYCLE_HOOKS，新增加 'on...

微信小程序分享链接及分享朋友圈，及mpvue无法指定分享名的bug修复方法

weiqiang915的博客

04-07

1495

分享链接参数携带： <button open-type="share" hover-class="none">分享</button> onShareAppMessage: function (res) { if (res.from === 'button') { // 来自页面内转发按钮 wx.showLoading(); return new Promise((resolve, reject) => { wx

mpvue点击按钮转发引起的坑

Lschange的博客

11-07

4046

项目中用任务得金币的功能，用户通过转发分享，被分享的用户登录并且浏览后，分享的用户能得到相应的金币，并且点击不同的列表，分享的path，title，以及图片也是不一样的，引发的问题，我在onShareAppMessage回调函数中拿不到数据原生小程序可通过一下方法进行解决 <button open-type="share" class="share_btn" data-a="12"&...

对mpvue的一点心得

shichong123的博客

06-25

5256

1.登录并获取用户信息小程序官方做了一些调整，需要用户主动授权，我用了一个按钮来让用户点击授权。页面上为：data里定义一些变量：在methods里定义获取用户信息的函数：然后就可以在mounted里面调用了。2.新增页面的时候，要注意，main.js里的东西不要动，新增页面之后，要执行 npm run dev ，重新运行一下代码。3.请求接口，我用的是flyio，现在我也不明白为什么，看网上很多...

mpvue小程序开发框架：Javascript源码设计解析

2. mpvue: mpvue是一个使用Vue.js开发小程序的前端框架，它允许开发者利用Vue.js的开发体验来构建小程序，同时也可以利用Vue.js的生态系统。mpvue支持Vue.js的所有特性，并且可以在小程序中实现组件化开发。 3. 小...