微信小程序封装分享与分销功能过程解析


Posted in Javascript onAugust 13, 2019

前言

在微信小程序中,可以很简单的分享一个页面,比微信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("&")
  });
 }
}
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
脚本收藏iframe
Jul 21 Javascript
CSS常用网站布局实例
Apr 03 Javascript
jquery 框架使用教程 AJAX篇
Oct 11 Javascript
javascript 设置某DIV区域内的checkbox复选框
Nov 30 Javascript
javascript 使用 NodeList需要注意的问题
Mar 04 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
Apr 08 Javascript
JavaScript中发布/订阅模式的简单实例
Nov 05 Javascript
Javascript中内建函数reduce的应用详解
Oct 20 Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
Feb 28 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
Nov 13 Javascript
vue 递归组件的简单使用示例
Jan 14 Vue.js
node删除、复制文件或文件夹示例代码
Aug 13 #Javascript
vue实现下拉加载其实没那么复杂
Aug 13 #Javascript
vue中created和mounted的区别浅析
Aug 13 #Javascript
微信小程序实现点击空白隐藏的方法示例
Aug 13 #Javascript
微信小程序使用npm包的方法步骤
Aug 13 #Javascript
Vue中的transition封装组件的实现方法
Aug 13 #Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 #Javascript
You might like
色色整理的PHP面试题集锦
2012/03/08 PHP
yii的入口文件index.php中为什么会有这两句
2016/08/04 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
js中回调函数的学习笔记
2014/07/31 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
2014/11/26 Javascript
Vue中之nextTick函数源码分析详解
2017/10/17 Javascript
Vue 源码分析之 Observer实现过程
2018/03/29 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
2018/08/17 Javascript
angular 表单验证器验证的同时限制输入的实现
2019/04/11 Javascript
javascript的this关键字详解
2019/05/20 Javascript
js实现点击图片在屏幕中间弹出放大效果
2019/09/11 Javascript
微信小程序实现一张或多张图片上传(云开发)
2019/09/25 Javascript
微信小程序实现点击按钮后修改颜色
2019/12/05 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
2020/04/11 Javascript
ES6 Symbol在对象中的作用实例分析
2020/06/06 Javascript
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
python实现巡检系统(solaris)示例
2014/04/02 Python
基于wxPython的GUI实现输入对话框(2)
2019/02/27 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
Python-opencv实现红绿两色识别操作
2020/06/04 Python
Python的控制结构之For、While、If循环问题
2020/06/30 Python
用pip给python安装matplotlib库的详细教程
2021/02/24 Python
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
德国香水、化妆品和护理产品网上商店:Parfumdreams
2018/09/26 全球购物
伦敦鲜花递送:Flower Station
2021/02/03 全球购物
写给女朋友的道歉信
2014/01/08 职场文书
学习委员自我鉴定
2014/01/13 职场文书
创建卫生先进单位实施方案
2014/03/10 职场文书
幼儿教师暑期培训方案
2014/08/27 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
预备党员表决心的话
2015/09/22 职场文书
2016领导干部廉洁自律心得体会
2016/01/13 职场文书
SQL Server中常用截取字符串函数介绍
2022/03/16 SQL Server