阶段案例-个人相册小程序

01、逻辑实现

1 获取服务器端图片列表

首先用php编写一个接口文件getPhotoList.php，用于查询服务器WWW根目录下的myAlbum文件夹中所有后缀名为.jpg或.png格式的图片。

getPhotoList.php文件代码如下：

<?php
    // ================================
  // 1 扫描指定目录下的文件
  //=================================
    // 1-1 获取当前文件所在的绝对目录
    $hostdir = dirname(__FILE__)."/myAlbum/";
  // 1-2 扫描该目录下所有文件
  $files = scandir($hostdir);

    // ================================
  // 2 处理文件数据
  //=================================
    // 2-1 定义基础地址
  $baseUrl = "myAlbum/"; 
  // 2-2 声明一个数组用于存放图片路径
  $photoList = array();
  // 2-3 处理一下文件
  foreach($files as $name){
    // 获取文件后缀名
    $ext = end(explode('.', $name));
    // 只接受图片jpg和png格式
    if($ext == "jpg" || $ext == "png"){
      // 将图片的url地址追加到数组中
      array_push($photoList, $baseUrl.$name); 
    }
  }
  
  // ================================
  // 3 数据封装成json格式发给客户端
  //=================================
  echo json_encode($photoList);
?>

将该文件放到服务器端WWW根目录中即可使用，打开任意浏览器地址栏内输入“http://localhost/getPhotoList.php”并回车，可以查到如图 7-？所示的内容就说明接口文件生效了。

■ 图7-19  浏览器测试getPhotoList.php接口

为了不让之前index.js文件里data属性中的测试数据photoList对实际添加的图片造成影响，可以将它们清空。index.js代码片段更新如下：

1. …
2. Page({
3. /**
4. * 页面的初始数据
5. */
6. data: {
7. baseUrl:baseUrl,
8. photoList:[ ]
9. },
10. …11. })

在index.js中封装一个函数getPhotoList()用于获取服务器端的图片列表数据，后面会用到。index.js代码更新如下：

1. …
2. Page({
3. …，
4. /**
5. * 自定义函数--获取图片数据
6. */
7. getPhotoList: function () {
8. // 向服务器发起网络请求
9. wx.request({
10. url: baseUrl+'getPhotoList.php',
11. // 成功回调函数
12. success: res => {
13. // 将获取结果更新到页面上
14. this.setData({
15. photoList: res.data
16. })
17. },
18. // 失败回调函数
19. fail: err => {
20. console.log(err)
21. }
22. })
23. },
24. …25. })

该函数在每次被调用时可以更新页面显示的图片。

最后在index.js文件自带的生命周期函数onLoad()中调用getPhotoList()函数来首次刷新页面全部图片。

index.js的onLoad函数修改如下：

1. Page({
2. …,
3. /**
4. * 生命周期函数--监听页面加载
5. */
6. onLoad: function (options) {
7. // 首次获取图片数据
8. this.getPhotoList()
9. },
10. …11. })

此时已经可以成功展示服务器端myAlbum文件夹中的全部图片了，如图7-20所示。

■ 图7-20  获取服务器端图片列表功能实现

2 上传图片至服务器端

用php编写一个接口文件uploadPhoto.php，用于把图片上传到服务器端的myAlbum目录下。uploadPhoto.php文件代码如下：

<?php
    if(!empty($_FILES['file'])){
    //获取扩展名
    $pathinfo = pathinfo($_FILES['file']['name']);
    $exename = strtolower($pathinfo['extension']);
    //检测扩展名
    if($exename!='png'&&$exename!='jpg'){
      echo '非法扩展名！';
    }
    //检测通过
    else{
      $imageSavePath = 'myAlbum/'.uniqid().'.'.$exename;//创建文件路径
      //移动上传文件到指定位置
      if(move_uploaded_file($_FILES['file']['tmp_name'],$imageSavePath)){
        echo '上传成功！';
      }
    }
  }
  else{
    echo '上传失败';
  }
?>

修改index.wxml代码，为按钮追加点击事件uploadPhoto。index.wxml代码更新如下：

1. <!-- 1 顶部标题面板（…内容略…）-->
2. <!-- 2 底部相册列表（…内容略…）-->
3. 
4. <!-- 3 悬浮上传按钮 -->
5. <view class="uploadBtn" bindtap="uploadPhoto">+</view>

index.js相关代码如下：

1. // index.js
2. …
3. Page({
4. …,
5. /**
6. * 自定义函数--上传图片
7. */
8. uploadPhoto: function () {
9. // 拍照或从本地相册选择图片
10. wx.chooseImage({
11. // 成功回调函数
12. success:res=>{
13. // 获取图片临时地址
14. const tempFilePaths = res.tempFilePaths
15. // 上传文件
16. wx.uploadFile({
17. url: baseUrl+'uploadPhoto.php', //可根据实际名称更新接口地址
18. filePath: tempFilePaths[0],
19. name: 'file',
20. success:res=>{
21. console.log(res)
22. // 上传结束，弹出提示
23. wx.showToast({
24. title: res.data,
25. })
26. // 上传成功，更新相册列表
27. this.getPhotoList()
28. },
29. // 失败回调函数
30. fail:err=>{
31. console.log(err)
32. }
33. })
34. }
35. })
36. },
37. …38. }

运行效果如图7-21所示。

■ 图7-21  上传图片至服务器端功能实现

3 预览图片

点击图片时希望可以全屏预览且在预览画面长按可以保存到本地相册中。

修改index.wxml代码，为图片添加点击事件previewPhoto，并携带参数url取值为图片的URL地址。index.wxml代码更新如下：

1. <!-- 1 顶部标题面板（…内容略…）-->
2. <!-- 2 底部相册列表 -->
3. <view class="photoBox">
4. <!-- 2-1 相片单张区域 -->
5. <view class="photoOne" wx:for="{{photoList}}" wx:key="*this">
6. <!-- 2-2 图片 -->
7. <image src="{{baseUrl+item}}" bindtap="previewPhoto" data-url="{{baseUrl+item}}"></image>
8. </view>
9. </view>
10. 
11. <!-- 3 悬浮上传按钮（…内容略…）-->

index.js相关代码如下：

1. // index.js
2. …
3. Page({
4. …,
5. /**
6. * 自定义函数--预览图片
7. */
8. previewPhoto: function (e) {
9. // 获取图片url地址
10. let url = e.currentTarget.dataset.url
11. // 预览图片
12. wx.previewImage({
13. urls: [url]
14. })
15. },
16. …17. }

运行效果如图7-22所示。

■ 图7-22  预览图片功能实现

至此整个阶段案例就全部完成了，运行效果如图7-23所示。

■图7-23  第7章阶段案例最终效果图