vue 使用微信jssdk,调用微信相册上传图片功能

vue 使用微信jssdk

1、引入weixin-js-sdk

npm install weixin-js-sdk

使用文档 https://www.npmjs.com/package/weixin-js-sdk

2、配置 vue中微信jssdk配置

import wx from 'weixin-js-sdk'
 created(){ //微信jssdk配置
 let timestamp=new Date().getTime();//时间戳
 let noncestr=Math.random().toString(36).substr(2);//随机字符串
 let url = "http://"+window.location.host+'/' ;//获取锚点之前的链接
 let dataJ={
  timestamp,
  noncestr,
  url
 }
 //获取签名 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
 getSignatureApi(dataJ).then(res=>{//调用获取签名方法
  wx.config({
  debug: false,
  appId: '12312312312312', // 必填，公众号的唯一标识
  timestamp:timestamp , // 必填，生成签名的时间戳
  nonceStr: noncestr, // 必填，生成签名的随机串
  signature:res.signature,
  jsApiList: [
   'chooseImage',//选择图片
   'uploadImage'//上传图片
  ] // 必填，需要使用的JS接口列表
  });
 })
}

3、使用

methods: {
  choseFile:function(id,index){//点击事件选择图片
 var _this=this;
 wx.chooseImage({//
  count: 1, // 默认9
  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
  success: function (res) {
  let localId=res.localIds;//获取到本地localIds
  wx.uploadImage({//上传到微信服务器
   localId: localId.toString(), // 需要上传的图片的本地ID，由chooseImage接口获得
   isShowProgressTips: 1, // 默认为1，显示进度提示
   success: function (ret) {}
  });
  }
 });
 }
}

补充知识：Vue公众号开发调用微信扫一扫接口实现扫码功能（JSSDK）

1、安装、引用微信js-sdk

#通过yarn安装 yarn add weixin-js-sdk

#通过npm安装 npm i weixin-js-sdk

项目中的引用 import wx from 'weixin-js-sdk'

2、调用sign接口传入当前环境的url、公众号签名信息

3、methods（数据处理）

wx.scanQRCode 调用微信的扫一扫接口（官方文档地址可查看参数介绍）

needResult 默认为0，扫描结果由微信处理，1则直接返回扫描结果（根据自己的项目需求）

resultStr 二维码中携带的参数 (needResult为1时，扫码返回结果)

处理扫码后的参数并赋值，调用项目中的接口跳转页面等操作（根据自己的项目需要）

