热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

这篇文章主要介绍了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,调用微信相册上传图片功能就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。


推荐阅读
  • PHPcURL获取微信公众号access_token的实例php实例:这篇文章主要介绍了PHPcURL获取微信公众号access_token的实例,需要的朋友可以参考下1.开发微信 ... [详细]
  • 42VERSE & 圆圈徽章,Web3 社交的流派之争——针对两个国内案例的调研
    01 行业分析本文所研究的细分赛道为:Web3应用层——社交与内容场景——DID/创新场景(以元宇宙3D空间为 ... [详细]
  • 1.Looper消息机制,postDelay的Message怎么处理,Looper中的消息是同步还是异步?什么情况下会有异步消息Andr ... [详细]
  • Centos7.6安装Gitlab教程及注意事项
    本文介绍了在Centos7.6系统下安装Gitlab的详细教程,并提供了一些注意事项。教程包括查看系统版本、安装必要的软件包、配置防火墙等步骤。同时,还强调了使用阿里云服务器时的特殊配置需求,以及建议至少4GB的可用RAM来运行GitLab。 ... [详细]
  • 如何在服务器主机上实现文件共享的方法和工具
    本文介绍了在服务器主机上实现文件共享的方法和工具,包括Linux主机和Windows主机的文件传输方式,Web运维和FTP/SFTP客户端运维两种方式,以及使用WinSCP工具将文件上传至Linux云服务器的操作方法。此外,还介绍了在迁移过程中需要安装迁移Agent并输入目的端服务器所在华为云的AK/SK,以及主机迁移服务会收集的源端服务器信息。 ... [详细]
  • Node.js学习笔记(一)package.json及cnpm
    本文介绍了Node.js中包的概念,以及如何使用包来统一管理具有相互依赖关系的模块。同时还介绍了NPM(Node Package Manager)的基本介绍和使用方法,以及如何通过NPM下载第三方模块。 ... [详细]
  • jquery popupDialog 使用 加载jsp页面办法
    php教程|PHP开发jqueryphp教程-PHP开发如下所示:软件市场源码,vsCode字体不变,ubuntu的所有版本,taotomcat,sqlite连接php,个人域名服 ... [详细]
  • 在开发四国军棋的游戏中,通过flex联机游戏开发-四国军棋游戏(五)-提炼棋类开发api,我们提炼出了第一个关于棋类游戏开发的api-FlexChessAPI,这个a ... [详细]
  • JS·经典·炫彩菜单(动画效果) for jquery
    CSS样式body{font-size:12px;}.menuBox{width:50%;height:auto;margin:0auto;}.menuBoxul{margin:0 ... [详细]
  • linux 修改root密码_Linux强制用户首次登陆修改密码
    一个执着于技术的公众号地方前言Linux强制用户首次登陆修改密码,这应该是RHCE认证中用户管理部分,属于很基础的内容了。可是我忘记了,所 ... [详细]
  • Jenkins自动部署SpringBoot项目实践教程
    Jenkins自动部署SpringBoot项目实践教程-目录1、Jenkins安装2、Jenkins插件安装3、点击添加凭据4、Jenkins环境配置4.1、全局配置4.2、系统配 ... [详细]
  • 本文主要介绍关于深度学习,pytorch,百度云服务器,百度机器学习,BCC的知识点,对【BCCBML使用记录百度云服务器百度机器学习深度学习】和【机器学习、深度学习、人工智能、云计算、和大 ... [详细]
  • 本文介绍了Composer依赖管理的重要性及使用方法。对于现代语言而言,包管理器是标配,而Composer作为PHP的包管理器,解决了PEAR的问题,并且使用简单,方便提交自己的包。文章还提到了使用Composer能够避免各种include的问题,避免命名空间冲突,并且能够方便地安装升级扩展包。 ... [详细]
  • 本文详细介绍了如何创建和使用VUE uni-app开发环境,包括通过HBuilderX可视化界面和通过vue-cli命令执行的方法。文章内容简单清晰,易于学习与理解。通过学习本文,读者可以深入了解VUE uni-app开发环境,并通过实践验证掌握具体的使用情况。编程笔记将为读者推送更多相关知识点的文章,欢迎关注! ... [详细]
  • 本文详细介绍了在Centos7上部署安装zabbix5.0的步骤和注意事项,包括准备工作、获取所需的yum源、关闭防火墙和SELINUX等。提供了一步一步的操作指南,帮助读者顺利完成安装过程。 ... [详细]
author-avatar
oz法卡山英雄营
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有