UNI-APP 开发微信公众号（H5）JSSDK 分享到微信中详解

首先声明本人纯小白，各demo基本网站上找来测试了两三天拼凑出来的，做不了技术解答哈望见谅，分享出来只是希望能够帮到像我一样的小白
1、安装js-sdk
可参考官方提供的 https://ask.dcloud.net.cn/article/35380
有两种方法：
①NPM安装

npm install jweixin-module --save

②直接下载引用（下载链接：https://unpkg.com/jweixin-module@1.4.1/out/index.js）
两种方式的差别，我感觉主要是npm安装的方式引用就是直接引用包名，下载引用需要引用详细地址，也不知道这种理解正确不。

var jweixin = require('jweixin-module')

var jweixin = require('jweixin-module/index.js')

2、在需要转发的页面onshow()里添加分享代码

// #ifdef H5  
            var jweixin = require('jweixin-module') //npm安装的引用  
            var surl = encodeURIComponent(window.location.href.split('#')[0]); //据说可以解决URL中带参数的问题，前台用的js编码，后台php解码  
            uni.request({  
                url: '/jssdk/gettokens.php',  
                method: 'POST',  
                header: {  
                    'content-type': 'application/x-www-form-urlencoded'  //post一定要带这个header，被这里坑了半天  
                },  
                data: {  
                    url: surl  
                },  
                success: 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(function() {  
                        //自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）  
                        jweixin.updateAppMessageShareData({  
                            title: '标题', // 分享标题  
                            desc: "描述内容", // 分享描述  
                            link: "链接", // 分享链接  
                            imgUrl: '显示图片', // 分享图标                                
                            success: function() {  
                                // 用户确认分享后执行的回调函数  
                            },  
                            cancel: function() {  
                                // 用户取消分享后执行的回调函数  
                            }  
                        });  
                        //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）  
                        jweixin.updateTimelineShareData({  
                            title: '标题', // 分享标题                                  
                            link: '链接', // 分享链接  
                            imgUrl: '显示图片', // 分享图标                                
                            success: function() {  
                                // 用户确认分享后执行的回调函数  
                            },  
                            cancel: function() {  
                                // 用户取消分享后执行的回调函数  
                            }  
                        });  

                    });  
                },  
                fail: () => {  
                    console.log('request fail', err);  
                },  
                complete: () => {}  
            });  

// #endif  

3、gettokens.php文件，PHP后台api接口，用于前台request请求，返回wx.config部分。在此文件中修改成自己的appid和appsecre。可以在PC端直接访问此接口，到下面的签名校验工具中先校验签名文件是否正常
4、access_token.php 缓存token
5、jsapi_ticket.php 缓存ticket，可以从此文件中获取jsapi_ticket到微信 JS 接口签名校验工具中校验签名是否正确（https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign）
6、jssdk_wx.php 后台签名验证文件，此4个文件可从下面附件下载