在之前的博文中，提到了开发的垃圾指纹微信小程序。
博文链接如下：垃圾指纹介绍

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.tempFilePathsapp.globalData.tempFilePaths = tempFilePathsthat.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:"****",//后端服务器urlfilePath: 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() + 1const 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

微信小程序发布动态页面模板相关推荐

微信小程序view动态长度_微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】...
本文实例讲述了微信小程序实现动态改变view标签宽度和高度的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 >我是view标签,我现在的宽度是{{v ...
微信小程序view动态长度_微信小程序实现动态获取元素宽高的方法分析
本文实例讲述了微信小程序实现动态获取元素宽高的方法.分享给大家供大家参考,具体如下: 我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuer ...
微信小程序动态更改标题栏_微信小程序实现动态设置页面标题的方法【附源码下载】...
本文实例讲述了微信小程序实现动态设置页面标题的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① WXML文件标题1 标题2 标题3 还原 ② JS文件 Page({ // 设置 ...
小程序发布上线流程_微信小程序发布流程：公司、个人如何注册小程序
如今制作微信小程序已经是非常简单的事了,即使是完全不懂技术的小白,也能利用小程序制作工具快速生成小程序,基本上选一个模板就能快速把页面搭建好. 不过,虽然小程序页面搭建很简单,但还有不少人不知道页面搭 ...
微信小程序获取页面元素高度_微信小程序之动态获取元素宽高
我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuery() 这个api接口,以前的某些问题就能得到解决了... 那么,这个api接口怎么用 ...
零基础也能学会的微信小程序制作动态搜索页
零基础也能学会的微信小程序制作动态搜索页准备工作: 微信开发者工具 APPID或测试号创建一个JavaScript基本框架(如下图) 最终效果: 动手做起来吧~ index.wxml <vi ...
微信会员卡html修改样式模板,微信小程序 JS动态修改样式的实现代码
微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动 ...
微信小程序发布上线流程以及个人小程序怎么通过审核
小程序如何发布?微信小程序发布流程其实很简单,本文就介绍下如何发布上线流程以及个人小程序怎么通过审核小程序在开发完成后,需要上传代码,设为体验版本,提交审核,发布上线这几个基本步骤微信小程序发布流 ...
在微信小程序中动态的添加类名
在微信小程序中动态的添加类名 <view data-num="1" class="takeTaxi {{_num == 1 ? 'active' : ''}}&qu ...

微信小程序发布动态页面模板