微信小程序一个页面多个按钮分享怎么处理

首先呢,第一步先看api文档:

组件:button

https://developers.weixin.qq.com/miniprogram/dev/component/button.html

框架-逻辑层-注册页面-页面事件处理函数:onShareAppMessage

https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html#%E9%A1%B5%E9%9D%A2%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86%E5%87%BD%E6%95%B0

监听用户点击页面内转发按钮(<button> 组件 open-type="share")或右上角菜单“转发”按钮的行为,并自定义转发内容。

代码区html

<view>
    <button open-type=‘share‘ id="1">1</button>
    <button open-type=‘share‘ id="2">2</button>
</view>

代码区javascript

  /**
    * 用户点击右上角分享
    */
  onShareAppMessage: function (res) {
    if (res.from === ‘button‘) {
      // 来自页面内转发按钮
      if (res.target.id == 1) {
        return {
          title: ‘自定义1111转发标题‘,
          path: ‘/page/user?id=123‘
        }
      }
      if (res.target.id == 2) {
        return {
          title: ‘自定义22222转发标题‘,
          path: ‘/page/user?id=123‘
        }
      }
    } else {
      return {
        title: ‘自定义转发标题‘,
        path: ‘/page/user?id=123‘
      }

    }

  }

以上代码主要是通过button按钮组件的id来进行区分的,在javascript中的onShareAppMessage中的res.target.id加以区分,同一个页面,去分享多个功能的例子。

原文地址:https://www.cnblogs.com/kpengfang/p/9978363.html

时间: 2024-08-29 07:27:12

微信小程序一个页面多个按钮分享怎么处理的相关文章

微信小程序授权页面

微信小程序授权页面,效果图如下 app.js  中的 onLaunch或onShow中加如下代码,如果没授权跳转到授权页面 // 获取用户信息 wx.getSetting({ success: res => { if (res.authSetting['scope.userInfo']) { // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框 wx.getUserInfo({ success: res => { // 可以将 res 发送给后台解码出 unionId

微信小程序之页面打开数量限制

无论是在小程序还是APP中,打开一个页面其实就是创建了一个新的View对象,一层层叠加的.当点击页面的回退按钮就是把当前页面关闭. 这个过程中会涉及到一个问题,就是打开页面的数量.在某些设计下,比如一个商品详情页面中会推荐其他的商品,这些商品点进去就是详情页面.详情页面中又有推荐,又可以点进去.这样重复下去打开的页面就会越来越多. 如果不做限制,当打开数量到一定程度的时候肯定会卡死了.在微信小程序中打开的页面不能超过10个,达到10个页面后,就不能再打开新的页面. 之前出现这个问题,还以为是Bu

微信小程序之页面拦截器

场景 小程序有52个页面,其中13个页面无需任何身份,另外39个页面需要系统角色.对于这39个页面,如果微信用户没有系统角色,则跳转到登录页.是否有系统角色信息需要通过异步请求来获取. 需求分析&实现 对需求进行抽象,其实要的就是一个过滤器,对小程序页面的访问进行过滤,符合条件的通过,不符合条件进行其他处理. 使用过php的laravel框架的童鞋,肯定一下子就联想到了laravel框架的http中间件:HTTP 中间件提供一个方便的机制来过滤进入应用程序的 HTTP 请求,例如,Laravel

微信小程序之页面跳转

如今 微信小程序已经充满的我们的生活,那么今天我就来说一说微信小程序中的最基础的 页面跳转 1. wx.navigateTo(保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面.) 简单点说,有两个页面 分别为页面A,页面B ,你想要从页面A 跳转到页面B 就可以在页面A使用这个方法 wx.navigateTo({ url: '../pages/B' }) 当然这是不穿参数的 只是单纯的跳转页面若想要传参的话 可以用"?+id=123&&na

微信小程序:实现悬浮返回和分享按钮

效果图: 数据: 依赖微信小程序接口wx.redirectTo.onShareAppMessage来完成 跳转接口: https://developers.weixin.qq.com/miniprogram/dev/api/wx.redirectTo.html?search-key=redirectTo 前端处理: 1.设置两个按钮 2.绑定对应的事件 wxml代码: css代码: ###js 代码: 代-码-下载:https://pan.baidu.com/s/1GYntkS83UadLjUY

浅谈高大上的微信小程序中渲染html内容—技术分享

大部分Web应用的富文本内容都是以HTML字符串的形式存储的,通过HTML文档去展示HTML内容自然没有问题.但是,在微信小程序(下文简称为「小程序」)中,应当如何渲染这部分内容呢? 解决方案 wxParse 小程序刚上线那会儿,是无法直接渲染HTML内容的,于是就诞生了一个叫做「 wxParse 」的库.它的原理就是把HTML代码解析成树结构的数据,再通过小程序的模板把该数据渲染出来. rich-text 前端精品教程:百度网盘下载 后来,小程序增加了「rich-text」组件用于展示富文本内

浅谈微信小程序实现页面数据显示

前段时间公司需要一个小程序去实现某项简单的功能,本来作为一个后台人员,只需要完成数据接口和文档部分就可以了: 后来对这小程序好奇再加上文档蛮完整的,然后抽了好几天时间去研究了一下,不多说了.. 1.首先来看简单的目录结构: 2.下面是app.json 需要注意的地方: 3.接着是index页面的数据 4.最后是index页面效果 好了,简单的第一步已经完成了.

微信小程序的页面跳转

小程序页面的跳转: 先创建页面toolbar,并在app.json里面pages写上路径 "pages":[    "pages/index/index",    "pages/logs/logs",    "pages/toolbar/toolbar"  ], 然后写在页面中添加按钮,然后添加事件, <button type="primary" bindtap="start"&g

【微信】微信小程序 新建页面目录后,怎么自动生成目中的的四个基本文件呢? 新建目录报错如下VM458:2 未找到 app.json 中的定义的 pages &quot;pages/module/module&quot; 对应的 WXML 文件

如下图,在使用微信开发者工具过程中,新创建了页面目录,想要页面文件夹中自动生成四个基本文件 但是新创建了一个页面文件夹,里面的四个基本文件并没有展示出来 然后在app.json添加这个路径,ctrl+s 保存 依旧不能自动生成 解决方法: 经过测试,确实 -->新创建的项目中新创建的第一个空文件夹 才会自动给你创建四个基本文件. 如果已经自己创建过文件目录了,如上面已经创建了pages/swapping目录了,再自己去创建module目录的时候,就不会自动创建,反而会提示你缺少对应的文件!!!