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

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

主要介绍了微信小程序仿朋友圈发布动态界面，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下

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

1、点开界面

2、选择图片

3、点击上传

4、动态显示

第一个页面的wxml：

<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

}

.image{

width:31%;

height: 100px;

padding: 2px

}

.moment_img{

width: 98px;

height: 98px;

}

.image_content{

Page({

data: {

img_url: [],

content:''

},

onLoad: function (options) {

},

input:function(e){

this.setData({

content:e.detail.value

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{

for (let i = 0; i < res.tempFilePaths.length; i++) {

img_url.push(res.tempFilePaths[i])

}

that.setData({

img_url: img_url

})

}

}

})

},

})

that.img_upload()