麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 課堂 > 小程序 > 正文

微信小程序仿朋友圈發布動態功能

2020-03-21 16:14:22
字體:
來源:轉載
供稿:網友

仿照微信朋友圈做了一個界面如下,先看效果:

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>

不相信你能看到最后,哈哈~我寫的太多了

總結

以上所述是小編給大家介紹的微信小程序仿朋友圈發布動態界面,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復大家的!


發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 综合在线一区 | 激情九九| 日韩视频在线观看免费 | 吾色视频 | 97中文字幕在线观看 | 久久人操| 91久久国产综合久久91猫猫 | 毛片视| 欧美日韩手机在线观看 | 在线视频 欧美日韩 | 久久不射电影 | 久久久久免费精品国产小说色大师 | av大全在线免费观看 | 一级黄色毛片免费 | 一区二区三区日韩在线观看 | 成人午夜视屏 | 久久成人黄色 | 久久精品re | 国产一级二级视频 | 午夜视频久久 | 久久久久久99 | 国产外围在线 | 鸳鸯谱在线观看高清 | 高清国产午夜精品久久久久久 | 欧美一级高清免费 | 一级成人免费 | 免费黄网站在线播放 | 日日草日日干 | 欧美性生交xxxxx久久久缅北 | 羞羞的视频在线免费观看 | 91av在线免费播放 | 久久区二区 | 草碰人人 | 亚洲一区国产二区 | www.射| 久久精品国产99国产精品亚洲 | 色女人在线| 国产精品麻豆一区二区三区 | 久国久产久精永久网页 | 一本色道久久综合狠狠躁篇适合什么人看 | 色视频91 |