欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

微信小程序仿朋友圈发布动态功能

程序员文章站 2022-04-18 18:57:17
仿照微信朋友圈做了一个界面如下,先看效果: 1、点开界面 2、选择图片 3、点击上传 4、动态显示 第一个页面的wxml:

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

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>

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

总结

以上所述是小编给大家介绍的微信小程序仿朋友圈发布动态界面,希望对大家有所帮助