jssdk_jssdk分享设置 - CSDN
精华内容
参与话题
  • JSSDK

    2019-07-09 10:18:21
    一、JSSDK 1、开发步骤 绑定安全域名(域名绑定给任意一个公众号) 引入JS 权限验证wx.config({}) ready 所有的开发写在ready中 error 2、分享接口 onMenuShareTimeline 分享到朋友圈 wx.onMenuShareTimeline({ ...

    一、JSSDK

    1、开发步骤

    • 绑定安全域名(域名绑定给任意一个公众号)
    • 引入JS
    • 权限验证wx.config({})
    • ready 所有的开发写在ready中
    • error

    2、分享接口

    • onMenuShareTimeline 分享到朋友圈

        wx.onMenuShareTimeline({
      
            title: '', // 分享标题
      
            link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      
            imgUrl: '', // 分享图标
      
            success: function () { 
      
                // 用户确认分享后执行的回调函数
      
            },
      
            cancel: function () { 
      
                // 用户取消分享后执行的回调函数
      
            }
      
        });
    • onMenuShareAppMessage 分享给朋友

        wx.onMenuShareAppMessage({
      
            title: '', // 分享标题
      
            desc: '', // 分享描述
      
            link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      
            imgUrl: '', // 分享图标
      
            type: '', // 分享类型,music、video或link,不填默认为link
      
            dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
      
            success: function () { 
      
                // 用户确认分享后执行的回调函数
      
            },
      
            cancel: function () { 
      
                // 用户取消分享后执行的回调函数
      
            }
      
        });
    • onMenuShareQQ 分享到QQ

        wx.onMenuShareQQ({
      
            title: '', // 分享标题
      
            desc: '', // 分享描述
      
            link: '', // 分享链接
      
            imgUrl: '', // 分享图标
      
            success: function () { 
      
               // 用户确认分享后执行的回调函数
      
            },
      
            cancel: function () { 
      
               // 用户取消分享后执行的回调函数
      
            }
      
        });
    • onMenuShareWeibo 分享到腾讯微博

        wx.onMenuShareWeibo({
      
            title: '', // 分享标题
      
            desc: '', // 分享描述
      
            link: '', // 分享链接
      
            imgUrl: '', // 分享图标
      
            success: function () { 
      
               // 用户确认分享后执行的回调函数
      
            },
      
            cancel: function () { 
      
                // 用户取消分享后执行的回调函数
      
            }
      
        });
    • onMenuShareQZone 分享到QQ空间

        wx.onMenuShareQZone({
      
            title: '', // 分享标题
      
            desc: '', // 分享描述
      
            link: '', // 分享链接
      
            imgUrl: '', // 分享图标
      
            success: function () { 
      
               // 用户确认分享后执行的回调函数
      
            },
      
            cancel: function () { 
      
                // 用户取消分享后执行的回调函数
      
            }
      
        });

      文档https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

    3、图像接口

    • chooseImage 拍照或从手机相册中选图接口

        wx.chooseImage({
      
            count: 1, // 默认9
      
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
      
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
      
            success: function (res) {
      
                var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
      
            }
      
        });
    • previewImage 预览图片接口

        wx.previewImage({
      
            current: '', // 当前显示图片的http链接
      
            urls: [] // 需要预览的图片http链接列表
      
        });
    • uploadImage 上传图片接口

        wx.uploadImage({
      
            localId: '', // 需要上传的图片的本地ID,由chooseImage接口获得
      
            isShowProgressTips: 1, // 默认为1,显示进度提示
      
            success: function (res) {
      
                var serverId = res.serverId; // 返回图片的服务器端ID
      
            }
      
        });
    • downloadImage 下载图片接口

        wx.downloadImage({
      
            serverId: '', // 需要下载的图片的服务器端ID,由uploadImage接口获得
      
            isShowProgressTips: 1, // 默认为1,显示进度提示
      
            success: function (res) {
      
                var localId = res.localId; // 返回图片下载后的本地ID
      
            }
      
        });
    • getLocalImgData 获取本地图片接口

        wx.getLocalImgData({
      
            localId: '', // 图片的localID
      
            success: function (res) {
      
                var localData = res.localData; // localData是图片的base64数据,可以用img标签显示
      
            }
      
        });

    4、语音接口

    • startRecord 开始录音接口

        wx.startRecord();
    • stopRecord 停止录音接口

        wx.stopRecord({
      
            success: function (res) {
      
                var localId = res.localId;
      
            }
      
        });
    • onVoiceRecordEnd 监听录音自动停止接口

        wx.onVoiceRecordEnd({
      
            // 录音时间超过一分钟没有停止的时候会执行 complete 回调
      
            complete: function (res) {
      
                var localId = res.localId; 
      
            }
      
        });
    • playVoice 播放语音接口

        wx.playVoice({
      
            localId: '' // 需要播放的音频的本地ID,由stopRecord接口获得
      
        });
    • pauseVoice 暂停播放接口

        wx.pauseVoice({
      
            localId: '' // 需要暂停的音频的本地ID,由stopRecord接口获得
      
        });
    • stopVoice 停止播放接口

        wx.stopVoice({
      
            localId: '' // 需要停止的音频的本地ID,由stopRecord接口获得
      
        });
    • onVoicePlayEnd 监听语音播放完毕接口

        wx.onVoicePlayEnd({
      
            success: function (res) {
      
                var localId = res.localId; // 返回音频的本地ID
      
            }
      
        });
    • uploadVoice 上传语音接口

        wx.uploadVoice({
      
            localId: '', // 需要上传的音频的本地ID,由stopRecord接口获得
      
            isShowProgressTips: 1, // 默认为1,显示进度提示
      
                success: function (res) {
      
                var serverId = res.serverId; // 返回音频的服务器端ID
      
            }
      
        });
    • downloadVoice 下载语音接口

        wx.downloadVoice({
      
            serverId: '', // 需要下载的音频的服务器端ID,由uploadVoice接口获得
      
            isShowProgressTips: 1, // 默认为1,显示进度提示
      
            success: function (res) {
      
                var localId = res.localId; // 返回音频的本地ID
      
            }
      
        });

    5、智能接口

    • translateVoice 识别音频并返回识别结果接口

        wx.translateVoice({
      
           localId: '', // 需要识别的音频的本地Id,由录音相关接口获得
      
            isShowProgressTips: 1, // 默认为1,显示进度提示
      
            success: function (res) {
      
                alert(res.translateResult); // 语音识别的结果
      
            }
      
        });

    6、设备信息

    • getNetworkType 网络状态

        wx.getNetworkType({
      
            success: function (res) {
      
                var networkType = res.networkType; // 返回网络类型2g,3g,4g,wifi
      
            }
      
        });

    7、定位

    • getLocation 获取地理位置接口

        wx.getLocation({
      
            type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
      
            success: function (res) {
      
                var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
      
                var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
      
                var speed = res.speed; // 速度,以米/每秒计
      
                var accuracy = res.accuracy; // 位置精度
      
            }
      
        });
    • openLocation 使用微信内置地图查看位置接口

        wx.openLocation({
      
            latitude: 0, // 纬度,浮点数,范围为90 ~ -90
      
            longitude: 0, // 经度,浮点数,范围为180 ~ -180。
      
            name: '', // 位置名
      
            address: '', // 地址详情说明
      
            scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大
      
            infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
      
        });

    8、界面操作

    • closeWindow 关闭当前网页窗口接口
    • hideAllNonBaseMenuItem 隐藏所有非基础按钮接口
    • showAllNonBaseMenuItem 显示所有功能按钮接口
    • hideMenuItems 批量隐藏功能按钮接口
    • showMenuItems 批量显示功能按钮接口

    9、扫一扫

    • scanQRCode

        wx.scanQRCode({
      
            needResult: 0, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
      
            scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码,默认二者都有
      
            success: function (res) {
      
            var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
      
        }
      
        });

    二、ECS 搭建ftp服务器

    1、客户端准备

    • FileZilla
    • sublime 插件 ftp-sync

    2、安装vsftpd

    yum install vsftpd

    3、开启ftp服务,并设置开机自启动

    systemctl start vsftpd
    systemctl enable vsftpd

    4、创建一个用户

    • 默认:root用户不能登录ftp
    • 目前只能匿名登录

        useradd 用户名
        passwd 刚刚创建的用户名

    5、更改目录所属用户

    chown -R 用户名 目录地址

    转载于:https://www.cnblogs.com/DCL1314/p/7911645.html

    展开全文
  • 微信公众号开发引入jssdk,分享配置

    千次阅读 2019-09-24 17:06:06
    再引入jssdk的js文件 在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.4.0.js 如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:...

    首先需要公众号管理员去设置JS接口安全域名

    再引入jssdk的js文件

    在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.4.0.js

    如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:http://res2.wx.qq.com/open/js/jweixin-1.4.0.js (支持https)。

    备注:支持使用 AMD/CMD 标准模块加载方法加载

    微信公众号发开文档

    先拿到当前页面的url 发送给后端 我们url上没有带hash 所有不用考虑去掉hash 此链接必须与分享时的链接一致,否则分享接口失败。如果url是变化的,那就在变化完之后再去换区签名 前端只需要把url传给后端,后端来获得签名再返给前端。

    本人是在vue里开发 所以签名代码写在了updated钩子里

    updated() {
        if (window.location.search.indexOf("?code") == -1) {
          if (this.testUrl != window.location.href) {
            this.url = location.href;
            this.$http
              .post("这里是后端接口名?url=" + encodeURIComponent(this.url))
              .then(({ data }) => {
                if (data.succeed) {
                  wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                    appId: data.data.appid, // 必填,公众号的唯一标识
                    timestamp: data.data.timestamp, // 必填,生成签名的时间戳
                    nonceStr: data.data.nonceStr, // 必填,生成签名的随机串
                    signature: data.data.signature, // 必填,签名
                    jsApiList: [
                      "updateAppMessageShareData",
                      "updateTimelineShareData"
                    ] // 必填,需要使用的JS接口列表
                  });
                }
              });
          }
          this.testUrl = window.location.href;
        }
      }

    前后端处理url时候 尽量都使用encodeURLComponent()方法去处理一下,否则可能会出错

    获取签名成功后就去配置分享样式的配置 wx.ready是签名获取成功后执行的回调 这里我是封装了一个方法,因为分享的信息是动态的

    generateShareLink(title, desc, image) {
          let link = "";
          if (location.search.indexOf("?studentId") == 0) {
            link = this.url;
          } else {
            if (localStorage.getItem("userId")) {
              link =
                this.url +
                "?studentId=" +
                localStorage.getItem("userId") +
                "&schoolId=" +
                localStorage.getItem("schoolId");
            } else {
              link = this.url;
            }
          }
          wx.ready(function() {
            //需在用户可能点击分享按钮前就先调用
            wx.updateAppMessageShareData({
              title: title, // 分享标题
              desc: desc, // 分享描述
              link: link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: image, // 分享图标
              success: function() {
              }
            });
            wx.updateTimelineShareData({
              title: title, // 分享标题
              desc: desc, // 分享描述
              link: link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: image, // 分享图标
              type: "", // 分享类型,music、video或link,不填默认为link
              dataUrl: "", // 如果type是music或video,则要提供数据链接,默认为空
              success: function() {
              }
            });
          });
          wx.error(function(res) {
            // console.log(res.errMsg)// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
          });
        }

    wx.updateAppMessageShareData() 是分享到朋友或者QQ

    wx.updateTimelineShareData() 是分享到朋友圈或者QQ空间

    还有几个其他方法 马上要废除了,所以没有引用。详细去开发文档查看

    遇到的问题是 分享给一个用户,这个用户再次分享此链接就不走自己配置的分享接口;

    解决:

    前后端联调发现在前端把链接发送给后端,后端收到的时候url已经是被截取过的,不是完整的url了。

    通过encodeURLComponent处理后,解决此问题。

    开发过程中发现报了一个

    此报错可能是因为引入位置的原因 之前是因为引入位置错误 后改到了 index.html 入口文件

    后又报了此错误直接使用了npm 的包 解决了

    npm install weixin-js-sdk

    import wx from 'weixin-js-sdk'

    如果后端没有此包 就会报一个浏览器安全问题的错误

    Refused to connect to 'ws://127.0.0.1:22057/' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

    此包前后端都需要下,注意

    总结:

    1、先配置js安全域名(安全域名必须与分享链接的域名一致)

    2、引入jssdk(可以引入地址,可以使用npm安装)

    3、将url传给后端获取签名(前端只需要传url)

    4、将签名配置到wx.config里,(配置信息必须一一对应)

    5、签名成功后会执行wx.ready方法,(在此方法中配置分享接口)

    展开全文
  • 如何使用JSSDK

    千次阅读 2019-02-14 16:33:41
    一、引入JSSDK(注意项目是http或者是https) <script src=https://res2.wx.qq.com/open/js/jweixin-1.4.0.js></script> 二、将wx配置为eslint的全局属性 //////.eslintrc.js ...

    一、引入JSSDK(注意项目是http或者是https)

    <script src=https://res2.wx.qq.com/open/js/jweixin-1.4.0.js></script>

    二、将wx配置为eslint的全局属性

    //.eslintrc.js
    
    globals: {wx: true}

    三、获取后台返回的签名配置(其中url入参是#之前)

    let data = await this.axios.post(this.API_URL.signature, {
    
        'signUrl': location.href.split('#')[0],
    
        'tenantId': sessionStorage.getItem('tenantId')
    
    }, true)

    四、根据得到的签名配置进行设置

    setWxTop () {
    
        let res = sessionStorage.getItem('wxSignature')
    
        if (res) {
    
            wx.config({
    
                debug: false,
    
                appId: res.appId,
    
                timestamp: res.timestamp,
    
                nonceStr: res.nonceStr,
    
                signature: res.signature,
    
                jsApiList: ['hideOptionMenu']
    
            })
    
            wx.ready(function () {
    
                wx.hideOptionMenu()
    
            })
    
        }
    
    },
    
    

     

    展开全文
  • H5,JSSDK

    千次阅读 2018-10-17 11:53:14
    JSSDK JSSDK 是腾讯微信新出的完全用 Java 脚本语言书写的 sdk 开发工具包,他是面向服务的编程,它的编程速度 效率是 java 编程的 5——10 倍; Javascript 的功能固然很强大,但是对移动平台的支持不是很好。所以...

    JSSDK

    JSSDK 是腾讯微信新出的完全用 Java 脚本语言书写的 sdk 开发工具包,他是面向服务的编程,它的编程速度 效率是 java 编程的 5——10 倍;

    Javascript 的功能固然很强大,但是对移动平台的支持不是很好。所以微信官方就出了一个浏览器,内置在微信中,阉割了一下原生 js 的支持,并且封装好了 sdk ,提供的 sdk 功能还是比较强大,可以直接调用相机,相册,录音这些功能。但是要使用的话需要微信公众号的凭据,需要在微信服务器和开发者服务器进行双向绑定。

    微信jssdk使用心得与源码分析:
    https://blog.csdn.net/u013987661/article/details/53170826
    微信JS SDK Demo 官方案例:
    https://blog.csdn.net/moqiang02/article/details/42930419?utm_source=blogxgwz0

    HTML5

    1、HTML5 的游戏开发,例如简单的微信小游戏,打飞机等,也有白鹭egret 引擎,还有 cocos2d-js 等等。
    2、网站包括PC端和移动端,响应式网站适配不同的终端。
    3、Hybrid App是指介于 web-app、native-app 这两者之间的 app ,它虽然看上去是一个 Native App ,但只有一个 UI WebView,里面访问的是一个Web App,比如街旁网最开始的应用就是包了个客户端的壳,其实里面是HTML5的网页,后来才推出真正的原生应用。
    4、基于微信平台的开发,微信开放JSSDK让H5的开发人员可以调用底层功能,实现扫一扫,卡卷,微信支付,等操作
    5、前不久微信之父张小龙也说,微信将要推出应用号,无需下载,无需更新。H5在这里面将发挥很大的作用。

    两大特点:

    • 强化了Web网页的表现性能。除了可描绘二维图形外,还准备了用于播放视频和音频的标签。
    • 追加了本地数据库等Web应用的功能。

    H5学习教程( PHP 中文网):http://www.php.cn/course/14.html

    展开全文
  • jssdk

    2019-08-06 02:02:40
    转载于:https://www.cnblogs.com/huiandong/p/9291147.html
  • 微信开发jssdk

    2020-07-30 23:30:03
    微信开发jssdk
  • JSSDK

    2019-07-10 07:19:10
    如果只是使用wx.miniProgram.navigateTo这种导航的接口,jssdk可以不用做配置,引用js后直接使用就行,如果chooseImage这种,就需要获取配置了,步骤如下: 先在后端通过AppID和AppSecret取到access_token,并缓存...
  • 微信jssdk基本使用

    万次阅读 2017-12-11 20:36:58
    对于如何使用jssdk并没有,太大难度,对于不熟悉的人来说,最大的坑在它配置的过程中。  使用jssdk需要注意以下几点:  1.需要在微信公众平台设置js接口安全域名。需要注意的是此处你需要设置的是域名,使用ip是...
  • vue调用微信jssdk,引用分享接口

    千次阅读 2020-06-11 09:36:20
    首先安装jssdk npm install weixin-js-sdk --save-dev 然后在新建一个公共的js文件,比如share.js 在share.js中引入weixin-js-sdk import wx from 'weixin-js-sdk'; 在调用微信的接口之前要先获取他们的appid...
  • ![图片说明](https://img-ask.csdn.net/upload/201602/15/1455521560_936050.png) 有人遇到过报 timeout 这个问题吗,实在找不到原因。求大神!!
  • 微信jssdk调用地图(openLocation)小坑

    万次阅读 2017-09-11 22:57:32
    今天发现微信jssdk里调用微信地图的一个小坑,记录一下。具体调用如下:wx.openLocation(function(){ longitude: longitude, latitude: latitude, name: name, address: address });乍看之下调用没有什么问题,...
  • jssdk版本,JSSDK 1.3.2 小程序文档明确指定,我一开始直接从微信公众号复制的jssdk的url导入,是1.2.0版本,小程序web-view无法使用 jssdk接口调用配置的appId和secret都要使用公众号的,不能使用小程序的appId和...
  • 如题。。用这个接口给我返回的是locolId列表,可以当src使用。我知道可以上传到微信服务器获取mediaId,我的服务器可以用这个mediaId从微信服务器那边取图片。。。我想请问有没有办法从我前台直接取得图片数据,直接...
  • 第一次用微信调用时,总是出现这个提示框,只要点击确定,原有的 animate就出现了问题。,如何用js监控这个提示框的出现
  • HTML5微信jssdk录音播放语音的方法

    万次阅读 2017-01-13 14:22:08
    HTML5微信jssdk录音播放语音的方法 需要注意的2个问题 1 就是一定要判断1秒内 录音都不算 ps:太短不能录音 2 录音超过1分钟 会发现正在录音突然消失 所以要写wx.onVoiceRecordEnd 这个是是1分钟会自动出发 然后写...
  • 微信填坑之jssdk中的图片下载api

    千次阅读 2018-01-20 10:34:09
    在jsddk中有下载图片接口,通过接口我们可以拿到一个图片的base64码,但是这个在Android和ios中是不同。 在Android中,这串base64码是不带前缀的的也就是没有data:img/jpg等信息,而在ios中会包含这个信息。...
  • 微信公众平台JSSDK .net(C#)版,含demo

    千次下载 热门讨论 2020-07-26 23:31:00
    微信公众平台JSSDK .net(C#)版,sdk是从php版翻译过来的,修改了一些使其符合.net平台的特性,含demo
  • 微信接入jssdk前面一直是正常的,今天突然发现分享出去的内容没有缩略图和文字,开启debug模式,果然报“invalid signature” image.png 可是代码没有改动过,猜测是配置的问题。为了排除问题,打印日志发现...
  • VUE项目引入微信jssdk

    万次阅读 2017-04-26 03:10:11
    我们的一个vue + webpack的 SPA项目需要在微信中使用,因此需要导入微信的jssdk库。 通过搜索发现npm有微信jssdk的依赖包: weixin-js-sdk, 于是 导入依赖包 npm i -S weixin-js-sdk 页面中 import wx from 'weixin-...
  • 【VUE】vue中使用微信jssdk

    万次阅读 2018-06-22 11:50:50
    首先,确保你安装了weixin-js-sdk。如果还没有安装 npm install weixin-js-sdk在...由于使用微信js需要进行授权配置,所以需要使用ajax请求从服务端获取微信jssdk的授权参数,ajax请求我这里使用的axiosthis.axios...
1 2 3 4 5 ... 20
收藏数 7,384
精华内容 2,953
关键字:

jssdk