正在阅读:怎么在微信小程序中实现图片选择功能呢?怎么在微信小程序中实现图片选择功能呢?

2017-12-28 14:25 出处:其他 作者:佚名 责任编辑:lishengtao

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

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

  wx.chooseImage(OBJECT)

  参数说明

  效果图,设置为一开始为CarlyRaeJeepson

  使用过程如下:

  wx.chooseImage({

  count:1,//默认9

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

  })

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

  《---picture.js》

  //index.js

  //获取应用实例

  varapp=getApp()

  Page({

  data:{

  source:"",

  },

  listenerButtonChooseImage:function(){

  varthat=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:'http://119.29.74.46/myphoto/0.jpg',//当前显示图片的链接,不填则默认为urls的第一张urls:['http://119.29.74.46/myphoto/0.jpg','http://119.29.74.46/myphoto/1.jpg','http://119.29.74.46/myphoto/2.jpg','http://119.29.74.46/myphoto/3.jpg','http://119.29.74.46/myphoto/4.jpg'

  ,'http://119.29.74.46/myphoto/5.jpg',

  'http://119.29.74.46/myphoto/6.jpg',

  'http://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'

  }

  },

  })

 

 

关注我们

302 Found

302 Found


Powered by Tengine
tengine
最新资讯离线随时看 聊天吐槽赢奖品