欢迎光临，了解微信小程序开发，就上易用通！

当前位置： 易用通 > 开发文档 > 入门

【三：图片选取以及拍照功能】微信小程序开发---跑步App+音乐播放器

发布：2018-01-25 16:50浏览： 次来源：网络 作者：tianshu

这次回来，暂时只加了一个图片选取以及预览模块。虽然我说的很顺利，但是确实也经历了很多的Debug，现在对Bug简直是又爱又恨，爱恨交织，没有她让我觉得不真实，有了它让我很苦恼！所以我的Debug过程还是不放出来了！
一、图片选择功能
从本地相册选择图片或使用相机拍照
wx.chooseImage(OBJECT)
【三：图片选取以及拍照功能】微信小程序开发---跑步App+音乐播放器(图1)
参数说明

【三：图片选取以及拍照功能】微信小程序开发---跑步App+音乐播放器(图2)
效果图，设置为一开始为Carly Rae Jeepson

使用过程如下：
  1. wx.chooseImage({
  2.   count: 1, // 默认9
  3.   sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
  4.   sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
  5.   success: function (res) {
  6.     // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
  7.     var tempFilePaths = res.tempFilePaths
  8.   }
  9. })
代码镶嵌在原本的代码框架中就是现在这样：
《---picture.js》
  1. //index.js
  2. //获取应用实例
  3. var app = getApp()
  4. Page({
  5.   data: {
  6. source:"",
  7.   },
  8.  
  9.  
  10. listenerButtonChooseImage: function() {
  11.       var that = this;
  12.       wx.chooseImage({
  13.           count: 1,
  14.           //original原图，compressed压缩图
  15.           sizeType: ['original'],
  16.           //album来源相册 camera相机 
  17.           sourceType: ['album', 'camera'],
  18.           //成功时会回调
  19.           success: function(res) {
  20.                 //重绘视图
  21.               that.setData({
  22.                   source: res.tempFilePaths,
  23.                              })
  24.  
  25. wx.previewImage({
  26.    current: 'https://119.29.74.46/myphoto/0.jpg', // 当前显示图片的链接，不填则默认为 urls 的第一张
  27.   urls: [ 'https://119.29.74.46/myphoto/0.jpg',
  28.    'https://119.29.74.46/myphoto/1.jpg',
  29.     'https://119.29.74.46/myphoto/2.jpg',
  30.      'https://119.29.74.46/myphoto/3.jpg',
  31.       'https://119.29.74.46/myphoto/4.jpg'
  32.       , 'https://119.29.74.46/myphoto/5.jpg',
  33.        'https://119.29.74.46/myphoto/6.jpg',
  34.         'https://119.29.74.46/myphoto/7.jpg'],
  35.   success: function(res){
  36.  
  37.  
  38.   },
  39.   fail: function() {
  40.     // fail
  41.   },
  42.   complete: function() {
  43.     // complete
  44.   }
  45. })          }
  46.       })
  47.   },
  48.  
  49.    onShareAppMessage: function () {
  50.     return {
  51.       title: '欢迎使用颜大傻牌跑步计',
  52.       desc: '将你的战绩分享到~~~',
  53.       path: '/page/picture/picture.js'
  54.     }
  55.   },
  56. })
《---picture.wxml》
  1. <view class="header" style="flex-direction:row;">
  2.  
  3. <!--通过数据绑定的方式动态获取js数据-->
  4. <image src="{{source}}" mode="fulltoFill"  class="pic"/>
  5.  
  6. <!--监听按钮-->
  7. <button type="primary" bindtap="listenerButtonChooseImage" class="button_anniu">点击我选择相册</button>
  8.  
  9.  
  10. <button bindtap="" class="button_anniu"> 发布 </button>
  11. </view>
整体的文件架构图如下：
【三：图片选取以及拍照功能】微信小程序开发---跑步App+音乐播放器(图3)
代码框架图

