在之前的博文中,提到了开发的垃圾指纹微信小程序。
博文链接如下:垃圾指纹介绍
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