微信小程序仿朋友圈發(fā)布動(dòng)態(tài)功能
更新時(shí)間：2018年07月15日 15:04:38 作者：MarieDreamer
這篇文章主要介紹了微信小程序仿朋友圈發(fā)布動(dòng)態(tài)界面，代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
仿照微信朋友圈做了一個(gè)界面如下，先看效果：
1、點(diǎn)開界面
2、選擇圖片
3、點(diǎn)擊上傳
4、動(dòng)態(tài)顯示
第一個(gè)頁面的wxml：
<view class='page'>
<textarea class='text' bindinput="input" placeholder="分享動(dòng)態(tài)" 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'>發(fā)布</button>
</view>
第一個(gè)頁面的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
}
第一個(gè)頁面的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, // 默認(rèn)9
sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有
sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機(jī)，默認(rèn)二者都有
success: function (res) {
if (res.tempFilePaths.length>0){
//圖如果滿了9張，不顯示加圖
if (res.tempFilePaths.length == 9){
that.setData({
hideAdd:1
})
}else{
that.setData({
hideAdd: 0
})
}
//把每次選擇的圖push進(jìn)數(shù)組
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
})
}
}
})
},
//發(fā)布按鈕事件
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 = [];
//由于圖片只能一張一張地上傳，所以用循環(huán)
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('上傳成功');
//把上傳成功的圖片的地址放入數(shù)組中
img_url_ok.push(res.data)
//如果全部傳完，則可以將圖片路徑保存到數(shù)據(jù)庫
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('上傳失敗')
}
})
}
}
})
我認(rèn)為難點(diǎn)在于請求后臺(tái)上傳圖片的方法，雖然我也沒搞懂，不過直接使用，他會(huì)返回放在服務(wù)器的哪個(gè)位置，代碼如下：
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');
//創(chuàng)建文件夾
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);
}
這個(gè)函數(shù)會(huì)將圖片保存到項(xiàng)目文件的Cache目錄的Upload/....什么什么的目錄下。而且也返回了這個(gè)完整路徑跟前端，前端拿著這個(gè)再去請求后臺(tái)接口保存這個(gè)路徑。保存圖片的后臺(tái)代碼如下：
首先是控制層：
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);
}
然后是模型層：（我之前犯傻的是，應(yīng)該直接把數(shù)組，也就是$images直接保存進(jìn)去就行了，不用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');
}
}
保存好了之后，接下來如何在前端中顯示圖片呢？關(guān)鍵在于保存圖片數(shù)組到數(shù)據(jù)庫里，如何讓它取出來的時(shí)候轉(zhuǎn)為數(shù)組。代碼如下：
控制層：
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)方法，打印出來就是數(shù)組了）
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;
}
最后，動(dòng)態(tài)頁面如何顯示圖片呢？
主要我還在做九宮格圖片的適配，就不貼代碼了，主要是圖片src需要加前綴，也就是你的域名。這樣就能顯示出來啦~
<image class="moment_img" src="http://wechat.homedoctor.com{{image}}"></image>
不相信你能看到最后，哈哈~我寫的太多了
總結(jié)
以上所述是小編給大家介紹的微信小程序仿朋友圈發(fā)布動(dòng)態(tài)界面，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
相關(guān)文章
這篇文章主要介紹了微信小程序自定義組件components知識(shí)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10
Web js實(shí)現(xiàn)復(fù)制文本到粘貼板
這篇文章主要為大家詳細(xì)介紹了Web js實(shí)現(xiàn)復(fù)制文本到粘貼板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
前端實(shí)現(xiàn)（excel）xlsx文件預(yù)覽的詳細(xì)步驟
excel的預(yù)覽庫有不少,也都很強(qiáng)大,但是能很簡單實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于前端實(shí)現(xiàn)（excel）xlsx文件預(yù)覽的詳細(xì)步驟,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
微信小程序如何實(shí)現(xiàn)精確的日期時(shí)間選擇器
這篇文章主要介紹了微信小程序如何實(shí)現(xiàn)精確的日期時(shí)間選擇器,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-01-01
parseInt是一種字符串轉(zhuǎn)數(shù)字的,下面這篇文章主要給大家介紹了關(guān)于Js中parseInt的使用及注意事項(xiàng)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
這篇文章主要為大家介紹了TypeScript類型使用示例剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要分享ES6?20個(gè)經(jīng)常使用技巧，作用是使JavaScript語言可以用來編寫復(fù)雜的大型應(yīng)用程序，成為企業(yè)級(jí)開發(fā)語言，具體使用詳情需要的小伙伴可以參考下面文章內(nèi)容2022-06-06
JavaScript使用箭頭函數(shù)實(shí)現(xiàn)優(yōu)化代碼
在JavaScript的編程世界里,我們時(shí)常被普通函數(shù)的冗長寫法所困擾,每次都需要寫function關(guān)鍵字,有時(shí)候還要明確地寫return語句,下面我們就來看看如何利用箭頭函數(shù)優(yōu)化這些繁瑣的代碼吧2023-11-11
javascript表單驗(yàn)證使用示例(javascript驗(yàn)證郵箱)
JavaScript可用來在數(shù)據(jù)被送往服務(wù)器前對HTML表單中的這些輸入數(shù)據(jù)進(jìn)行驗(yàn)證2014-01-01
這篇文章主要介紹了JavaScript判斷undefined類型的正確方法,相信很多同學(xué)在遇到這問題時(shí)都會(huì)用到錯(cuò)誤的方法,正確方法也很簡單,需要的朋友可以參考下2015-06-06