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

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://{{image}}"></image>

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

总结

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