微信小程序一个页面多个按钮分享怎么处理(代码片段)

Key Key     2022-11-24     304

关键词:

首先呢,第一步先看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加以区分,同一个页面,去分享多个功能的例子。

 

微信小程序之分享转发函数

参考技术AonShareAppMessage(Objectobject)是在Page中定义的用于分享转发小程序的方法。可以监听用户点击页面内转发按钮(button组件open-type="share")或右上角菜单“转发”按钮的行为,并自定义转发内容。值得注意的是:只有定义了此... 查看详情

微信小程序一个页面多个视频(video组件),限制一个播放,其它暂停(代码片段)

微信小程序一个页面多个视频(video组件),限制一个播放,其它暂停html<viewclass='videoBoxTitle'>视频列表</view><blockwx:for="videoListData"wx:index='index'w 查看详情

微信小程序全局设置分享内容(代码片段)

微信小程序每个页面都可以在onShareAppMessage中设置分享内容,如果想要全局设置成一样的分享内容如何设置呢?在app.js中新增以下方法:1//重写分享方法2overShare:function()3//监听路由切换4//间接实现全局设置分享内容5wx.onAppRoute(func... 查看详情

微信小程序怎么只留一个

参考技术A微信小程序开发工具。打开微信小程序开发工具,打开已新建的或新建一个项目,新建一个页面文件wxml,插入一个radiogroup,然后内嵌四个radio,保存代码并查看左侧模拟器,可以查看到一组单选按钮在对应页面的JS文... 查看详情

微信小程序事件和页面跳转(代码片段)

一、页面跳转1.非TabBar页面一个小程序拥有多个页面,我们通过wx.navigateTo进入一个新的页面我们通过下边点击事件实现页面跳转进行代码实现及参考wx.navigateBack()回退到上一个页面wx.redirectTo(url)删除当前... 查看详情

分享微信小程序在app.js中全局管理websocket方案

微信开放社区有网友提问怎么在路由切换时保持websocket连接不中断?,我在回答中分享了我在实际项目中使用websocket的方案,这边整理一下。主要思路是在app.js中全局处理websocket的连接和接收消息,收到消息后再把消息转发到页... 查看详情

微信小程序一个页面多个视频(video组件),限制一个播放,其它暂停(代码片段)

微信小程序一个页面多个视频(video组件),限制一个播放,其它暂停html<viewclass='videoBoxTitle'>视频列表</view><blockwx:for="videoListData"wx:index='index'wx:key='id'><videoclass&#... 查看详情

微信小程序计算器案例(代码片段)

...⏰预计时间:30分钟🎉专栏系列:我的第一个微信小程序计算器前言实现效果实现步骤wxmlwxssjs数字按钮事件处理函数计算按钮处理事件清空数字、删除数字、添加“.”事件处理函数总结前言嗨嗨嗨,好久没更新... 查看详情

微信小程序一个页面多个视频(video组件),限制一个播放,其它暂停(代码片段)

微信小程序一个页面多个视频(video组件),限制一个播放,其它暂停html<viewclass='videoBoxTitle'>视频列表</view><!--循环请求到的视频数据,每一个视频都需要有id(id='item.id')--><bloc... 查看详情

微信小程序代码片段分享

ThorUI组件库,微信小程序源码分享 查看详情

微信小程序分享的页面打开提示“页面不存在”

参考技术A小程序点击分享按钮把界面分享出去后,打开分享链接,界面提示“页面不存在”。应该是页面路径问题。上例所示,path为相对路径,就会出现找不到页面的情况。这里应该写绝对路径。这样就可以成功打开分享链接... 查看详情

微信小程序里怎么控制两个只能选择一个的?

方法/步骤打开微信小程序开发工具,打开已新建的或新建一个项目请点击输入图片描述新建一个页面文件wxml,插入一个radio-group,然后内嵌四个radio请点击输入图片描述保存代码并查看左侧模拟器,可以查看到一组单选按钮请点... 查看详情

微信小程序-页面路由及页面生命周期(代码片段)

一、路由路由常用跳转方式有三种:1、wx.navigateTo(Objectobject)保留当前页面,跳转到应用内的某个页面。但是不能跳到tabbar页面。使用wx.navigateBack可以返回到原页面。小程序中页面栈最多十层。页面跳转之后,会有一... 查看详情

微信小程序-页面路由及页面生命周期(代码片段)

一、路由路由常用跳转方式有三种:1、wx.navigateTo(Objectobject)保留当前页面,跳转到应用内的某个页面。但是不能跳到tabbar页面。使用wx.navigateBack可以返回到原页面。小程序中页面栈最多十层。页面跳转之后,会有一... 查看详情

微信小程序怎么用webstore开发

微信小程序开发的方法及步骤:首先要下载微信官方的微信Web开发者工具。打开微信公众平台,找到右下方的小程序模块,点击「开发」按钮;点击顶部导航栏的「工具」按钮,在新页面的左侧栏中找到「下载」。可以看到,开... 查看详情

微信小程序开放「分享到朋友圈」功能(代码片段)

...(据说是6日深夜),一个很特别的日子,微信低调地放开了一个功能:微信小程序“分享到到朋友圈”,这个看似微小的变化,对微信小程序来说意义重大。用fenng大的话说就是:目前此功能没有... 查看详情

微信小程序-页面路由及页面生命周期(代码片段)

...am/dev/framework/app-service/page-life-cycle.html由于可以看到,微信小程序页面启动时,会开启两个线程:ViewThread和AppServiceThreadViewThread初始化中向AppServic 查看详情

微信小程序怎么渲染html格式的内容

1、首先要下载微信官方的微信Web开发者工具。打开微信公众平台,找到右下方的小程序模块,点击「开发」按钮;  2、点击顶部导航栏的「工具」按钮,在新页面的左侧栏中找到「下载」。可以看到,开发工具提供Windows32位、... 查看详情