仿照微信朋友圈做了一個界面如下，先看效果：
1、點開界面
2、選擇圖片
3、點擊上傳
4、動態顯示
第一個頁面的wxml：
<view class='page'> <textarea class='text' bindinput="input" placeholder="分享動態" auto-height/> <view class="image_content"> <view class='image' wx:for="{{img_url}}"> <image class="moment_img" src="{{item}}"></image> </view> <view class='image' style='display:{{hideAdd?"none":"block"}}'> <image bindtap="chooseimage" class="moment_img" src='../../images/add.jpg'></image> </view> </view> <button bindtap="send" style='margin-right:5px;margin-left:5px'>發布</button></view>第一個頁面的wcss：
.page{ padding: 20px}.text{ width: 100%; margin-bottom: 40px; font-size: 20px; padding: 5px}.image{ width:31%; height: 100px; padding: 2px}.moment_img{ width: 98px; height: 98px;}.image_content{ width: 100%; display: flex; flex-wrap: wrap; margin-bottom: 20px}第一個頁面的js：
Page({ data: { img_url: [], content:'' }, onLoad: function (options) { }, input:function(e){ this.setData({ content:e.detail.value }) }, chooseimage:function(){ var that = this; wx.chooseImage({ count: 9, // 默認9 sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有 sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有 success: function (res) { if (res.tempFilePaths.length>0){ //圖如果滿了9張，不顯示加圖 if (res.tempFilePaths.length == 9){ that.setData({ hideAdd:1 }) }else{ that.setData({ hideAdd: 0 }) } //把每次選擇的圖push進數組 let img_url = that.data.img_url; for (let i = 0; i < res.tempFilePaths.length; i++) { img_url.push(res.tempFilePaths[i]) } that.setData({ img_url: img_url }) } } }) }, //發布按鈕事件 send:function(){ var that = this; var user_id = wx.getStorageSync('userid') wx.showLoading({ title: '上傳中', }) that.img_upload() }, //圖片上傳 img_upload: function () { let that = this; let img_url = that.data.img_url; let img_url_ok = []; //由于圖片只能一張一張地上傳，所以用循環 for (let i = 0; i < img_url.length; i++) { wx.uploadFile({ //路徑填你上傳圖片方法的地址 url: 'http://wechat.homedoctor.com/Moments/upload_do', filePath: img_url[i], name: 'file', formData: { 'user': 'test' }, success: function (res) { console.log('上傳成功'); //把上傳成功的圖片的地址放入數組中 img_url_ok.push(res.data) //如果全部傳完，則可以將圖片路徑保存到數據庫 if (img_url_ok.length == img_url.length) { var userid = wx.getStorageSync('userid'); var content = that.data.content; wx.request({ url: 'http://wechat.homedoctor.com/Moments/adds', data: { user_id: userid, images: img_url_ok, content: content, }, success: function (res) { if (res.data.status == 1) { wx.hideLoading() wx.showModal({ title: '提交成功', showCancel: false, success: function (res) { if (res.confirm) { wx.navigateTo({ url: '/pages/my_moments/my_moments', }) } } }) } } }) } }, fail: function (res) { console.log('上傳失敗') } }) } } })我認為難點在于請求后臺上傳圖片的方法，雖然我也沒搞懂，不過直接使用，他會返回放在服務器的哪個位置，代碼如下：
public function upload_do(){ extract(generateRequestParamVars()); /** * upload.php * * Copyright 2013, Moxiecode Systems AB * Released under GPL License. * * License: http://www.plupload.com/license * Contributing: http://www.plupload.com/contributing */ #!! IMPORTANT: #!! this file is just an example, it doesn't incorporate any security checks and #!! is not recommended to be used in production environment as it is. Be sure to #!! revise it and customize to your needs. // Make sure file is not cached (as it happens for example on iOS devices) header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", false); header("Pragma: no-cache"); echo $fileName; // Support CORS // header("Access-Control-Allow-Origin: *"); // other CORS headers if any... if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') { exit; // finish preflight CORS requests here } if ( !empty($_REQUEST[ 'debug' ]) ) { $random = rand(0, intval($_REQUEST[ 'debug' ]) ); if ( $random === 0 ) { header("HTTP/1.0 500 Internal Server Error"); exit; } } // header("HTTP/1.0 500 Internal Server Error"); // exit; // 5 minutes execution time @set_time_limit(5 * 60); // Uncomment this one to fake upload time usleep(5000); // Settings // $targetDir = ini_get("upload_tmp_dir") . DIRECTORY_SEPARATOR . "plupload"; $targetDir = C('CACHE_DIR').DIRECTORY_SEPARATOR.'Uploads'.DIRECTORY_SEPARATOR.'Tmps'; $uploadDir = C('CACHE_DIR').DIRECTORY_SEPARATOR.'Uploads'.DIRECTORY_SEPARATOR.'Tmps'.DIRECTORY_SEPARATOR.date('Y').DIRECTORY_SEPARATOR.date('m').DIRECTORY_SEPARATOR.date('d'); $uploadUrl = '/Uploads/Tmps/'.date('Y').'/'.date('m').'/'.date('d'); //創建文件夾 if(!is_dir($uploadDir)){ @mkdir($uploadDir,0777,true); } $cleanupTargetDir = true; // Remove old files $maxFileAge = 5 * 3600; // Temp file age in seconds // Create target dir if (!file_exists($targetDir)) { @mkdir($targetDir); } // Create target dir if (!file_exists($uploadDir)) { @mkdir($uploadDir); } // Get a file name if (isset($_REQUEST["name"])) { $fileName = $_REQUEST["name"]; } elseif (!empty($_FILES)) { $fileName = $_FILES["file"]["name"]; } else { $fileName = uniqid(); } //$fileName = uniqid("file_").'.'.pathinfo($fileName, PATHINFO_EXTENSION); $extension=pathinfo($fileName, PATHINFO_EXTENSION); if($extension){ $fileName = uniqid().'.'.$extension; }else{ $fileName = uniqid(); } $md5File = @file('md5list.txt', FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES); $md5File = $md5File ? $md5File : array(); if (isset($_REQUEST["md5"]) && array_search($_REQUEST["md5"], $md5File ) !== FALSE ) { die('{"jsonrpc" : "2.0", "result" : null, "id" : "id", "exist": 1}'); } $filePath = $targetDir . DIRECTORY_SEPARATOR . $fileName; $uploadPath = $uploadDir . DIRECTORY_SEPARATOR . $fileName; // Chunking might be enabled $chunk = isset($_REQUEST["chunk"]) ? intval($_REQUEST["chunk"]) : 0; $chunks = isset($_REQUEST["chunks"]) ? intval($_REQUEST["chunks"]) : 1; // echo $_REQUEST["chunks"]; // echo $_REQUEST["chunk"]; // Remove old temp files if ($cleanupTargetDir) { if (!is_dir($targetDir) || !$dir = opendir($targetDir)) { die('{"jsonrpc" : "2.0", "error" : {"code": 100, "message": "Failed to open temp directory."}, "id" : "id"}'); } while (($file = readdir($dir)) !== false) { $tmpfilePath = $targetDir . DIRECTORY_SEPARATOR . $file; // If temp file is current file proceed to the next if ($tmpfilePath == "{$filePath}_{$chunk}.part" || $tmpfilePath == "{$filePath}_{$chunk}.parttmp") { continue; } // Remove temp file if it is older than the max age and is not the current file if (preg_match('//.(part|parttmp)$/', $file) && (@filemtime($tmpfilePath) < time() - $maxFileAge)) { @unlink($tmpfilePath); } } closedir($dir); } // Open temp file if (!$out = @fopen("{$filePath}_{$chunk}.parttmp", "wb")) { die('{"jsonrpc" : "2.0", "error" : {"code": 102, "message": "Failed to open output stream."}, "id" : "id"}'); } if (!empty($_FILES)) { if ($_FILES["file"]["error"] || !is_uploaded_file($_FILES["file"]["tmp_name"])) { die('{"jsonrpc" : "2.0", "error" : {"code": 103, "message": "Failed to move uploaded file."}, "id" : "id"}'); } // Read binary input stream and append it to temp file if (!$in = @fopen($_FILES["file"]["tmp_name"], "rb")) { die('{"jsonrpc" : "2.0", "error" : {"code": 101, "message": "Failed to open input stream."}, "id" : "id"}'); } } else { if (!$in = @fopen("php://input", "rb")) { die('{"jsonrpc" : "2.0", "error" : {"code": 101, "message": "Failed to open input stream."}, "id" : "id"}'); } } while ($buff = fread($in, 4096)) { fwrite($out, $buff); } @fclose($out); @fclose($in); rename("{$filePath}_{$chunk}.parttmp", "{$filePath}_{$chunk}.part"); $index = 0; $done = true; for( $index = 0; $index < $chunks; $index++ ) { if ( !file_exists("{$filePath}_{$index}.part") ) { $done = false; break; } } if ( $done ) { if (!$out = @fopen($uploadPath, "wb")) { die('{"jsonrpc" : "2.0", "error" : {"code": 102, "message": "Failed to open output stream."}, "id" : "id"}'); } if ( flock($out, LOCK_EX) ) { for( $index = 0; $index < $chunks; $index++ ) { if (!$in = @fopen("{$filePath}_{$index}.part", "rb")) { break; } while ($buff = fread($in, 4096)) { fwrite($out, $buff); } @fclose($in); @unlink("{$filePath}_{$index}.part"); } flock($out, LOCK_UN); } @fclose($out); } // Return Success JSON-RPC response //die('{"jsonrpc" : "2.0", "result" : null, "id" : "id"}'); die($uploadUrl .'/'. $fileName); }這個函數會將圖片保存到項目文件的Cache目錄的Upload/....什么什么的目錄下。而且也返回了這個完整路徑跟前端，前端拿著這個再去請求后臺接口保存這個路徑。保存圖片的后臺代碼如下：
首先是控制層：
public function adds() { try{ D(self::$MOMENTS_MODEL)->adds(); $ajaxReturnData['status'] = 1; $ajaxReturnData['message'] = 'success'; }catch (/Exception $e){ $ajaxReturnData['status'] = 0; $ajaxReturnData['message'] = 'fail'; } $this->ajaxReturn($ajaxReturnData); }然后是模型層：（我之前犯傻的是，應該直接把數組，也就是$images直接保存進去就行了，不用json_encode()）
public function adds() { extract(generateRequestParamVars()); $user = D(self::$WECHAT_USER)->find($user_id); $data = []; $data['user_id'] = $user_id; $data['user_name'] = $user['nickname']; $data['user_img'] = $user['imageurl']; $data['content'] = $content; $data['images'] = $images; $data['create_time'] = time(); if ($this->add($data) === false) { throw new /Exception('OPERATION_FAILED'); } }保存好了之后，接下來如何在前端中顯示圖片呢？關鍵在于保存圖片數組到數據庫里，如何讓它取出來的時候轉為數組。代碼如下：
控制層：
public function my_moments() { try{ $data = D(self::$MOMENTS_MODEL)->my_moments(); $ajaxReturnData['status'] = 1; $ajaxReturnData['message'] = 'success'; $ajaxReturnData['data'] = $data; }catch (/Exception $e){ $ajaxReturnData['status'] = 0; $ajaxReturnData['message'] = 'fail'; } $this->ajaxReturn($ajaxReturnData); }模型層：（這里使用了json_decode($array,true)方法，打印出來就是數組了）
public function my_moments() { extract(generateRequestParamVars()); $user = D(self::$WECHAT_USER)->find($user_id); if($user['is_doctor'] == 1){ $conditions = []; $conditions['user_id'] = $user_id; $doctor = D(self::$DOCTOR_MODEL)->where($conditions)->find(); $identity = $doctor['hospital']. "" . $doctor['grade']; }else{ $identity = ''; } $conditions = []; $conditions['user_id'] = $user_id; $moments = $this->where($conditions)->order('create_time desc')->select(); for($i = 0 ; $i < count($moments) ; $i ++){ $moments[$i]['images'] = json_decode($moments[$i]['images'],true); } $data = []; $data[0] = $user; $data[1] = $moments; $data[2] = $identity; return $data; }最后，動態頁面如何顯示圖片呢？
主要我還在做九宮格圖片的適配，就不貼代碼了，主要是圖片src需要加前綴，也就是你的域名。這樣就能顯示出來啦~
<image class="moment_img" src="http://wechat.homedoctor.com{{image}}"></image>不相信你能看到最后，哈哈~我寫的太多了
總結
以上所述是小編給大家介紹的微信小程序仿朋友圈發布動態界面，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
新聞熱點
疑難解答
