微信小程序封装分享与分销功能
在微信小程序中,可以很简单的分享一个页面,比微信H5简单多了,然而,分享出去的页面(也叫卡片),打开后只是一个单独的页面,没有底部导航栏,点击返回按钮的时候就直接退出小程序了。如果需要去到首页,还必须点击顶部胶囊的“回到首页”,可是该功能很少人知道。
为了解决这个问题,有两种解决方案。
第一种:在分享的页面在添加显眼的“首页”悬浮按钮,点击按钮跳转到首页。这种方法,好容易理解,可是万一页面多,需要开发不少这样的悬浮按钮,而且点击返回依旧是退出小程序。
第二种:分享的时候不是分享本页面,而是分享首页的链接,不过在链接上带上本页面的参数,打开卡片号进入首页,首先判断参数,符合要求的直接跳转到目标页面。这个的好处是不需要修改ui效果,只需要在分享接口上做些处理,而且还支持返回首页;缺点是会从首页一闪到目标页面。
同时,如果小程序涉及到分享功能的,需要记录我是谁邀请进来的,那么就需要在分享参数中加上自己的分享id,综合考虑后第二种方式更合适。
第一步:创建分享配置文件pageshare.js
该文件的模块包含五个属性,分别是config数组(页面路径和页面id数组)、find方法(通过id查找页面路径的方法)、build(创建分享参数的方法,如返回页面id、分享id、文章id等)、baseshare(基础分享方法,返回微信分享所需的对象)
module.exports = {
config: [{
pageId: 1,
pageUrl: "/pages/home/home",
isTab: true,
isHome: true
}],
/**
* 查找相应的页面
* @pageId 页面id
*/
find: function(pageId) {
let result = this.config[0];
this.config.forEach(item => {
if (item.pageId.toString() === pageId.toString()) {
result = item;
}
});
return result;
},
/**
* 创建分享参数
* @obj 分享键值对
* [默认内置salesmanId或shareId]
*/
build: function(obj) {
if (!(obj instanceof Object)) {
obj = {};
}
let userInfo = getApp().globalData.userInfo;
if (userInfo.is_salesman) {
obj.salesmanId = userInfo.salesman_info.id;
} else {
obj.shareId = userInfo.id;
}
let params = [];
for (let name in obj) {
params.push(name + "=" + obj[name]);
}
return params.join("&");
},
/**
* 基础分享
* @title 标题
* @params url参数
* @imageUrl 图片[默认截图]
*/
baseshare: function({
title,
params,
imageUrl
}) {
return {
title: title,
path: "/pages/home/home?" + this.build(params),
imageUrl: imageUrl || ""
}
}
}
PS:config与小程序的页面一一对应,需要手动配置。
第二步:引入pageshare.js文件
const Pageshare = require("../../../utils/pageshare");//在需要做分享的页面引入该文件
第三步:配置分享信息
在需要做分享的页面中修改分享信息
onShareAppMessage: function() {
return Pageshare.baseshare({
title: this.data.course.title, //标题
params: {
pageId: 12, //页面id
source: "微信小程序课程分享", //自定义参数
id: this.data.course.id //自定义参数
}
});
}
pageshare底层默认添加了分享人等基本参数,所以这里不需要添加
第四步:App.js获取页面参数(点击卡片打开时)
在用户B点击用户A分享的链接时,app.js触发以下代码
到这里完成了分享人信息的绑定。
第五步:home页面获取到请求参数,进行二次跳转
从分享配置中可以知道,分享的路径是首页,然后带上自定义参数和分享参数
那么用户B打开用户A发的链接时,会打开home页面,所以我们在home中做参数判断,如下:
shareRedirect: function(share) {
if (share.pageId != null) {
let sharePage = Pageshare.find(share.pageId);
let params = [];
for (let name in share) {
if (name !== "pageId") {
params.push(name + "=" + share[name]);
}
}
if (sharePage.isTab && !sharePage.isHome) {
wx.switchTab({
url: sharePage.pageUrl + "?" + params.join("&")
});
} else {
wx.navigateTo({
url: sharePage.pageUrl + "?" + params.join("&")
});
}
}
}
微信小程序封装分享与分销功能相关推荐
- 配置微信小程序开发分享朋友圈功能
在微信开发者平台上,可以按照以下步骤正确配置分享相关的参数: 登录微信开发者平台 在浏览器中访问微信开发者平台(https://mp.weixin.qq.com/),使用微信公众号的管理员账号登录. ...
- springboot审核功能怎么做_开发的微信小程序商城怎么利用分销功能做营销
现在很多客户开发小程序商城的情况,不仅是需要做在线支付,还要做分销功能等,因为这些方式可以帮助产品直接从生产商到消费者的转介,现在互联网这个发达,商家可以通过小程序分销商城借助好友关系进行传播,现在很 ...
- 微信小程序onShareTimeLine分享朋友圈功能
微信为了更好的用户体验在2.11.3版本当中新出了一个onShareTimeLine方法跟onShareAppMessage类似的方法用于分享朋友圈,在onShareTimeLine当中的参数有tit ...
- 微信小程序onShareTimeline()分享朋友圈功能
Page({//页面需设置允许"发送给朋友"onShareAppMessage: function() {wx.showShareMenu({withShareTicket: tr ...
- 微信小程序/uniapp分享功能-代码封装与使用(分享好友或朋友圈-两种方式)
官方地址:分享 | uni-app官网 一.分享朋友圈-详见uni-app官方文档 注意:更多注意事项见uni-app文档 结果展示: 二.分享好友或者朋友圈-详见微信开放文档 先展示: 实现分享 ...
- 微信小程序之分享功能
一.介绍 微信小程序的分享功能可以分享页面给朋友或群聊,但是不能分享到朋友圈,需要分享朋友圈的话,可以在小程序内设计一个分享页面,利用小程序提供的canvas把小程序码绘制到分享图里保存到本地分享到朋 ...
- android分享朋友圈功能,微信小程序实现分享至朋友圈的功能来啦
微信小程序「分享至朋友圈」能力,终于来了!(之前,我相信大部分微信小程序的开发者都是用"分享卡片"的形式,手动调用wx.createCanvasContext生成一张图片,让用户生 ...
- 微信小程序实现分享至朋友圈的功能
微信小程序实现分享至朋友圈的功能 微信小程序从基础库 2.11.3 开始,可将小程序页面分享到朋友圈.适用于内容型页面的分享,不适用于有较多交互的页面分享. 1 设置分享状态 小程序页面默认不可被分享 ...
- plsql developer无监听程序_微信小程序支持分享到朋友圈啦!技术解读跟我来
千呼万唤始出来!微信小程序页面分享到朋友圈的功能,终于在安卓系统灰度测试了!目前只在安卓系统!只在安卓系统!只在安卓系统!iOS系统还没有办法体验. 首先,我们看一下官方文档的描述,解读一下小程序分享 ...
最新文章
- 用Windows Media Player截图的方法
- ks检验正态分布结果_数据分析基础(2)——正态分布检验
- vue if判断_vue循环判断
- DotFuscator 小记
- 菜鸟CEO万霖:双11包裹量将继续增长 已建立更高效的物流枢纽
- android 多数据图表,Android统计图表MPAndroidChart:为多条统计折线动态更新数据,以高温低温曲线为例【7】...
- [Ubuntu]在Ubuntu系统下连接远程Ubuntu服务器并传输文件:安装putty, filezilla
- 5美元的互联网硬件主板
- 你最后会划掉谁的名字……
- Atitit.guice3 ioc 最佳实践 o9o
- 语文学科html代码,[2018年最新整理]学科分类与代码.doc
- 数据挖掘十大算法之Apriori算法
- 《第一行代码》第三版之我的第一行Android代码(一)
- 通过Numba调用CUDA用GPU为Python加速:进阶理解网格跨步、多流、共享内存
- IDL(ENVI/IDL) 简(jian)明(lou)教程:一、IDL基础
- lol手游日服服务器未响应,LOL手游进不去怎么回事?日服登陆失败解决办法[多图]...
- Unity技能工厂——字体替换工具功能的实现!
- cassandra 概述
- [运维] linux定时关机命令
- python中基例是什么意思_python中 *= 是什么意思
热门文章
- 36招搞定电脑一切难题!!!
- 如何用Python画滑稽笑脸
- halcon学习笔记-车牌号识别
- 苹果Home键恢复(无工具篇)
- 服务器电话销售话术,电话销售必看:让客户无法拒绝的13个经典话术
- 来了老弟,帅气模态框
- 059.迪杰斯特拉(Dijkstra)算法的原理以及解决最短路径问题
- 070-JAVA项目实训:仿QQ即时通讯软件系列讲座五(讲解用户注册功能)
- thinkPHP基于php的枣院二手图书交易系统-计算机毕业设计
- c语言 电话簿 链表,C语言_链表_结构体_电话簿简单实现