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

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

在之前的博文中,提到了开发的垃圾指纹微信小程序。

博文链接如下:垃圾指纹介绍


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

相关文章
|
2月前
|
小程序 前端开发 开发者
小程序的页面如何布局?
【10月更文挑战第16天】小程序的页面如何布局?
61 1
|
3月前
|
JSON 小程序 前端开发
微信小程序的目录结构及页面结构的说明
本文详细介绍了微信小程序的目录结构、页面组成部分以及项目的全局配置文件,阐述了小程序的宿主环境和运行机制,包括小程序启动和页面渲染的过程。
微信小程序的目录结构及页面结构的说明
|
3月前
|
小程序 JavaScript API
微信小程序开发学习之页面导航(声明式导航和编程式导航)
这篇文章介绍了微信小程序中页面导航的两种方式:声明式导航和编程式导航,包括如何导航到tabBar页面、非tabBar页面、后退导航,以及如何在导航过程中传递参数和获取传递的参数。
微信小程序开发学习之页面导航(声明式导航和编程式导航)
|
2月前
|
小程序
java--微信小程序发送模板消息
java--微信小程序发送模板消息
121 0
|
3月前
|
JSON 小程序 JavaScript
微信小程序页面事件,下拉刷新事件和上拉触底事件
这篇文章介绍了微信小程序中如何实现下拉刷新和上拉触底事件,包括开启下拉刷新、配置下拉刷新样式、监听下拉刷新事件,以及监听上拉触底事件和配置上拉触底的距离。
|
2月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
569 7
|
2月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
691 1
|
2月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
123 7
ly~
|
3月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
81 6
|
2月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
216 1