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


Posted in Javascript onJuly 15, 2018

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

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>

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

总结

以上所述是小编给大家介绍的微信小程序仿朋友圈发布动态界面,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
Feb 16 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
Jun 14 Javascript
jQuery在html有效在jsp无效的原因及解决方法
Aug 02 Javascript
JS实现的驼峰式和连字符式转换功能分析
Dec 21 Javascript
canvas压缩图片转换成base64格式输出文件流
Mar 09 Javascript
jQuery中extend函数简单用法示例
Oct 11 jQuery
Vue中使用webpack别名的方法实例详解
Jun 19 Javascript
vue2.0 下拉框默认标题设置方法
Aug 22 Javascript
vue实现局部刷新的实现示例
Apr 16 Javascript
vue登录页面cookie的使用及页面跳转代码
Jul 10 Javascript
jQuery实现视频展示效果
May 30 jQuery
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
Aug 31 Javascript
Bootstrap Table中的多选框删除功能
Jul 15 #Javascript
详解JavaScript 中 if / if...else...替换方式
Jul 15 #Javascript
简述JS控制台的使用
Jul 15 #Javascript
简述JS浏览器的三种弹窗
Jul 15 #Javascript
Vue路由钩子之afterEach beforeEach的区别详解
Jul 15 #Javascript
js+SVG实现动态时钟效果
Jul 14 #Javascript
vue实现通讯录功能
Jul 14 #Javascript
You might like
php实现计算百度地图坐标之间距离的方法
2016/05/05 PHP
php flush无效,IIS7下php实时输出的方法
2016/08/25 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
服务器安全设置的几个注册表设置
2007/07/28 Javascript
javascript 简练的几个函数
2009/08/29 Javascript
Javascript 面试题随笔
2011/03/31 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
2011/06/08 Javascript
Javascript中的匿名函数与封装介绍
2015/03/15 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
JavaScript实现给按钮加上双重动作的方法
2015/08/14 Javascript
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
js+css实现回到顶部按钮(back to top)
2016/03/02 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
2016/06/21 Javascript
EasyUI创建对话框的两种方式
2016/08/23 Javascript
浅谈JS函数定义方式的区别
2016/10/30 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
JQuery实现定时刷新功能代码
2017/05/09 jQuery
ReactNative之FlatList的具体使用方法
2017/11/29 Javascript
vue使用一些外部插件及样式的配置代码
2019/11/18 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
基于vue+echarts数据可视化大屏展示的实现
2020/12/25 Vue.js
[00:19]CN DOTA NEVER DIE!VG夺冠rOtK接受采访
2019/12/23 DOTA
python实现进程间通信简单实例
2014/07/23 Python
查看Django和flask版本的方法
2018/05/14 Python
Python pip安装模块提示错误解决方案
2020/05/22 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
纯CSS3实现图片无间断轮播效果
2016/08/25 HTML / CSS
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
实习教师个人的自我评价
2013/11/08 职场文书
酒店大堂副理的职责范文
2014/02/13 职场文书
2014年纪检监察工作总结
2014/11/11 职场文书
小学国庆节活动总结
2015/03/23 职场文书
出纳岗位职责范本
2015/03/31 职场文书
考勤制度通知
2015/04/25 职场文书
初中生物教学反思
2016/02/20 职场文书
Java常用函数式接口总结
2021/06/29 Java/Android