uniapp 微信小程序 配置分享朋友和朋友圈

  1. 首先在小程序中配置微信分享,和微信朋友圈, onShareAppMessage, onShareTimeline 这两个API 和 onLoad 同级目录配置
  2. 在小程序每个页面都要设置这两个函数,修改内容比较心烦,不符合代码风格。可以通过mixins 混入的方式给每个页面设置分享的内容
  3. 在使用 mixins 的时候, 可以在全局混入, 也可以在每个页面中混入

配置分享的两个函数

 onShareAppMessage(res) {
return {
title: '',
path: '',
imageUrl: '',
}
},
//2.分享到朋友圈
onShareTimeline(res) {
return {
title: '',
path: '',
imageUrl: '',
}
},

每个页面中混入的方式

share.js
export default {
onShareAppMessage: function () {
const _this = this;
const tx_title = '热门头像|个性头像|高清头像|海量资源 应用尽有 免费下载'
const bz_title = '性感壁纸|美女壁纸|炫酷壁纸|省电壁纸|唯美壁纸海量资源 应用尽有 免费下载'
const shareTitle = this.urlPath == 'bizhi' ? bz_title : tx_title
return {
title: shareTitle,
desc: shareTitle,
path: `/pages/${this.urlPath}/index?active=${_this.active}`, // 路径,传递参数到指定页面。
}
},
/*分享朋友圈 */
onShareTimeline: function() {
const _this = this;
const tx_title = '热门头像|个性头像|高清头像|海量资源 应用尽有 免费下载'
const bz_title = '性感壁纸|美女壁纸|炫酷壁纸|省电壁纸|唯美壁纸海量资源 应用尽有 免费下载'
const shareTitle = this.urlPath == 'bizhi' ? bz_title : tx_title
return {
title: shareTitle,
}
},
} 设置分享的页面
import share from '../share/index.js'
export default {
mixins: [share],
}

全局设置分享

share.js
export default {
data() {
return {
// 默认的全局分享内容
share: {
title: '国考|社保卡|驾驶证|简历|小二寸|小一寸|二寸|一寸,免费制作标准证电子证件照',
path: '/pages/index/index', // 全局分享的路径
imageUrl: '../../static/banner1.png', // 全局分享的图片(可本地可网络)
}
}
},
// 定义全局分享
// 1.发送给朋友
onShareAppMessage(res) {
return {
title: this.share.title,
path: this.share.path,
imageUrl: this.share.imageUrl,
}
},
//2.分享到朋友圈
onShareTimeline(res) {
return {
title: this.share.title,
path: this.share.path,
imageUrl: this.share.imageUrl,
}
},
}
main.js
import share from './pages/share/index.js'
import Vue from 'vue'
Vue.mixin(share)

可以根据自己项目页面多少选择方式

下面是我的小程序体验码,希望能和大家共同学习进步

[项目代码] https://gitee.com/eyes-star/txy-openmp.git

[项目代码] https://gitee.com/eyes-star/zjz-openmp.git