二、增置了图片预览
图片预览功能需要服务器端的配置。所以，今后这可能是作为一个网站架构，成为某种服务性的商业软件的需要。配置服务器的小程序相对于功能性的来说要麻烦点，因为需要服务端的配合。但是幸亏我手头有几个空置的云服务器，所以就直接拿来写了一个这种东西。后期可能会直接开发一个类似于朋友圈的，可以把图片放到服务器上去。附上文字，然后慢慢的形成一个闭环的圈子。当然这是我的想法， 目前小程序只是玩耍的工具。
图片预览功能其实很简单，就是把服务器端的图片下载下来进行一种压缩格式的预览。稍后容我一一道来。目前这个功能，怎么来说呢，其实就是个鸡肋。因为我的图片大多是本地文件，要不就是直接加载的服务端的图片，预览这个作用实在让我难以找到用途。不过，如果今后真要布置一个圈子的话，这一点又是必不可少的。毕竟预览这个功能可以省下巨多流量！
《picture.js》
  1. //index.js
  2. //获取应用实例
  3. var app = getApp()
  4. Page({
  5.   data: {
  6. source:"https://159.203.250.111/Carly.png",
  7.   },
  8.  
  9.  
  10. listenerButtonChooseImage: function() {
  11.       var that = this;
  12.       wx.chooseImage({
  13.           count: 1,
  14.           //original原图，compressed压缩图
  15.           sizeType: ['original'],
  16.           //album来源相册 camera相机 
  17.           sourceType: ['album', 'camera'],
  18.           //成功时会回调
  19.           success: function(res) {
  20.                 //重绘视图
  21.               that.setData({
  22.                   source: res.tempFilePaths,
  23.                              })
  24.  
  25.           }
  26.       })
  27.   },
  28.  
  29.   yulan:function(){
  30.     wx.previewImage({
  31.    current: 'https://119.29.74.46/myphoto/0.jpg', // 当前显示图片的链接，不填则默认为 urls 的第一张
  32.   urls: [ 'https://119.29.74.46/myphoto/0.jpg',
  33.    'https://119.29.74.46/myphoto/1.jpg',
  34.     'https://119.29.74.46/myphoto/2.jpg',
  35.      'https://119.29.74.46/myphoto/3.jpg',
  36.       'https://119.29.74.46/myphoto/4.jpg',
  37.        'https://119.29.74.46/myphoto/5.jpg',
  38.        'https://119.29.74.46/myphoto/6.jpg',
  39.         'https://119.29.74.46/myphoto/7.jpg'],
  40.   success: function(res){
  41.  
  42.  
  43.   },
  44.   fail: function() {
  45.     // fail
  46.   },
  47.   complete: function() {
  48.     // complete
  49.   }
  50. })
  51.   },
  52.  
  53.    onShareAppMessage: function () {
  54.     return {
  55.       title: '欢迎使用颜大傻牌跑步计',
  56.       desc: '将你的战绩分享到~~~',
  57.       path: '/page/picture/picture.js'
  58.     }
  59.   },
  60. })
《picture.wxml》
  1. <view class="header" style="flex-direction:row;">
  2.  
  3. <!--通过数据绑定的方式动态获取js数据-->
  4. <image src="{{source}}" mode="fulltoFill"  class="pic"/>
  5.  
  6. <!--监听按钮-->
  7. <button type="primary" bindtap="listenerButtonChooseImage" class="button_anniu">点击我选择相册</button>
  8.  
  9. <button bindtap="yulan"><image src="/resources/yulan.png"  class="swiper"></image></button>
  10. <button bindtap="" class="button_anniu"> 发布 </button>
  11. </view>
 
 
【三：图片选取以及拍照功能】微信小程序开发---跑步App+音乐播放器(图4)
效果图

预览功能的原理很简单，其实就是给你一个按钮，绑定一个事件。这个事件就是向服务器请求预览图片加载，所谓预览图片加载呢。其实就是一个压缩过的，低像素的图片啦。然后给你发送过来，你就完成了所谓的预览。
【三：图片选取以及拍照功能】微信小程序开发---跑步App+音乐播放器(图5)
服务器端远程控制界面。好吧，这就是为了震慑一下看到此文的小白玩家的。大神们就不要笑我了。

结束语
小程序算是假期的一个调剂吧，不然可能就真的天天看小说，然后逛逛B站了。昨天跟今天同学聚会，现在弄完了。在家还有三四天，好好珍惜，天天学习。争取做一个更好的我自己!
【三：图片选取以及拍照功能】微信小程序开发---跑步App+音乐播放器(图6)




免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

相关文章
最新文章
推荐文章
随机文章
热门小程序
开发文档 | 运营教程 小程序模板 | 小程序应用 | 标签大全
Copyright © 2017 https://www.yiyongtong.com 易用通 版权所有