uni-app 微信小程序 使用mixins设置分享 onShareAppMessage

这篇具有很好参考价值的文章主要介绍了uni-app 微信小程序 使用mixins设置分享 onShareAppMessage。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

参考链接:https://www.jianshu.com/p/844018ca174f

1.创建mixins,路径为@/utils/share.js

export default {
    data() {
        return {
            share: {
                title: '自定义分享标题',
                path: '/pages/main-assess/assess',
                imageUrl: '图片url',
                withShareTicket: true // 允许分享朋友圈
            }
        }
    },
    onShareAppMessage(res) { //发送给朋友
    	let that = this
        // 动态获取当前页面栈
        let pages = getCurrentPages(); //获取所有页面栈实例列表
        let nowPage = pages[pages.length - 1]; //当前页页面实例
        
        // 输出 pages/com-word/com-word
        console.log(nowPage.route)
        // 判断条件然后更改属性,如:
        // that.share.imageUrl = '新的图片url'
        return {
            title: this.share.title,
            path: this.share.path,
            imageUrl: this.share.imageUrl,
            withShareTicket: this.share.withShareTicket
        }
    },
    onShareTimeline(res) {//分享到朋友圈
    	let that = this
        // 动态获取当前页面栈
        let pages = getCurrentPages(); //获取所有页面栈实例列表
        let nowPage = pages[pages.length - 1]; //当前页页面实例
        
        // 输出 pages/com-word/com-word
        console.log(nowPage.route)
        // 判断条件然后更改属性,如:
        // that.share.imageUrl = '新的图片url'
        
        return {
            title: this.share.title,
            path: this.share.path,
            imageUrl: this.share.imageUrl,
            withShareTicket: this.share.withShareTicket
        }
    }
}

2.全局使用mixins,在main.js中

import share from '@/utils/share'
Vue.mixin(share)

这样设置后,右上角三个点的分享就可以分享了文章来源地址https://www.toymoban.com/news/detail-518852.html


额外记录:如果需要自定义分享,只能使用button

<!-- 需要将open-type设置为share -->
<button open-type="share">分享</button>

到了这里,关于uni-app 微信小程序 使用mixins设置分享 onShareAppMessage的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • THREEJS 在 uni-app 中使用(微信小程序)

    threejs 主要是用来开发web端的3D世界,源生包无法适配 微信小程序(会报 document.createElementNS 的错),需要使用 github 上经过大佬改写的 threejs 包。 将源码下载到本地后,找到 将 以上三个文件 复制到自己的 uni-app 项目中 (任意路径下,这里我放在了自己的 utils 下,好像一般

    2024年02月07日
    浏览(51)
  • uni-app:vue3 + uni-app 在微信小程序中无法使用app.component全局注册组件

    按上文中的代码执行后,会发现在微信小程序开发中全局注册的组件是无法显示的,这是uniapp的一个未解决bug, 在uniapp中出了可以通过vue实例的component方法注册全局组件外,uniapp支持另一种全局注册的方式,就是通过 easycom 扫描注册,步骤如下 easycom 的扫描流程是:通过代码

    2024年02月16日
    浏览(73)
  • uni-app微信小程序使用佳博蓝牙打印机

    1.佳博打印js copy到项目里 2.需要打印的vue页面引入js 3.打印数据初始化 4.打印按钮事件 蓝牙列表连接页面 已连接处打印方法

    2024年02月12日
    浏览(115)
  • uni-app 使用webview加载H5打开微信小程序

    最近公司有个需求要求在app里点击一个功能打开小程序,并且关闭小程序回到app,模仿平安保险app。 毕竟我也是刚学习uni-app,找了很多资料,找到了一个天天外链的网站可以生成一个小程序的链接,使用uni的webview去加载这个链接,很好,需求满足,但是收费,那能不能自己

    2023年04月18日
    浏览(55)
  • 微信小程序使用uni-app开发小程序及部分功能实现详解心得

    目录 一、uni-app 1、简介 2、开发工具 3、新建 uni-app项目 4、把项目运行到微信开发者工具 二、实现tabBar效果 1、创建tabBar页面 2、配置tabBar 1、创建分包目录 2、在 pages.json 文件中配置 3、创建分包页面 四、公用方法封装 五、搜索功能 1、搜索组件 2、搜索建议实现 3、本地存储

    2024年02月11日
    浏览(52)
  • uni-app:使用 Painter 在微信小程序将当前页面保存为图片

    手机截屏 Painter 实现 方式一:Painter Painter 是一个微信小程序组件,具体介绍和 API 请参考:GitHub文档。 在 GitHub 下载下来之后只需要将 components 下的 painter 文件夹放到项目根目录下的 wxcomponents 文件夹即可。然后就是如何在 uni-app 中使用微信小程序形式的组件,其实很简单,

    2024年02月12日
    浏览(57)
  • 微信小程序一键登录功能,使用uni-app和springboot(JWT鉴权)

    目录 概述 微信登录接口说明  关于获取微信用户的信息 前端代码(uni-app) 后端代码(SpringBoot) 配置文件:application.yml  配置文件:Pom.xml  类:WeChatModel    类:WeChatSessionModel  类:UserInfoController 业务层实现类:UserInfoServiceImpl 工具类:JWTUtils 拦截器配置-自定义拦截器

    2024年02月09日
    浏览(62)
  • uni-app使用HBuilder X工具和微信小程序工具开发微信小程序

    选择uni-app的原因是什么 需要使用到的工具 关于HBuilder X工具和微信小程序工具的介绍  怎么下载HBuilder X工具和微信小程序工具  如何使用HBuilderX工具 如何使用微信小程序工具  结尾 什么是uni-app uni-app是一个使用vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到

    2024年02月08日
    浏览(50)
  • 【微信小程序】使用uni-app——开发首页搜索框导航栏(可同时兼容APP、H5、小程序)

    目录 前言 App、H5效果 小程序效果 一、兼容APP、H5的方式 二、兼容小程序 三、实现同时兼容 首页都会提供一个搜索框给到客户,让客户自己去搜索自己想要的内容,这里就需要导航栏,来实现搜索页面的跳转,效果如下 在常见titleNView配置代码示例中可以看到基本样式的代码

    2024年02月03日
    浏览(59)
  • uni-app uni-ui 微信小程序 uni-datetime-picker 时间选择组件设置start和end属性,实现时间选择限制

     效果如图,先选择开始日期,完成日期需要在开始日期之后,先选择完成日期,开始日期需要在完成日期之前 需要用到uni-datetime-picker官方的三个属性  代码如下 这样一个能够限制选定范围的组件就ok了!    

    2024年02月11日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包