微信小程序仿朋友圈发布动态功能
程序员文章站
2022-08-02 12:38:53
仿照微信朋友圈做了一个界面如下，先看效果：
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>
不相信你能看到最后，哈哈~我写的太多了
总结
以上所述是小编给大家介绍的微信小程序仿朋友圈发布动态界面，希望对大家有所帮助
上一篇： 个性化修改Linux登录时的字符界面
下一篇： 微信小程序实现团购或秒杀批量倒计时