微信小程序---选择图片和调用微信拍照

1.实现点击头像按钮实现选择图片或者拍照,将图片重新设置成头像:

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    motto: ‘Hello World‘,
    userInfo: {},
    avatarUrl:null
  },
  //事件处理函数
  bindViewTap: function() {

   var that = this
    //  选择图片和拍照
    wx.chooseImage({
    count: 1, // 默认9
    sizeType: [‘original‘, ‘compressed‘], // 可以指定是原图还是压缩图,默认二者都有
    sourceType: [‘album‘, ‘camera‘], // 可以指定来源是相册还是相机,默认二者都有
    success: function (res) {
      // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
      var tempFilePaths = res.tempFilePaths
      console.log("---"+tempFilePaths)
      that.setData({avatarUrl:tempFilePaths[0]})
    },
    fail: function (res) {
      console.log("fail...")
    },
    complete: function(res) {
      console.log("完成...")
    }
  })
  },
  onLoad: function () {
    console.log(‘onLoad‘)
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })
  }
})

2.文件的上传和下载:

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 21.0px "Helvetica Neue"; color: #323333 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px "Helvetica Neue"; color: #323333 }
span.s1 { }
span.s2 { font: 14.0px "Helvetica Neue"; color: #4183c4 }
span.s3 { font: 12.0px Consolas; background-color: #f7f7f7 }

wx.uploadFile(OBJECT)

将本地资源上传到开发者服务器。如页面通过 wx.chooseImage 等接口获取到一个本地资源的临时文件路径后,可通过此接口将本地资源上传到指定服务器。客户端发起一个 HTTPS POST 请求,其中 content-type 为 multipart/form-data 。

li.li1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px "Helvetica Neue"; color: #323333 }
span.s1 { font: 12.0px Consolas; background-color: #f7f7f7 }
span.s2 { font: 12.0px Consolas; background-color: #f7f7f7 }
span.s3 { }
span.s4 { font: 12.0px Consolas; background-color: #f7f7f7 }
ol.ol1 { list-style-type: decimal }

  1. tip: 最大并发限制是 10 个
  2. tip: 默认超时时间和最大超时时间都是 60s
wx.chooseImage({
  success: function(res) {
    var tempFilePaths = res.tempFilePaths
    wx.uploadFile({
      url: ‘http://example.weixin.qq.com/upload‘, //仅为示例,非真实的接口地址
      filePath: tempFilePaths[0],
      name: ‘file‘,
      formData:{
        ‘user‘: ‘test‘
      },
      success: function(res){
        var data = res.data
        //do something
      }
    })
  }
})

3.文件的下载:

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 21.0px "Helvetica Neue"; color: #323333 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px "Helvetica Neue"; color: #323333 }
span.s1 { }

wx.downloadFile(OBJECT)

下载文件资源到本地。客户端直接发起一个 HTTP GET 请求,返回文件的本地临时路径。

wx.downloadFile({
  url: ‘http://example.com/audio/123‘, //仅为示例,并非真实的资源
  success: function(res) {
    wx.playVoice({
      filePath: res.tempFilePath
    })
  }
})

li.li1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px "Helvetica Neue"; color: #323333 }
li.li2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Consolas; color: #323333 }
span.s1 { font: 12.0px Consolas; background-color: #f7f7f7 }
span.s2 { font: 12.0px Consolas; background-color: #f7f7f7 }
span.s3 { }
span.s4 { font: 12.0px Consolas; background-color: #f7f7f7 }
span.s5 { background-color: #f7f7f7 }
span.s6 { background-color: #f7f7f7 }
span.s7 { font: 14.0px "Helvetica Neue" }
ol.ol1 { list-style-type: decimal }

  1. tip: 最大并发限制是 10 个
  2. tip: 默认超时时间和最大超时时间都是 60s
  3. tip: 网络请求的 referer 是不可以设置的,格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html,其中 {appid} 为小程序的 appid,{version} 为小程序的版本号,版本号为 0 表示为开发版。
  4. tip: 6.5.3 以及之前版本的 iOS 微信客户端 header 设置无效
时间: 2024-10-13 22:25:47

微信小程序---选择图片和调用微信拍照的相关文章

微信小程序裁剪图片成圆形

代码地址如下:http://www.demodashi.com/demo/14453.html 前言 最近在开发小程序,产品经理提了一个需求,要求微信小程序换头像,用户剪裁图片必须是圆形,也在github上看了一些例子,一般剪裁图片用的都是方形,所以自己打算写一个小组件,可以把图片剪裁成圆形,主要思路就是使用canvas绘图,把剪裁的图片绘制成圆形,另外剪裁图片的窗口还可以移动放大缩小,这个功能就用了微信组件movable-view,好了,该说的也说完了,下面咱们开始撸代码. movable-v

微信小程序开发选取相册照片/拍照API调用

作者最近在探索微信小程序,有一个需求是让用户通过手机相册或者手机摄像头拍照上传图片.效果如下图所示: 由于作者之前没有接触过微信小程序,看了微信小程序的开发手册后就开始写了. 一开始的想法是这样的: 通过界面交互反馈的api来显示操作菜单,在操作菜单中如下定义名称,然后再判断执行 在看api文档时,发现貌似可以直接调用图片api 直接使用媒体中的图片api也可以很方便的获取预期效果,代码如下.只是这样微信web开发者工具不显示操作菜单,只有真机才显示操作菜单. 最后,真机效果如下图所示: 原文地

微信小程序的图片组件

<!-- 小程序中图片默认宽度是320*240 mode="scaleToFill" 在图片宽高小于默认宽高的情况下 拉伸至100%,完全将图片显示出来 mode="aspectFill" 只有图片的短边会被100%显示出来,长的边会被截取 mode="aspectFit" 图片的长边会被100%显示出来 图片会完全显示出来 mode="widthFix" 宽度100% 高度自适应 mode="top"

微信小程序篇(微信小程序的支付)转载 “微信小程序联盟”

微信小程序的支付和微信公众号的支付是类似的,对比起来还比公众号支付简单了一些,我们只需要调用微信的统一下单接口获取prepay_id之后我们在调用微信的支付即可. 今天我们来封装一般node的支付接口!!! 首先调用统一下单接口我们需要知道一些信息 var bookingNo = 'davdian' + this.createNonceStr() + this.createTimeStamp() var deferred = Q.defer() var appid = config.appId

微信小程序开发系列一:微信小程序的申请和开发环境的搭建

我最近也刚刚开始微信小程序的开发,想把我自学的一些心得写出来分享给大家. 这是第一篇,从零开始学习微信小程序开发.主要是小程序的注册和开发环境的搭建. 首先我们要在下列网址申请一个属于自己的微信小程序: https://mp.weixin.qq.com/cgi-bin/wx 点击按钮"前往注册".注意我们需要使用一个没有注册过微信小程序或者微信公众号的邮箱.我用的是网易邮箱.注册之后,邮箱会收到一封激活邮件. 激活之后,就可以进入小程序主体信息登记页面了.这里需要使用×××号码和手机验

学习微信小程序系列(1) 如何注册微信小程序

目录 前言 什么是微信小程序 如何注册微信小程序 前言 去年,有一段时间,因为工作的需要,需要进行微信小程序的开发工作.刚开始接触的时候,说真的.真的5脸懵逼.工作总是这么无奈,硬生生的逼着自己从不想学,不想写.到最后,逼着自己完成了整个小程序的前后端的开发工作.又过了一段时间,再翻开回自己曾经写的代码.简直是不堪入目.于是,我又认真的学习了一下有关微信小程序的相关的基础础.ps:趁着自己脑子还行,强行mark自己是如何学习小程序的心路历程.希望,对初学者有所帮助. 什么是微信小程序 孔子都说,

微信小程序来了,整理微信小程序学习教程网站

第一,首先菜鸟教程  网址:http://www.runoob.com/ ps: 菜鸟教程(www.runoob.com)提供了最全的编程技术基础教程, 介绍了HTML.CSS.Javascript.Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识.菜鸟教程(www.runoob.com)提供了最全的编程技术基础教程, 介绍了HTML.CSS.Javascript.Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识. 同时本站

(微信小程序)一 : 初识微信小程序

首先看过angularjs的同学们在看微信小程序的创始文件应该不算很陌生吧. 需要看的 先是文件目录 看完这个目录..得知 ( 一 )    pages   他存放于多个页面 如 index ,log页面.可以把他里面的每个文件夹看成一个整体.这个整体存放着 html .css 和 数据 1:index文件夹    ---    存放的index页面的目录. 2:index.js    ---    他可以处理得到(ajax),或自定义定义的数据.把得到的值封装成一个对象 交给wxml渲染数据.

【微信小程序常识】如何绑定微信小程序体验者

转自:https://blog.csdn.net/futruejet/article/details/53223826 一.操作步骤 (1)打开微信小程序公众平台->点击右边菜单[用户身份]->点击左边选项卡[体验者]->点击[绑定]按钮 (2)小程序公众平台管理员用手机扫描二维码后手机上点击[绑定]->输入体验者微信号后点击搜索图标->点击[确认]按钮 (3)被邀请者手机微信收到邀请通知,点击[详情]->点击[确认] (4)当微信小程序公众平台[体验者]界面显示体验者