微信小程序分享功能的使用

最新推荐文章于 2024-06-19 15:23:53 发布
最新推荐文章于 2024-06-19 15:23:53 发布
阅读量698 收藏 2
点赞数 1
分类专栏： WeChat 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43447509/article/details/108199358
版权
本文介绍了如何在微信小程序中实现分享功能，包括在wxml和js文件中的关键配置和代码实现，帮助开发者掌握微信小程序的社交互动特性。
摘要由CSDN通过智能技术生成

分享小程序需要在js中定义OnShareAppMessage函数或者在按钮中设置open-type属性；效果如下图所示，在真机上的效果就是点击分享后先选择你的好友再弹出模拟器中的模态框

效果图

在这里插入图片描述

wxml
<button open-type="share">分享</button>
js

                

                
                
        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  sun_wei_tao
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    2
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
微信小程序分享功能总结

				
			

			

				

					qianduan2001_5的博客
				

				

					06-26
					
					3353
					
				

			

		

		

			
				
2, 调用API  wx.showShareMenu({menus: []}) 开启分享功能,可设置分享好友还是分享朋友圈 shareAppMessage指微信好友分享 shareTimeline 指的是微信朋友圈分享 ,,  点击右上角菜单分享   注意  分享需要开启分享好友功能。1, 在js文件中实现onShareAppMessage函数,即可点击右上角菜单分享给微信好友 (页面中默认已实现)在js文件中实现onShareTimeline函数,即可点击右上角菜单分享到微信朋友圈 (需要自己添加)

			
		

	



                

              
                



	

		

			

				
					
微信小程序开发（超详细保姆式教程）

					
热门推荐

				
			

			

				

					m0_64875238的博客
				

				

					11-10
					
					34万+
					
				

			

		

		

			
				
微信小程序开发（超详细保姆式教程）

			
		

	



                


  
              

                


	

		

			

				
					
uniapp微信小程序使用分享功能

				
			

			

				

					逆水行舟 不进则退
				

				

					07-05
					
					2万+
					
				

			

		

		

			
				
在uniapp搭建的微信小程序中如何调用微信的分享给好友和分享到朋友圈功能呢，只需两步就搞定。

			
		

	





	

		

			

				
					
uniapp 微信小程序自定义分享图片

					
最新发布

				
			

			

				

					qq_58340302的博客
				

				

					06-19
					
					1868
					
				

			

		

		

			
				
2. 自定义内容：因为onShareAppMessage的imageUrl参数的支持的是本地文件路径、代码包文件路径或者网络图片路径 ，所以这里实现自定义的分享的方法是结合canvas画布。微信小程序用户，点击小程序里商品的分享按钮时，想要不同的商品展示不用的分享内容，比如分享图片上展示商品的图片、价格等信息。画画的时候，要是找不准xy的位置，可以从这三种样式里选一个样式接近的再慢慢修改～先贴上画布的代码，这里画了三种自定义分享的内容，样式在代码下方。setGoodsShareCanvas()方法的样式。

			
		

	



		

			
		



	

		

			

				
					
uniapp微信小程序分享功能

				
			

			

				

					fakuangjingling的博客
				

				

					04-22
					
					3323
					
				

			

		

		

			
				
【代码】uniapp微信小程序分享功能。

			
		

	





	

		

			

				
					
微信小程序分享功能的实现

				
			

			

				

					baidu_35290582的博客
				

				

					10-14
					
					4789
					
				

			

		

		

			
				
第一种：在page.js中实现onShareAppMessage，便可在小程序右上角选择分享该页面


onShareAppMessage: function () {

    return {
        title: '弹出分享时显示的分享标题',
        desc: '分享页面的内容',
        path: '/page/share?id=123' // 路径，传递参数到指定页面。
    }

}

第二种:自定义按钮实现分享

在页面写一个button组件

<butt

			
		

	





	

		

			

				
					
uniapp实现微信小程序分享功能

				
			

			

				

					weixin_46607967的博客
				

				

					04-11
					
					1169
					
				

			

		

		

			
				
【代码】uniapp实现微信小程序分享功能。

			
		

	





	

		

			

				
					
微信小程序实现分享功能

				
			

			

				

					金色手枪女王的专栏
				

				

					01-08
					
					3607
					
				

			

		

		

			
				
微笑小程序分享功能的实现

			
		

	





	

		

			

				
					
微信小程序禁止分享功能

				
			

			

				

					文龙刚的博客
				

				

					04-27
					
					1973
					
				

			

		

		

			
				
微信小程序禁止分享功能

			
		

	





	

		

			

				
					
uniapp微信小程序分享

				
			

			

				

					章小鱼的博客
				

				

					06-06
					
					9633
					
				

			

		

		

			
				
实现uniapp编写的微信小程序分享好友和微信朋友圈

			
		

	





	

		

			

				
					
uniapp相关-微信小程序分享功能

				
			

			

				

					demons19961019的博客
				

				

					01-22
					
					812
					
				

			

		

		

			
				
