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

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

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

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》

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

整体的文件架构图如下:

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

本文来自投稿,不代表酷牛教程立场,如若转载,请注明出处:https://www.xukn.com/97407.html

(0)
上一篇 2019-07-31 10:31
下一篇 2019-07-31 10:42

相关推荐