微信小程序的转发分享功能
文章目录
- button组件的open-type="share"
- app.json
- pages/about/about.wxml
- pages/about/about.wxss
- pages/about/about.js
- 页面右上角的转发按钮
- app.json
- pages/about/about.wxml
- pages/about/about.wxss
- pages/about/about.js
- pages/home/home.wxml
- pages/home/home.wxss
- pages/home/home.js
微信小程序的转发分享功能，有两种实现方式：
- button组件
open-type="share"，点击按钮后，会触发Page.onShareAppMessage事件。 - 页面右上角菜单“转发”按钮，点击按钮后，也会触发
Page.onShareAppMessage事件。
button组件的open-type=“share”
代码涉及的文件有：
- app.json
- pages/about/about.wxml
- pages/about/about.wxss
- pages/about/about.js
button组件open-type="share"，点击该按钮，触发Page.onShareAppMessage事件。
app.json
{"pages": ["pages/about/about"],"window": {"navigationBarBackgroundColor": "#0149af","navigationBarTitleText": "首页","navigationBarTextStyle": "white"},"style": "v2","sitemapLocation": "sitemap.json"
}
pages/about/about.wxml
<view class="aboutContainer"><view class="content">极客是一群什么样的人？他们大智若愚而富有科学精神，对一切常识的东西天然反感；他们天生热爱探索和创造，对于跟随和人云亦云深恶痛绝；他们特立独行，从不自我设置禁区；他们信仰自由，对于人为的限制极其不屑并热衷于挑战权威；在工作中他们推崇化繁为简，相信设计的力量并追求产品美学……</view><button open-type="share">点我分享</button>
</view>
pages/about/about.wxss
.content{margin: 10rpx;padding: 10rpx;text-align: justify;line-height: 40rpx;background:#eee;color: #1a74f1;font-size: 24rpx;border-radius: 10rpx;margin-bottom: 10rpx;
}
pages/about/about.js
Page({})
页面右上角的转发按钮
首先，只有定义了 onShareAppMessage()，页面右上角菜单才会显示“转发”按钮。
然后，onShareAppMessage(Object object) 接收一个对象作为参数，该对象包含如下属性：
from，转发事件来源，string类型，有如下两个值："button"，通过点击页面内的button组件转发。"menu"，通过点击页面右上角转发菜单转发。
target，是一个对象。- 如果
from是"button"，则target是触发此次转发事件的button组件。 - 如果
from是"menu"，则target是undefined。
- 如果
最后，onShareAppMessage(Object object) 可以返回一个对象，用来自定义转发内容。返回的对象可以包含如下属性：
title，转发标题，默认是当前小程序的名称。path，转发路径，必须是以/开头的完整路径，默认是当前页面的path。imageUrl，自定义图片路径，可以是本地图片，也可以网络图片，默认是当前页面的快照截图。
代码涉及的主要文件有：
- app.json
- pages/about/about.wxml
- pages/about/about.wxss
- pages/about/about.js
- pages/home/home.wxml
- pages/home/home.wxss
- pages/home/home.js
app.json
{"pages": ["pages/about/about","pages/home/home"],"window": {"navigationBarBackgroundColor": "#0149af","navigationBarTitleText": "首页","navigationBarTextStyle": "white"},"style": "v2","sitemapLocation": "sitemap.json"
}
pages/about/about.wxml
<view class="aboutContainer"><view class="content">极客是一群什么样的人？他们大智若愚而富有科学精神，对一切常识的东西天然反感；他们天生热爱探索和创造，对于跟随和人云亦云深恶痛绝；他们特立独行，从不自我设置禁区；他们信仰自由，对于人为的限制极其不屑并热衷于挑战权威；在工作中他们推崇化繁为简，相信设计的力量并追求产品美学……</view><button open-type="share" id="share-btn">点我分享</button>
</view>
pages/about/about.wxss
.content{margin: 10rpx;padding: 10rpx;text-align: justify;line-height: 40rpx;background:#eee;color: #1a74f1;font-size: 24rpx;border-radius: 10rpx;margin-bottom: 10rpx;
}
pages/about/about.js
Page({onShareAppMessage({from,target}){console.log(from,target);let myObj = {title:`来自${from}的转发,AITO邀您试驾`,path:"/pages/home/home",imageUrl:"/static/images/car.jpg"}return myObj;}
})
pages/home/home.wxml
<view class="homeContainer"><view class="content" wx:for="{{contentList}}" wx:key="{{index}}">{{item}}</view>
</view>
pages/home/home.wxss
.homeContainer{padding: 20rpx;
}
.content{width: 100%;height: 600rpx;line-height: 600rpx;text-align: center;background:#eee;color: #1a74f1;font-size: 64rpx;border-radius: 10rpx;margin-bottom: 10rpx;
}
pages/home/home.js
Page({data:{contentList:[]},onLoad(){const contentList = this.getDataFromServer();this.setData({contentList});},getDataFromServer(){let result = ["肯德基宅急送","云海肴","西贝莜面村","眉州东坡","华莱士"];return result;}, onReachBottom(){console.log("on reach bottom");console.log("上拉触底，获取数据追加列至列表中");const appendData = ["其他","其他","其他","其他","其他"];const newContentList = [...this.data.contentList,...appendData];this.setData({contentList:newContentList});},onPullDownRefresh(){console.log("on pull down refresh");console.log("下拉刷新，获取最新列表数据");this.getDataFromServer();}
})
微信小程序的转发分享功能相关推荐
- 微信小程序实现转发分享功能（好友朋友圈）
微信小程序分享 微信小程序已经支持分享到好友和朋友圈功能(安卓),用户在朋友圈打开分享的小程序页面,并不会真正的打开小程序,而是进入一个"小程序单页面模式"的页面: 微信小程序文档 ...
- 微信小程序wechat的分享功能
微信小程序的分享功能 2020/07/28 声明:必须为button按钮 wxml <button data-name="shareBtn" open-type=" ...
- 小程序一键分享html5,H5手机网站封装微信小程序并实现分享功能的教程
通过本文教程可以实现将H5手机网站直接封装成微信小程序,并且支持分享功能.但不支持微信支付功能. 说明:手机站域名必须开启https模式 第一步: 微信开发者工具中创建小程序,填写你自己的小程序App ...
- 微信小程序点击分享功能
[html部分] < view class = "usermotto carDesc carDesc1"> <!-- <button class=" ...
- 微信小程序全局添加分享功能
在app.js中重新分享方法 App({onLaunch() {this.overShare();},//重写分享方法overShare: function () {//监听路由切换//间接实现全局设 ...
- 微信小程序—页面内分享按钮用图标代替
微信小程序-页面内分享按钮用图标代替 前言 代码 效果图 前言 张小龙不知道出于什么原因将打开客服会话.触发用户转发.打开授权设置页.打开"意见反馈"页面等功能全都挂载到butto ...
- php 微信小程序 循环 多选,微信小程序实现多选功能
本文为大家分享了微信小程序实现多选功能的具体代码,供大家参考,具体内容如下 代码: {{num + 1}}/{{quesyion.length}}{{question[num][0]}} A {{qu ...
- 微信小程序将支持分享到朋友圈；美团入局社区团购；Kotlin 1.4-M3 发布 | 极客头条
整理 | 屠敏 头图 | CSDN 下载自东方 IC 「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦,快来看今天都有哪些值得我们技术人关注的重要新闻吧. 一分钟 ...
- 微信聊天自动解析html文本,微信小程序纯文本实现@功能
前言 大家肯定对@功能不陌生,在如今的各大社交软件中它是一种不可或缺的功能.实现@人的功能并不复杂,只需将@人员的id传给后端,后端下发通知即可.主要的复杂点在于一键删除功能与变色功能,web端可以使 ...
- 【源码分享】一键打开禅意生活——电子木鱼微信小程序源码分享
为大家推荐一个在线的AI聊天:魔术AI-8080n点cn界面简洁精美,免费点开即用 在快节奏的现代生活中,我们需要一种方式来减轻压力和焦虑,让我们的身心得到放松和平静.电子木鱼微信小程序是一款专门为人 ...
最新文章
- Hystrix之外健壮微服务的新选择：Sentinel 发布首个生产版本
- Python 数据分析包：pandas 基础
- grep与sed批量处理多个文件中的字符串的方法
- C#的static,interface，virtual,abstract,override的区别用法
- 一个程序掌握C++带参构造函数、带有默认参数的构造函数【C++类的经典使用案例】
- x86_64平台编译链接汇编程序
- 电脑双系统--我想体验不一样的感觉
- 为了方便手机观看，博文最好36个字一行
- java根据微信小程序code获取用户openId
- 网吧会员管理系统c语言,常用的网吧会员管理系统哪个比较好|纳客软件
- ubuntu 添加证书
- 【win7提速新方法：禁用禁用eSATA接口】
- 微信小程序订阅消息定时发送消息
- 子组件向父组件传参的几种方法
- 【C语言】打印乘法口诀表
- MongoDB循序渐进之[入门]
- 经典好文！java保留两位小数不四舍五入
- 计算机配置中什么表示硬盘,电脑硬盘的分类介绍 硬盘中的Master和Slave代表什么意思...
- 形容linux技术视野的词,火焰图：全局视野的Linux性能剖析
- 开发一个游戏项目，需要哪些技术人员