在微信小程序中,可以很简单的分享一个页面,比微信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触发以下代码

app中获取请求参数

app.js  登录接口中提交分享人信息

到这里完成了分享人信息的绑定。

第五步:home页面获取到请求参数,进行二次跳转

从分享配置中可以知道,分享的路径是首页,然后带上自定义参数和分享参数

底层分享

那么用户B打开用户A发的链接时,会打开home页面,所以我们在home中做参数判断,如下:

home.js onLoad中处理参数

home.js 分享页面重定向配置

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("&")

});

}

}

}

微信小程序封装分享与分销功能相关推荐

  1. 配置微信小程序开发分享朋友圈功能

    在微信开发者平台上,可以按照以下步骤正确配置分享相关的参数: 登录微信开发者平台 在浏览器中访问微信开发者平台(https://mp.weixin.qq.com/),使用微信公众号的管理员账号登录. ...

  2. springboot审核功能怎么做_开发的微信小程序商城怎么利用分销功能做营销

    现在很多客户开发小程序商城的情况,不仅是需要做在线支付,还要做分销功能等,因为这些方式可以帮助产品直接从生产商到消费者的转介,现在互联网这个发达,商家可以通过小程序分销商城借助好友关系进行传播,现在很 ...

  3. 微信小程序onShareTimeLine分享朋友圈功能

    微信为了更好的用户体验在2.11.3版本当中新出了一个onShareTimeLine方法跟onShareAppMessage类似的方法用于分享朋友圈,在onShareTimeLine当中的参数有tit ...

  4. 微信小程序onShareTimeline()分享朋友圈功能

    Page({//页面需设置允许"发送给朋友"onShareAppMessage: function() {wx.showShareMenu({withShareTicket: tr ...

  5. 微信小程序/uniapp分享功能-代码封装与使用(分享好友或朋友圈-两种方式)

    官方地址:分享 | uni-app官网 一.分享朋友圈-详见uni-app官方文档 注意:更多注意事项见uni-app文档  结果展示: 二.分享好友或者朋友圈-详见微信开放文档 先展示:  实现分享 ...

  6. 微信小程序之分享功能

    一.介绍 微信小程序的分享功能可以分享页面给朋友或群聊,但是不能分享到朋友圈,需要分享朋友圈的话,可以在小程序内设计一个分享页面,利用小程序提供的canvas把小程序码绘制到分享图里保存到本地分享到朋 ...

  7. android分享朋友圈功能,微信小程序实现分享至朋友圈的功能来啦

    微信小程序「分享至朋友圈」能力,终于来了!(之前,我相信大部分微信小程序的开发者都是用"分享卡片"的形式,手动调用wx.createCanvasContext生成一张图片,让用户生 ...

  8. 微信小程序实现分享至朋友圈的功能

    微信小程序实现分享至朋友圈的功能 微信小程序从基础库 2.11.3 开始,可将小程序页面分享到朋友圈.适用于内容型页面的分享,不适用于有较多交互的页面分享. 1 设置分享状态 小程序页面默认不可被分享 ...

  9. plsql developer无监听程序_微信小程序支持分享到朋友圈啦!技术解读跟我来

    千呼万唤始出来!微信小程序页面分享到朋友圈的功能,终于在安卓系统灰度测试了!目前只在安卓系统!只在安卓系统!只在安卓系统!iOS系统还没有办法体验. 首先,我们看一下官方文档的描述,解读一下小程序分享 ...

最新文章

  1. 用Windows Media Player截图的方法
  2. ks检验正态分布结果_数据分析基础(2)——正态分布检验
  3. vue if判断_vue循环判断
  4. DotFuscator 小记
  5. 菜鸟CEO万霖:双11包裹量将继续增长 已建立更高效的物流枢纽
  6. android 多数据图表,Android统计图表MPAndroidChart:为多条统计折线动态更新数据,以高温低温曲线为例【7】...
  7. [Ubuntu]在Ubuntu系统下连接远程Ubuntu服务器并传输文件:安装putty, filezilla
  8. 5美元的互联网硬件主板
  9. 你最后会划掉谁的名字……
  10. Atitit.guice3 ioc 最佳实践 o9o
  11. 语文学科html代码,[2018年最新整理]学科分类与代码.doc
  12. 数据挖掘十大算法之Apriori算法
  13. 《第一行代码》第三版之我的第一行Android代码(一)
  14. 通过Numba调用CUDA用GPU为Python加速:进阶理解网格跨步、多流、共享内存
  15. IDL(ENVI/IDL) 简(jian)明(lou)教程:一、IDL基础
  16. lol手游日服服务器未响应,LOL手游进不去怎么回事?日服登陆失败解决办法[多图]...
  17. Unity技能工厂——字体替换工具功能的实现!
  18. cassandra 概述
  19. [运维] linux定时关机命令
  20. python中基例是什么意思_python中 *= 是什么意思

热门文章

  1. 36招搞定电脑一切难题!!!
  2. 如何用Python画滑稽笑脸
  3. halcon学习笔记-车牌号识别
  4. 苹果Home键恢复(无工具篇)
  5. 服务器电话销售话术,电话销售必看:让客户无法拒绝的13个经典话术
  6. 来了老弟,帅气模态框
  7. 059.迪杰斯特拉(Dijkstra)算法的原理以及解决最短路径问题
  8. 070-JAVA项目实训:仿QQ即时通讯软件系列讲座五(讲解用户注册功能)
  9. thinkPHP基于php的枣院二手图书交易系统-计算机毕业设计
  10. c语言 电话簿 链表,C语言_链表_结构体_电话簿简单实现