以上这篇vue 使用微信jssdk,调用微信相册上传图片功能就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信JSSDK分享功能图文实例详解

    微信JSSDK分享功能图文实例详解

    本文实例讲述了微信JSSDK分享功能.分享给大家供大家参考,具体如下: 这里以微信分享到朋友圈,分享给微信好友为例为参考,进行调用测试,想添加其他的功能,自行查看开发人员文档即可 工欲善其事,必先利其器,好好利用下边的帮助工具,都是腾讯给开发人员的工具 1.微信开发者说明文档:点击查看 2.微信WEB开发者工具: Windows 64位版本:下载地址 Windows 32位版本:下载地址 Mac版本:下载地址 3.微信JSSDK分享sample:点击下载 4.在线DEMO:http://203.

  • 使用Vue实现图片上传的三种方式

    项目中需要上传图片可谓是经常遇到的需求,本文将介绍 3 种不同的图片上传方式,在这总结分享一下,有什么建议或者意见,请大家踊跃提出来. 没有业务场景的功能都是耍流氓,那么我们先来模拟一个需要实现的业务场景.假设我们要做一个后台系统添加商品的页面,有一些商品名称.信息等字段,还有需要上传商品轮播图的需求. 我们就以Vue.Element-ui,封装组件为例子聊聊如何实现这个功能.其他框架或者不用框架实现的思路都差不多,本文主要聊聊实现思路. 1.云储存 常见的 七牛云,OSS(阿里云)等,这些云平

  • vue中使用WX-JSSDK的两种方法(推荐)

    公司最近有微信公众号的需求,那么微信登录授权和如何使用WX-JSSDk实现分享等等肯定是最头疼的问题.本人也是第一次开发微信公众号,在网上看了很多篇博客,最终选定了两种方法,并且亲测有效. 一.通过全局,在router.afterEach中定义 1.首先通过yarn add weixin-js-sdk/ npm i weixin-js-sdk 2.将微信jsdk挂载到全局上 在utils目录下新建WechatPlugin.js WechatPlugin.js import wx from 'we

  • vue 使用微信jssdk,调用微信相册上传图片功能

    vue 使用微信jssdk 1.引入weixin-js-sdk npm install weixin-js-sdk 使用文档 https://www.npmjs.com/package/weixin-js-sdk 2.配置 vue中微信jssdk配置 import wx from 'weixin-js-sdk' created(){ //微信jssdk配置 let timestamp=new Date().getTime();//时间戳 let noncestr=Math.random().to

  • 微信JSSDK调用微信扫一扫功能的方法

    如何利用微信JSSDK调用微信扫一扫功能?具体内容如下 1. 确保有 调起微信扫一扫接口 权限,测试号可能不行: 2. 导入相关JS <script type="text/javascript" http://test.com/zepto_touch.js"></script> <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweix

  • PHP实现微信JS-SDK接口选择相册及拍照并上传的方法

    PHP实现微信JS-SDK接口选择相册及拍照并上传的方法

    本文实例讲述了PHP实现微信JS-SDK接口选择相册及拍照并上传的方法.分享给大家供大家参考,具体如下: 理解:微信上传接口是拍照,或者选择本地照片,上传到微信的服务器,获取到一个id,通过token与这个id获取到图片,保存到服务器即可. 效果图: 通过微信js接口,调用底层程序. 需要引入js文件,并进行配置. <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> wx.c

  • Android开发中调用系统相册上传图片到服务器OPPO等部分手机上出现短暂的显示桌面问题的解决方法

    要原因是主体样式设置的问题:这里把appTheme设置一个style即可: <item name="android:windowBackground">@color/white</item> <!--下面这个属性很重要,有时候会出现某些机型在调用系统相册的时候,短暂的出现手机桌面现象--> <item name="android:windowIsTranslucent">false</item> <i

  • 微信JS-SDK选取手机照片上传功能

    项目中遇到需要选取照片上传的需求,因为网页运行在微信的浏览器里面,所以用微信的 js-sdk 提供的选取照片功能,来进行项目开发.实际开发中需要用到微信web开发者工具,详细参考链接:https://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html. 1.配置微信JS-SDK相关文件 1).JSSDk使用最新的1.2.0版本:https://res.wx.qq.com/open/js/jweixin-1.2.0.js.

  • 微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)

    需求:点击我们公司的微信公众号,从菜单栏中进入会员中心,如果是新会员则需绑定注册,注册完跳转到用户中心页面,然后给用户发会员卡,如果是老会员,如果以前没有的会员卡的,发一张会员卡给他,如果有,则不做任何处理. 实现:我的思路是这样的,进入会员中心,调用微信API接口,判断用户是否领过卡,若没有领取,则调用微信JS-JDK的addCard()接口.具体实现过程如下(用C#实现): 1创建会员卡 1) 先打开微信开发者文档,先调用创建会员卡接口,在文档的4.1 创建会员卡接口,直接用postman,

  • vue使用微信JS-SDK实现分享功能

    最近开发微信公众号内嵌H5页面,使用vue搭建的项目,由于业务需求,需要实现微信自定义分享功能,所以项目中集成微信JS-SDK.微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包.通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用微信分享.扫一扫.卡券.支付等微信特有的能力,为微信用户提供更优质的网页体验. 1.绑定域名 微信公众号开发测试帐号:  http://mp.weixin.qq.com/debug

  • 微信js-sdk+JAVA实现“分享到朋友圈”和“发送给朋友”功能详解

    主要为以下实现步骤: 1.绑定域名 先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名".(特别提示不需要加上http或者https,吃过亏) 2.页面引入js文件 <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>    <script src="https://res.wx

  • 微信开发之微信jssdk录音功能开发示例

    项目需求简单描述 用户长按录音,松手后直接结束录音,结束录音后,用户可以选择重新录音.播放刚才的录音,上传录音(这里的上传录音指上传到自己服务器,上传步骤是,前端调用wx.uploadVoice,后台再到微信服务器下载音频文件,上传到自己的服务器).注意,音频文件自上传时间算起在微信服务器的有效期为3天.由于后台从微信服务器下载的音频文件是amr格式的,需要后台先把amr文件转换成MP3,前端用audio播放.我们公司是购买阿里云的媒体处理服务进行文件转码的. 调用到的微信接口 // 开始录音接

  • Java微信公众平台开发（13） 微信JSSDK中Config配置

    Java微信公众平台开发（13） 微信JSSDK中Config配置

    前端开发工程师和关注前端开发的开发者们在2015年中肯定被腾讯的JSSDk引爆过,搞APP的.搞前端的甚至是是搞后端的都跑过来凑热闹,一时之间也把微信JSSDK捧得特别牛逼,但是在我们的技术眼里它的实现原理和根本是不能够被改变的,这篇文章就不对其js的实现做任何评价和解说了(因为我也不是很懂,哈哈),这里要说的是它的config配置实现,参考文档:http://mp.weixin.qq.com/wiki/11/74ad127cc054f6b80759c40f77ec03db.html  ! 微信

随机推荐