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


Posted in Javascript onNovember 13, 2020

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、公众号签名信息

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

3、methods(数据处理)

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

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

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

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

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

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

Javascript 相关文章推荐
IE8的JavaScript点击事件(onclick)不兼容的解决方法
Nov 22 Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 Javascript
JavaScript仿支付宝6位数字密码输入框
Dec 29 Javascript
js事件冒泡与事件捕获详解
Feb 20 Javascript
微信小程序开发之toast提示插件使用示例
Jun 08 Javascript
vue.js全局API之nextTick全面解析
Jul 07 Javascript
vue2.0使用swiper组件实现轮播的示例代码
Mar 03 Javascript
Bootstrap实现省市区三级联动(亲测可用)
Jul 26 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
Sep 15 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
Sep 28 Javascript
封装一下vue中的axios示例代码详解
Feb 16 Javascript
小程序实现图片移动缩放效果
May 26 Javascript
vant 解决tab切换插件标题样式自定义的问题
Nov 13 #Javascript
vue 授权获取微信openId操作
Nov 13 #Javascript
详解vue修改elementUI的分页组件视图没更新问题
Nov 13 #Javascript
Vue实现boradcast和dispatch的示例
Nov 13 #Javascript
Vue 列表页带参数进详情页的操作(router-link)
Nov 13 #Javascript
Vue 3.0中jsx语法的使用
Nov 13 #Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
Nov 13 #Javascript
You might like
PHP 数据结构 算法描述 冒泡排序 bubble sort
2011/07/10 PHP
Laravel利用gulp如何构建前端资源详解
2018/06/03 PHP
Google 静态地图API实现代码
2010/11/19 Javascript
JS判断变量是否为空判断是否null
2014/07/25 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
2014/08/04 Javascript
JS实现从网页顶部掉下弹出层效果的方法
2015/08/06 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
2015/08/17 Javascript
js实现网站最上边可关闭的浮动广告条代码
2015/09/04 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
2015/11/11 Javascript
微信小程序 Video API实例详解
2016/10/02 Javascript
利用CDN加速react webpack打包后的文件详解
2018/02/22 Javascript
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
Vue项目服务器部署之子目录部署方法
2019/05/12 Javascript
微信小程序在线客服自动回复功能(基于node)
2019/07/03 Javascript
ES6的异步操作之promise用法和async函数的具体使用
2019/12/06 Javascript
Vue——前端生成二维码的示例
2020/12/19 Vue.js
Vue仿百度搜索功能
2020/12/28 Vue.js
js定时器出现第一次延迟的原因及解决方法
2021/01/04 Javascript
[05:24]TI9采访——教练
2019/08/24 DOTA
python实现获取Ip归属地等信息
2016/08/27 Python
利用Python实现在同一网络中的本地文件共享方法
2018/06/04 Python
python使用opencv驱动摄像头的方法
2018/08/03 Python
Django中间件基础用法详解
2019/07/18 Python
在TensorFlow中实现矩阵维度扩展
2020/05/22 Python
Python while true实现爬虫定时任务
2020/06/08 Python
Python bisect模块原理及常见实例
2020/06/17 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
Python控制鼠标键盘代码实例
2020/12/08 Python
详解利用canvas实现环形进度条的方法
2019/06/12 HTML / CSS
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
2013/03/25 HTML / CSS
志愿者活动总结报告
2014/06/27 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
公司离职证明标准格式
2014/11/18 职场文书
纪检监察立案决定书
2015/06/24 职场文书
浅谈Python数学建模之数据导入
2021/06/23 Python
win11开机发生死循环重启怎么办?win11开机发生死循环重启解决方法
2022/08/05 数码科技