uniapp做微信小程序分享的时候，只能使用button按钮，借助btn按钮的open-type="share"属性实现分享功能，分享功能的事件是一个类生命周期，与生命周期同级的方法onShareAppMessage，回调参数res可以利用来做判断等，整个onShareAppMessage方法，要求是返回一个对象，对象固定几个参数，用来实现分享所需。注：css样式需要固定的一部分设置，用来消除button的样式变形，如果不设置，页面展示的时候，会有无法消除的边框、阴影等。

			
		

	





	

		

			

				
					
微信小程序分享.zip

				
			

			

				

					06-04
				

			

		

		

			
				
微信小程序分享功能是微信生态中一个重要的组成部分，它允许用户在使用小程序的过程中，将当前页面或者自定义的内容分享到微信的各个社交场景，如聊天、朋友圈等，从而提高产品的传播性和用户互动性。本资源“微信小...

			
		

	





	

		

			

				
					
微信小程序内嵌网页分享功能

				
			

			

				

					01-27
				

			

		

		

			
				
小程序启动授权等操作成功后直接跳转到内嵌网页，内嵌的网址也就是公司的官网产品项目，而后，产品项目里面的各个网页都能支持分享操作，当然，对方打开的一定是你分享的那个页面而不是整个小程序初始页面。...

			
		

	





	

		

			

				
					
微信小程序实现的自定义分享功能示例

				
			

			

				

					10-17
				

			

		

		

			
				
主要介绍了微信小程序实现的自定义分享功能,结合实例形式分析了微信小程序自定义分享功能的原理与简单实现技巧,需要的朋友可以参考下

			
		

	





	

		

			

				
					
微信小程序-微信小程序的功能封装

				
			

			

				

					08-06
				

			

		

		

			
				
在这个名为“微信小程序-微信小程序的功能封装”的项目中，开发者分享了一些在实际开发中经常用到的功能模块，便于其他开发者参考和复用。  1. **缓存(Cache)**：在微信小程序中，缓存是用于存储数据的关键功能，它...

			
		

	





	

		

			

				
					
微信小程序实现评论功能

				
			

			

				

					01-03
				

			

		

		

			
				
本文实例为大家分享了微信小程序实现评论功能的具体代码，供大家参考，具体内容如下  前端  <textarea class='the_prw_in' bindinput='bindblur' cursor-spacing=130 placeholder='\u8bf4\u70b9\u4ec0\u4e48\u...

			
		

	





	

		

			

				
					
微信小程序 内容评论-回复评论-回复回复的实现

				
			

			

				

					qq_43447509的博客
				

				

					08-19
					
					1万+
					
				

			

		

		

			
				
效果图

先展示代码js逻辑有详细注释
代码格式有点乱复制粘贴格式化即可
wxml
<!-- 评论-回复-回复评论显示区域 -->  
<view class="container">
    <!-- 总共评论数 -->    
    <view class="total">共{{comment_list.length + comment_list2.length}}条评论</view>    
    <!-- END -->
 

			
		

	





	

		

			

				
					
微信小程序上拉触底事件函数onReachBottom不触发的解决方案

				
			

			

				

					qq_43447509的博客
				

				

					08-01
					
					1万+
					
				

			

		

		

			
				
造成不触发的原因可能有以下几种情况

配置属性问题
高度问题
滚动条不在顶部 需要回到顶部重新计算高度
onReachBottom函数被覆盖

1.配置属性问题
在app.json或者本页的json文件中配置onReachBottomDistance属性，区别在于全局还是只在本页生效
2.高度问题
//设置容器高度为100%
page{
  height: 100%
}
3.	切换页面时 滚动条滚回到顶部
//切换页面时调用API
wx.pageScrollTo({
  scrollTop: 0
})
4.

			
		

	





	

		

			

				
					
微信小程序Video组件实现视频、自定义播放按钮、封面图、封面图文字demo

				
			

			

				

					qq_43447509的博客
				

				

					08-05
					
					9300
					
				

			

		

		

			
				
效果图

实现思路
在video标签中添加view或cover-view标签，封面图可直接设置video组件的poster属性，自定义按钮和封面图文字包在view中设置定位即可，给自定义按钮绑定点击事件，触发事件后隐藏最外层view，给video绑定bindended事件 设置最外层view显示
wxml
```css
.video_item {
  margin-top: 33rpx;
}
.video {
  width: 686rpx;
  height: 330rpx;
}
.cover {
  w

			
		

	





	

		

			

				
					
微信小程序分享功能

				
			

			

				

					05-28
				

			

		

		

			
				
微信小程序的分享功能可以通过调用官方提供的分享接口实现。具体步骤如下：  1. 在小程序页面中引入官方提供的分享组件：  ``` 分享 ```  2. 在小程序的配置文件 app.json 中配置分享相关的信息，例如分享标题、分享...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值