1 前言
由于功能需求，需要在小程序中开发社区打卡模块。打卡模块中上传发布的界面是必不可少的。于是利用flex布局设计了上传动态的页面。页面截图如下：
由于是模板分享，这里也不做过多介绍了，通过代码来说明吧。
页面主要有四个文件，分别是create.js、create.json、create.wxml、create.wxss。
2 代码
create.wxml
<!--pages_sceond/create/create.wxml-->
<view class="boss1">
<textarea bindinput='textinput' placeholder="这一刻的想法..." value="{{comment}}">
</textarea>
</view>
<view class="boss2">
<image src="{{imageList}}" style="width: 300rpx; height: 300rpx" bindtap="uploadImage"></image>
</view>
<text>\n</text>
<view class="boss3">
<view class='line'></view>
</view>
<view class="boss4">
<image src="/image/create_img/location.png" style="width: 70rpx; height: 70rpx"></image>
<text>({{longitude}},{{latitude}})</text>
<image src="/image/create_img/right.png" style="width: 70rpx; height: 70rpx"></image>
</view>
<view class="boss3">
<view class='line'></view>
</view>
<view class="boss4">
<image src="/image/create_img/time.png" style="width: 70rpx; height: 70rpx"></image>
<view>{{startDate}}</view>
<image src="/image/create_img/right.png" style="width: 70rpx; height: 70rpx"></image>
</view>
<view class="boss3">
<view class='line'></view>
</view>
<button class="btn1" bindtap="loadto">发布</button>
create.json
{
"usingComponents": {}
}
create.wxss
/* pages_sceond/create/create.wxss */
textarea{
border: 3rpx solid rebeccapurple;
}
textarea{
height:300rpx;
border: 0rpx solid rebeccapurple;
position: relative;
}
.botsum{
position:absolute;
top: 260rpx;
font-size: 28rpx;
}
.line{
background: #E0E3DA;
width: 700rpx;
height: 5rpx;
}
.boss3{
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.boss4{
height: 120rpx;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.btn1 {
width: 80%;
margin-top: 20rpx;
background-color: rgb(30,144,255);
color: white;
border-radius: 98rpx;
}
.btn1::after {
border-radius: 98rpx;
}
create.js
相关的逻辑代码注释会有解释！
// pages_sceond/create/create.js
var util=require('../../utils/util.js');
const app=getApp()
Page({
/**
* 页面的初始数据
*/
data: {
imageList: "/image/create_img/picture.jpg",
startDate: "获取捡拾时间",
longitude: '', //经度
latitude: '', //纬度
comment:''
},
//点击照片上传图片
uploadImage:function(){
var that=this;
wx.chooseImage({
count: 1,
sizeType:['original','compressed'],
sourceType:['album','camera'],
success:function(res){
const tempFilePaths=res.tempFilePaths
app.globalData.tempFilePaths = tempFilePaths
that.setData({
imageList:res.tempFilePaths,
tempFilePaths:res.tempFilePaths
})
}
})
},
//双向绑定文本框的内容
textinput:function(e){
this.setData({ comment:e.detail.value})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function () {
var TIME = util.formatTime(new Date());
this.setData({
startDate: TIME,
});
var that = this;
wx.getLocation({
type: 'wgs84',
success: function (res) {
that.setData({
latitude: res.latitude,//经度
longitude: res.longitude//纬度
})
console.log(res,'经纬度')
},
fail: function () {
console.log('小程序得到坐标失败')
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
loadto:function(){
wx.uploadFile({
url:"****",//后端服务器url
filePath: app.globalData.tempFilePaths[0],
name: 'image',
method:"POST",
header:{
'content-type':'application/x-www-form-urlencoded'
},
//将需要的内容上传至后端
formData:{
comment: this.data.comment,
longitude:this.data.longitude,
latitude:this.data.latitude,
startDate:this.data.startDate,
},
})
if (app.globalData.status == 1){
// 弹窗
wx.showToast({
title: '发布成功',
icon:"none",
success:function(){
setTimeout(function(){
wx.reLaunch({
url: "/pages/trends/trends",//上传成功后期望跳转的页面可自行修改
})
},1500);
}
})
}
}
})
为防止部分观众没有utils.js文件，这里特地进行附录供没有utils.js的观众使用~
const formatTime = date => {
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}`
}
const formatNumber = n => {
n = n.toString()
return n[1] ? n : `0${n}`
}
module.exports = {
formatTime
}
除此之外，页面中所用到的icon图标这里也贴出供参考：
picture.jpg
location.png
right.png
time.png
