H5页面微信分享流程和实现(uni-app)

清疚 2022-10-17 00:38 358阅读 0赞

# 适用场景： #

通过uni-app实现的H5页面分享功能。  
要求链接必须在微信端内打开。手机上浏览器打开无效。

--------------------

# 流程描述： #

#### 第一步安装js-sdk。 ####

方式一：NPM安装方式

npm install jweixin-module --save

方式二：下载使用方式。（本人用的就是这种）  
在 uniapp 中可以使用模块方式引用微信 js-sdk ，微信官网直接下载的使用有问题。  
下载地址：https://unpkg.com/jweixin-module@1.6.0/lib/index.js

//npm安装的引用
    var jweixin = require('jweixin-module')
    //自己下载根据路径引用
    var jweixin = require('../../common/jweixin-module')

--------------------

#### 第二步需要转发页面添加代码。 ####

this.$u.api.wxshareApi是封装好的请求数据的接口。surl是地址用于后端请求微信签名，具体操作交给后端。我们这边可以给他传递surl，也可以让后端用项目在网上的根域名直接请求。  
以下代码是我修改后的，原来代码地址：https://ask.dcloud.net.cn/article/36284

//引入资源
    var jweixin = require('../../common/jweixin-module')
    export default { 
    	data() { 
    		return { 
    			wxsharetip:false
    		}
    	},
    	methods: { 
    		wxshare(item){ 
    			//#ifdef H5
    			//据说可以解决URL中带参数的问题，前台用的js编码，后台php解码 
    			//var surl = encodeURIComponent(window.location.href.split('#')[0]); 
    			this.$u.api.wxshareApi({ 
    				//url:surl
    			}).then(res => { 
    				jweixin.config({ 
    					debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 
    					appId: res.data.appId, // 必填，公众号的唯一标识 
    					timestamp: res.data.timestamp, // 必填，生成签名的时间戳 
    					nonceStr: res.data.nonceStr, // 必填，生成签名的随机串 
    					signature: res.data.signature, // 必填，签名，见附录1 
    					surl: res.data.surl, //自己添加的，debug为true的时候可以网页打印出对应的URL是否正确 
    					jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"]  
    				}); 
    				 jweixin.ready(()=> { 
    				 //自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0） 
                           jweixin.updateAppMessageShareData({   
                               title: '标题', // 分享标题 
                               desc: "描述内容", // 分享描述 
                               link: "链接", // 分享链接 
                               imgUrl: '显示图片', // 分享图标 
                               success: res => {  
                               	//点击分享时提示用户分享图，
    							this.wxsharetip = true
    				 	    },  
                               cancel: function() {   
                                   // 用户取消分享后执行的回调函数 
                               }  
                           });  
                           //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0） 
                           jweixin.updateTimelineShareData({   
                               title: '标题', // 分享标题 
                               link: '链接', // 分享链接 
                               imgUrl: '显示图片', // 分享图标 
                               success: res => {  
                               	//点击分享时提示用户分享图，
    							this.wxsharetip = true
    				 	    }, 
                               cancel: function() {   
                                   // 用户取消分享后执行的回调函数 
                               }  
                           }); 
    				 }) 
    			})
    			//#endif
    		}
    	}
    }

--------------------

#### 具体流程展示。 ####

在我的项目中现在页面引用js-sdk文件，当用户点击分享时，将要分享的数据标题，描述，图片传递到wxshare()中。通过wxsharetip这个变量提示用户分享图是否显示，this.wxsharetip = true。  
步骤一：点击分享  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvbmcxOTk4MTIzMQ_size_16_color_FFFFFF_t_70]  
步骤二：提示用户点击三个点那个按钮。  
提示图片UI还没有出图，先凑合着看看  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvbmcxOTk4MTIzMQ_size_16_color_FFFFFF_t_70 1]

步骤三：用户自己选择分享好友还是朋友圈  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvbmcxOTk4MTIzMQ_size_16_color_FFFFFF_t_70 2]

步骤四：最终结果展示![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvbmcxOTk4MTIzMQ_size_16_color_FFFFFF_t_70 3]

# 需要注意： #

1：后端请求微信加密的地址，一定要和项目放置的地址域名一致。  
2：这里功能只适用于H5页面，且用户在微信内打开，在浏览器打开无效。  
3：分享的链接和加密的地址需要同一域名

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvbmcxOTk4MTIzMQ_size_16_color_FFFFFF_t_70]: /images/20221014/fa48a079286d467cac8ec84175bac12f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvbmcxOTk4MTIzMQ_size_16_color_FFFFFF_t_70 1]: /images/20221014/ed80ef59963746a4a69ce1b4ee40a57a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvbmcxOTk4MTIzMQ_size_16_color_FFFFFF_t_70 2]: /images/20221014/126fedb66fd5400fbe400f2d5055bae7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvbmcxOTk4MTIzMQ_size_16_color_FFFFFF_t_70 3]: /images/20221014/172fd75c062b44efa2654171b5895261.png