uniapp 微信小程序 配置分享朋友和朋友圈的更多相关文章

  1. uni-app 微信小程序全局分享

    实际使用中,经常需要小程序分享到好友或者朋友圈,一般而言是一个个页面去设置. 官网分享介绍:https://uniapp.dcloud.io/api/plugins/share?id=onsharea ...

  2. 微信小程序绘制分享图

    微信小程序绘制分享图例子: demo下载地址:https://gitee.com/v-Xie/wxCanvasShar 大致代码会再以下说明 实际开发项目: 基础知识点: 了解canvas基础知识 w ...

  3. mpvue开发微信小程序,分享按钮报错:`Cannot read property 'apply' of null`

    用mpvue开发微信小程序,分享按钮报错:Cannot read property 'apply' of null onShareAppMessage 是于微信小程序Pages的生命周期钩子,顾这个方 ...

  4. 微信小程序配置二

    tabBar 客户端窗口底部的tab页面切换,只能配置最好两个.最多5个tab 属性说明: 属性 类型 必填 默认值 描述 color HexColor 是 tab上的文字默认颜色 selectedC ...

  5. uniapp微信小程序分享

    触发代码 如: <button open-type="share">分享</button> 在JS中 分享进入页面传参,和微信小程序路由传参的思路是一样的. ...

  6. uni-app微信小程序开发之引入腾讯视频小程序播放插件

    登录微信小程序管理后台添加腾讯视频播放插件: 正式开始使用腾讯视频小程序插件之前需先在微信公众平台 -> 第三方设置 -> 插件管理处添加插件,如下图所示: 在uni-app中引入插件代码 ...

  7. 微信小程序全局设置分享内容

    微信小程序每个页面都可以在onShareAppMessage中设置分享内容,如果想要全局设置成一样的分享内容如何设置呢? 在app.js中新增以下方法: //重写分享方法 overShare: fun ...

  8. 【重点突破】—— UniApp微信小程序开发教程学习Three

    一.实战 HBuilderX:在微信小程序中运行页面,需要设置->安全 开启微信小程序服务端口,HBuilder工具->设置->配置程序路径 网络请求.模板语法.打开页面.页面传参 ...

  9. 【重点突破】—— UniApp 微信小程序开发官网学习Two

    一.使用Vue.js注意事项 Vue.js在uni-app中使用的差异: 新增:uni-app除了支持Vue实例的生命周期,还支持应用启动.页面显示等生命周期 受限:发布到H5时支持所有vue的语法, ...

  10. 【重点突破】—— UniApp 微信小程序开发官网学习One

    一.初步认识 uni-app官网:https://uniapp.dcloud.io/component/README HBuilderX官方IDE下载地址: http://www.dcloud.io/ ...

随机推荐

  1. DFS算法-求集合的所有子集

    目录 1. 题目来源 2. 普通方法 1. 思路 2. 代码 3. 运行结果 3. DFS算法 1. 概念 2. 解题思路 3. 代码 4. 运行结果 4. 对比 1. 题目来源 牛客网,集合的所有子 ...

  2. MAC MySQL安装配置

    1. 下载 下载地址:https://dev.mysql.com/downloads/mysql/ 注意选择对应的版本,M系列芯片对应ARM 2. 安装 参考官网教程, 点击地址查看, 一直点击继续即 ...

  3. Windows 2012 R2 计划任务发送邮件

     这两天把域控制器升级到了2012 R2,忽然发现原本用的系统自动发邮件提示用户账户锁定的计划任务配置起来有点麻烦了.原因是微软把自动发送邮件和提示消息的功能从计划任务中去除了. 首先用wevtu ...

  4. HBuilder X之uniapp最适合的代码补全模板

    { // 注意:本文档仅支持单行注释,并且'//'前不能有任何非空字符!!! // // HBuilderX使用json扩展代码块,兼容vscode的代码块格式 // 本文档修改完毕,保存即可生效,无 ...

  5. Centos7搭建 KVM 环境

    注意:使用KVM管理虚拟机分命令行和图形化界面两种方式,这里最后一步安装的工具是图形化管理工具 安装前准备 验证CPU是否支持KVM 如果结果中有vmx(Intel)或svm(AMD)字样,就说明CP ...

  6. switch分支

    说明: 当表达式的值等于case中的常量,则会执行其中包含的语句块 break用于跳出循环,如果不写,则直接执行下一个常量的语句块,不再去判断表达式的值是否等于下一个case的常量(case穿透) 最 ...

  7. (WebFlux)004、WebFilter踩坑记录

    一.背景 使用SpringWebFlux的WebFilter时,由于不熟悉或一些思考疏忽,容易出现未知的异常.记录一下排查与解决方案,给大家分享一下. 二.问题 2.1 问题描述 在测试接口方法时,出 ...

  8. Seal-Report: 开放式数据库报表工具

    Seal Report是.Net的一个基于Apache 2.0 开源工具,完全用C# 语言编写,最新的6.6 版本采用.NET 6,github: https://github.com/ariacom ...

  9. 移动端300ms延迟问题和点击穿透问题

    一.移动端300ms延迟问题: 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应,而是会 ...

  10. 关于Linux下aws-cli-2版本的安装

    AWS CLI 版本 2 是 AWS CLI 的最新主版本,支持所有最新功能.版本 2 中引入的某些功能无法向后兼容版本 1,您必须升级才能访问这些功能. AWS CLI 版本 2 仅可作为捆绑安装程 ...