如何在微信小程序中实现图片选择功能?

来源:天极下载 时间:2017-06-09 10:48:01 作者: anna

  今天小编分享的是如何在微信小程序中实现图片选择功能?对这个感兴趣的小伙伴就和小编一起学习一下吧,下面就是具体操作流程。

  从本地相册选择图片或使用相机拍照

  wx.chooseImage(OBJECT)

在微信小程序中是怎么实现图片选择功能的

  参数说明

在微信小程序中是怎么实现图片选择功能的

  效果图,设置为一开始为Carly Rae Jeepson

  使用过程如下:

  wx.chooseImage({

  count: 1, // 默认9

  sizeType: [\'original\', \'compressed\'], // 可以指定是原图还是压缩图,默认二者都有sourceType: [\'album\', \'camera\'], // 可以指定来源是相册还是相机,默认二者都有success: function (res) {// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片var tempFilePaths = res.tempFilePaths}

  })

  代码镶嵌在原本的代码框架中就是现在这样:

  《---picture.js》

  //index.js

  //获取应用实例

  var app = getApp()

  Page({

  data: {

  source:"",

  },

  listenerButtonChooseImage: function() {

  var that = this;

  wx.chooseImage({

  count: 1,

  //original原图,compressed压缩图

  sizeType: [\'original\'],

  //album来源相册 camera相机

  sourceType: [\'album\', \'camera\'],

  //成功时会回调

  success: function(res) {

  //重绘视图

  that.setData({

  source: res.tempFilePaths,

  })

  wx.previewImage({

  current: \'//119.29.74.46/myphoto/0.jpg\', // 当前显示图片的链接,不填则默认为 urls 的第一张urls: [ \'//119.29.74.46/myphoto/0.jpg\',\'//119.29.74.46/myphoto/1.jpg\',\'//119.29.74.46/myphoto/2.jpg\',\'//119.29.74.46/myphoto/3.jpg\',\'//119.29.74.46/myphoto/4.jpg\'

  , \'//119.29.74.46/myphoto/5.jpg\',

  \'//119.29.74.46/myphoto/6.jpg\',

  \'//119.29.74.46/myphoto/7.jpg\'],

  success: function(res){

  },

  fail: function() {

  // fail

  },

  complete: function() {

  // complete

  }

  }) }

  })

  },

  onShareAppMessage: function () {

  return {

  title: \'欢迎使用颜大傻牌跑步计\',

  desc: \'将你的战绩分享到~~~\',

  path: \'/page/picture/picture.js\'

  }

  },

  })

  《---picture.wxml》

  

  

  

  

   点击我选择相册

   发布

  

  整体的文件架构图如下:

  以上就是如何在微信小程序中实现图片选择功能的全部内容了,大家都学会了吗?

相关推荐
AI桌面浏览器

热文推荐

  • 48小时热文
  • 每周热文

如何在微信小程序中实现图片选择功能?