上海微网站建设方案,公司建设电商型网站的作用,中国建筑工程平台网,成都协会网站建设目录
一、小程序UI
1.讲述
2. 介绍vantWeapp
3. 使用vantWeapp
安装
构建
依赖
引用
二、后端
1. 后端实体对象
2. 后端接口
3. 实现类
4. 请求处理类
三、前端
1. 定义路径
2. 页面引用
3. 页面
4. 页面美化
5. 数据
6. 效果展示 一、小程序UI
1.讲述 小…目录
一、小程序UI
1.讲述
2. 介绍vantWeapp
3. 使用vantWeapp
安装
构建
依赖
引用
二、后端
1. 后端实体对象
2. 后端接口
3. 实现类
4. 请求处理类
三、前端
1. 定义路径
2. 页面引用
3. 页面
4. 页面美化
5. 数据
6. 效果展示 一、小程序UI
1.讲述 小程序UIUser Interface是指小程序的用户界面包括小程序的整体布局、样式、交互等方面的设计。小程序UI的设计目的是为了提供用户友好的界面使用户能够方便地使用小程序的功能。 小程序UI的设计原则通常包括以下几点 1. 简洁明了小程序的界面设计应该简洁明了避免过多的视觉干扰和复杂的布局。用户可以通过一目了然的界面结构快速找到所需的功能。 2. 一致性小程序的不同页面之间应该保持一致的界面设计包括颜色、字体、按钮等方面的统一。这样可以提高用户的学习和使用效率减少用户的困惑。 3. 易用性小程序的界面设计应该考虑用户的使用习惯和心理需求尽量减少用户的操作步骤和思考负担。例如常用的功能应该放在显眼的位置操作按钮应该易于点击等。 4. 可访问性小程序的界面设计应该考虑到不同用户的特殊需求例如视力障碍者、听力障碍者等。设计师应该通过合适的颜色对比度、字体大小等方式来提高小程序的可访问性。 5. 反馈机制小程序的界面设计应该提供即时的反馈机制告知用户他们的操作是否成功或失败。例如可以通过动画、弹窗等方式来提示用户操作的结果。 小程序UI的设计通常由UI设计师负责他们需要根据小程序的功能和定位进行界面设计包括页面的布局、颜色的选择、图标的设计等。同时他们还需要与开发人员密切合作确保设计的界面能够被准确地实现。 2. 介绍vantWeapp vantWeapp是一个基于微信小程序的组件库是Vant组件库的小程序版本。它包括了常用的UI组件、业务组件和功能组件可以帮助开发者快速构建出优秀的小程序页面。 vantWeapp的主要作用包括 1. 提供常用UI组件vantWeapp提供了丰富的UI组件包括按钮、表单、列表、卡片、标签、导航、弹窗等可以帮助开发者快速构建出美观、易用的小程序页面。
2. 提高开发效率vantWeapp的组件具有可复用性可以减少开发者的重复工作提高开发效率。
3. 提供业务组件vantWeapp还提供了一些常用的业务组件例如地址选择器、城市选择器、日期选择器等可以帮助开发者快速实现一些常用的业务需求。
4. 提供功能组件vantWeapp还提供了一些功能组件例如图片预览、下拉刷新、上拉加载等可以帮助开发者实现一些常用的功能需求。 总之vantWeapp是一个非常实用的小程序组件库可以帮助开发者快速构建出美观、易用、功能丰富的小程序页面提高开发效率降低开发成本。 3. 使用vantWeapp 我们进入 vantWeapp 的官网进行快速上手 : https://vant-contrib.gitee.io/vant-weapp/0.x/#/quickstarthttps://vant-contrib.gitee.io/vant-weapp/0.x/#/quickstart 安装 在前端项目的跟路径中打开CMD窗口输入以下命令安装npm。 npm i vant-weapp -S --production 如图 : 构建 打开微信开发者工具点击 工具 - 构建 npm并勾选 使用 npm 模块 选项构建完成后即可引入组件 如图 : 注 : 有些版本的开发工具是不需要勾选使用 npm 模块 选项的 依赖 在前端项目的跟路径中打开CMD窗口输入以下命令安装项目依赖。 npm install 如图 : 引用 以 Button 组件为例只需要在app.json或index.json中配置 Button 对应的路径即可。如果你是通过下载源代码的方式使用 vant-weapp请将路径修改为项目中 vant-weapp 所在的目录。 例如 :
{navigationBarTitleText: 投票管理,usingComponents: {tabs:/components/tabs/tabs,van-button: vant-weapp/button,}
} 引入组件后可以在 wxml 中直接使用组件如以下代码 : van-button typedefault默认按钮/van-button
van-button typeprimary主要按钮/van-button
van-button typeinfo信息按钮/van-button
van-button typewarning警告按钮/van-button
van-button typedanger危险按钮/van-button
效果图 : 二、后端 以下后端代码都是使用SpringMVC及mybatis的技术学习还有前后端分离的技术应用在我博客中也信息的学习及技术通过这些来完成后端的代码及功能的实现。如有不懂可以在我博客中自行学习你肯定是技术大牛。 1. 后端实体对象
Vote : 投票
package com.CloudJun.ssm.model;import lombok.Data;Data
public class Vote {private Integer id;private Integer meetingId;private String name;private String remark;private Integer state;private String images;public Vote(Integer id, Integer meetingId, String name, String remark, Integer state, String images) {this.id id;this.meetingId meetingId;this.name name;this.remark remark;this.state state;this.images images;}Overridepublic String toString() {return Vote{ id id , meetingId meetingId , name name \ , remark remark \ , state state , images images \ };}
}
2. 后端接口
VoteMapper : 自动生成的对象接口
package com.CloudJun.ssm.mapper;import com.CloudJun.ssm.model.Vote;import java.util.List;public interface VoteMapper {int deleteByPrimaryKey(Integer id);int insert(Vote record);int insertSelective(Vote record);Vote selectByPrimaryKey(Integer id);int updateByPrimaryKeySelective(Vote record);int updateByPrimaryKey(Vote record);ListVote selectByList(Integer state);
}
VoteService 自己为了实现方法创建的接口
package com.CloudJun.ssm.service;import com.CloudJun.ssm.model.Vote;import java.util.List;/*** author CloudJun* create 2023-10-24 14:41*/
public interface VoteService {int deleteByPrimaryKey(Integer id);int insert(Vote record);int insertSelective(Vote record);Vote selectByPrimaryKey(Integer id);int updateByPrimaryKeySelective(Vote record);int updateByPrimaryKey(Vote record);ListVote selectByList(Integer state);}3. 实现类
VoteServiceimpl : 实现调用方法功能而创建的实现类
package com.CloudJun.ssm.service.impl;import com.CloudJun.ssm.mapper.VoteMapper;
import com.CloudJun.ssm.model.Vote;
import com.CloudJun.ssm.service.VoteService;
import org.springframework.beans.factory.annotation.Autowired;import java.util.List;/*** author CloudJun* create 2023-10-24 14:42*/
public class VoteServiceimpl implements VoteService {Autowiredprivate VoteMapper voteMapper;Overridepublic int deleteByPrimaryKey(Integer id) {return voteMapper.deleteByPrimaryKey(id);}Overridepublic int insert(Vote record) {return voteMapper.insert(record);}Overridepublic int insertSelective(Vote record) {return voteMapper.insertSelective(record);}Overridepublic Vote selectByPrimaryKey(Integer id) {return voteMapper.selectByPrimaryKey(id);}Overridepublic int updateByPrimaryKeySelective(Vote record) {return 0;}Overridepublic int updateByPrimaryKey(Vote record) {return 0;}Overridepublic ListVote selectByList(Integer state) {return voteMapper.selectByList(state);}
}4. 请求处理类
VoteController : 处理前端发送的请求及处理数据并且给予回馈数据到前端
package com.CloudJun.ssm.wxcontroller;import com.CloudJun.ssm.mapper.VoteMapper;
import com.CloudJun.ssm.model.Info;
import com.CloudJun.ssm.model.Vote;
import com.CloudJun.ssm.util.ResponseUtil;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.util.HashMap;
import java.util.List;
import java.util.Map;/*** author CloudJun* create 2023-10-24 14:24*/
RestController
RequestMapping(/wx/vote)
public class VoteController {Autowiredprivate VoteMapper voteMapper;RequestMapping(/add)public Object Add (Vote vote){int i voteMapper.insertSelective(vote);return ResponseUtil.ok();}RequestMapping(/list)public Object list (Integer state){ListVote votes voteMapper.selectByList(state);return ResponseUtil.ok(votes);}RequestMapping(/update)public Object update (Vote vote){int i voteMapper.updateByPrimaryKey(vote);return ResponseUtil.ok();}}三、前端 以下的前端代码基于我博客中的进行扩写 : 微信小程序之微信授权登入及授权的流程讲解https://blog.csdn.net/SAME_LOVE/article/details/133963879?spm1001.2014.3001.5501 1 . 定义路径 在项目中的 api.js 文件里配置后端请求数据的请求地址。 // 以下是业务服务器API地址// 本机开发API地址
var WxApiRoot http://localhost:8080/oapro/wx/;
// 测试环境部署api地址
// var WxApiRoot http://192.168.191.1:8080/oapro/wx/;
// 线上平台api地址
//var WxApiRoot https://www.oa-mini.com/demo/wx/;module.exports {IndexUrl: WxApiRoot home/index, //首页数据接口SwiperImgs: WxApiRootswiperImgs,MettingInfos: WxApiRootmeeting/list,MettingVote : WxApiRootinfo/list,MettingVoteAdd : WxApiRootvote/add,//增加投票MettingVoteList : WxApiRootvote/list,//获取投票信息MettingVoteupdate : WxApiRootvote/update,//确认投票AuthLoginByWeixin: WxApiRoot auth/login_by_weixin, //微信登录UserIndex: WxApiRoot user/index, //个人页面用户相关信息AuthLogout: WxApiRoot auth/logout, //账号登出AuthBindPhone: WxApiRoot auth/bindPhone //绑定微信手机号
};
2. 页面引用 在项目的投票管理页面中配置引用的组件及自定义组件在.JSON文件中编写 : list.json
{navigationBarTitleText: 投票管理,usingComponents: {tabs:/components/tabs/tabs,van-button: vant-weapp/button,van-notice-bar: vant-weapp/notice-bar/index,van-toast: vant-weapp/toast/index}
}
3. 页面 在项目的投票管理页面中进行编写页面标签对数据进行显示在.wxml文件中 list.wxml
!--pages/vote/list/list.wxml--
tabs tabList{{tabs}} bindtabsItemChangetabsItemChange
/tabs
view styleheight: 100rpx;/viewview class{{componentStatus[0] ? : hidden}}
!-- 发起投票版块 --
view classpublishform bindsubmitvotesubmitview classimg
view classimg_left
image classimgs src{{imageUrl ? /static/persons/15.gif:imageUrl }} modeaspectFit bindtaphandleUploadImage/image
input hiddentrue typetext nameimages value{{imageUrl}} /
/view
/viewview classmeeting_idview classmeeting_title所属会议 : /viewpicker bindchangemeetingChange namemeetingId value{{array[meeting_id].id}} range-keytitle range{{array}}view classmeeting_text {{array[meeting_id].titlenull?请选择会议:array[meeting_id].title}}/view/picker
/view
view classmeeting_id idmeeting_idview classmeeting_title投票标题 : /viewinput classvote_text placeholder请输入标题 typetext namename /
/view
view classtextarea idvote_textview classmeeting_textarea投票说明 : /viewtextarea classvote_textarea nameremark typetext /textarea
/view
view classvote_buttonbutton classvote_button_empty typedefault formTypereset plaintrue清空内容/buttonview stylewidth: 70rpx;/viewbutton classvote_button_submit typeprimary formTypesubmit plaintrue确认发起/button
/view
/form
/view/viewview class{{componentStatus[1] ? : hidden}}van-notice-barleft-iconflower-omodecloseablecolor#6d9d9edelay100backgroundColor#e4ecectext无论我们能活多久我们能够享受的只有无法分割的此刻不会回头离弦的箭、逝去的生活和失去的机会。此外别无其他。
/
!-- 已参与投票 --
block wx:for-items{{engage}} wx:for-itemitem wx:keyitem.id
view classvote_carryout
image classvote_carryout_img src{{item.images}}/image
view classvote_carryout_text
view stylewidth: 450rpx;display: flex;flex-direction:column;
text classvote_carryout_text_f {{item.name}}/text
text classvote_carryout_text_t{{item.remark}}/text
/view
button classvote_carryout_text_btn bindtapvoteparticipate data-item{{item.id}} sizemini参与/button
/view
/view
/block/viewview class{{componentStatus[2] ? : hidden}}van-notice-barleft-iconflower-omodecloseablecolor#6d9d9edelay100backgroundColor#e4ecectext无论我们能活多久我们能够享受的只有无法分割的此刻不会回头离弦的箭、逝去的生活和失去的机会。此外别无其他。
/
!-- 未参与投票 --
block wx:for-items{{not}} wx:for-itemitem wx:keyitem.id
view classvote_carryout
image classvote_carryout_img src{{item.imagesnull?/static/persons/15.gif:item.images}}/image
view classvote_carryout_text
view stylewidth: 450rpx;display: flex;flex-direction:column;
text classvote_carryout_text_f {{item.name}}/text
text classvote_carryout_text_t{{item.remark}}/text
/view
button classvote_carryout_text_btn bindtapVotenotbtn sizemini已参与/button
/view
/view
/block/viewview class{{componentStatus[3] ? : hidden}}van-notice-barleft-iconflower-omodecloseablecolor#6d9d9edelay100backgroundColor#e4ecectext无论我们能活多久我们能够享受的只有无法分割的此刻不会回头离弦的箭、逝去的生活和失去的机会。此外别无其他。
/
!-- 未参与投票 --
block wx:for-items{{lists}} wx:for-itemitem wx:keyitem.id
view classvote_carryout
image classvote_carryout_img src{{item.imagesnull?/static/persons/15.gif:item.images}}/image
view classvote_carryout_text
view stylewidth: 450rpx;display: flex;flex-direction:column;
text classvote_carryout_text_f {{item.name}}/text
text classvote_carryout_text_t{{item.remark}}/text
/view
button classvote_carryout_text_btn sizemini{{item.state0?未参与:已参与}}/button
/view
/view
/block/view
4. 页面美化 在项目的投票管理页面中编写标签样式对页面的美化在.wxss文件中编写 list.wxss
/* pages/vote/list/list.wxss */
.hidden {display: none;
}.img {height: 450rpx;/* display: flex; *//* border-radius: 6px; *//* align-items: center; */
}.imgs {height: 420rpx;width: 419rpx;margin-left: 105rpx;box-shadow: 0 0 20px rgb(117, 241, 241);border-radius: 10rpx;
}.img_left {margin-top: 28rpx;height: 450rpx;width: 600rpx;margin-left: 57rpx;/* border-radius: 23rpx; *//* background-color: deeppink; */
}.publish {width: 100%;
}.meeting_id {height: 100rpx;background-color: rgb(230, 243, 243);display: flex;/* border-radius: 6px; */align-items: center;
}.meeting_title {margin-left: 20rpx;
}.meeting_text {/* background-color: aqua; */margin-left: 20rpx;margin-top: 10rpx;padding-left: 20rpx;font-size: 14px;height: 50rpx;width: 520rpx;
}#meeting_id {border-top: 2px solid #fafafa;
}#vote_text {display: flex;align-items: center;
}.vote_text {margin-left: 35rpx;
}.meeting_textarea {margin-left: 20rpx;width: 440rpx;
}.vote_textarea {height: 160rpx;width: 490px;padding-right: 10rpx;padding-top: 10rpx;padding-left: 10rpx;border: 2px solid #c0f0f1;border-radius: 20rpx;
}.textarea {border-top: 2px solid #fafafa;background-color: rgb(238, 247, 247);
}.vote_button {border-top: 4px solid #fafafa;display: flex;width: 80%;align-items: center;margin-left: 73rpx;
}
.vote_carryout{background-color: rgba(150, 250, 250, 0.315);box-shadow: 0 0 20px rgb(117, 241, 241);margin: 20rpx 30rpx 0rpx 70rpx;border-radius: 20rpx;height: 460rpx;width: 620rpx;
}
.vote_carryout_img{ height: 350rpx;width: 620rpx;border-radius: 20rpx;
}
.vote_carryout_text{
display: flex;
height: 100rpx;
border-radius: 20rpx;
}
.vote_carryout_text_f{margin-left: 50rpx;height: 40rpx;font-size: 12px;
}
.vote_carryout_text_t{margin-left: 50rpx;height: 40rpx;color: rgba(116, 114, 114, 0.89);font-size: 12px;
}
.vote_carryout_text_btn{margin-top: 10rpx;height: 80rpx;font-size: 12px;size: 12px;background-color: rgb(174, 249, 252);
}
5. 数据 在项目的投票管理页面中编写后台请求的数据进行回应到前端在.js文件中 list.js
// pages/vote/list/list.js
var app getApp();
const api require(../../../config/api);
const util require(../../../utils/util.js);
Page({/*** 页面的初始数据*/data: {tabs: [发起投票, 未参与, 已参与, 全部投票],//顶部导航栏componentStatus: [true, false, false, false],//用于处理内容显示array: [美国, 中国, 巴西, 日本],engage:[],//未参与的投票not:[],//已参与的投票lists:[],//全部投票信息meeting_id: 请选择会议,imageUrl: ,//图片路径votename: 123},//选择所属会议的事件meetingChange(e) {// console.log(e.detail.value) this.setData({meeting_id: e.detail.value})},//初始会议信息meetingini() {util.request(api.MettingVote).then(res {this.setData({array: res.data.infoList})}).catch(res {console.log(服器没有开启使用模拟数据!)})},//初始化未参与的投票Voteiniengage() {util.request(api.MettingVoteList,{state:0}).then(res {// console.log(res);this.setData({engage: res.data})}).catch(res {console.log(服器没有开启使用模拟数据!)})},//初始化已参与的投票Voteininot() {util.request(api.MettingVoteList,{state:1}).then(res {// console.log(res);this.setData({not: res.data})}).catch(res {console.log(服器没有开启使用模拟数据!)})},//初始化全部投票信息VoteiniList() {util.request(api.MettingVoteList).then(res {// console.log(res);this.setData({lists: res.data})}).catch(res {console.log(服器没有开启使用模拟数据!)})},//参与投票的点击事件voteparticipate(id){// console.log(id.target.dataset.item)wx.showModal({title: 提示,content: 你是否要贡献出你宝贵的一票?,success: function (res) {if (res.confirm) {//这里是点击了确定以后util.request(api.MettingVoteupdate, {id:id.target.dataset.item}).then(res {// console.log(res)if (res.errno 0) {wx.showToast({title: 成功投票,icon: none,duration: 1000//持续的时间})}}).catch(res {console.log(服器没有开启发布失败)})} else {//这里是点击了取消以后console.log(用户点击取消)}}})},//发起投票的事件votesubmit(data) {console.log(data.detail.value)wx.showModal({title: 提示,content: 确定发起该投票吗?,success: function (res) {if (res.confirm) {//这里是点击了确定以后util.request(api.MettingVoteAdd, data.detail.value).then(res {// console.log(res)if (res.errno 0) {wx.showToast({title: 发布投票成功,icon: none,duration: 1500//持续的时间})}}).catch(res {console.log(服器没有开启发布失败)})} else {//这里是点击了取消以后console.log(用户点击取消)}}})},//已参与按钮的点击事件Votenotbtn() {wx.showToast({title: 已进行投票不可再投,icon: none,duration: 1000//持续的时间})},//图片选择器handleUploadImage() {wx.chooseImage({count: 1,success: (res) {const imagePath res.tempFilePaths[0];// 处理选择的图片路径// console.log(选择的图片路径, imagePath);this.setData({imageUrl: imagePath // 更新图片路径触发重新渲染});}});},/*** 生命周期函数--监听页面加载*/onLoad(options) {this.meetingini();this.Voteiniengage();this.Voteininot();this.VoteiniList();},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {},//点击导航栏进行切换下方内容tabsItemChange(e) {let index e.detail.index;//全部的组件赋值为falseconst lists [false, false, false, false];//将所点击的组件赋值为truelists[index] true;this.setData({componentStatus: lists // 更新 data 中的 componentStatus 属性值});},// tabsItemChange(e){// let index e.detail.index;// console.log(vote.indexindex)// if(index1 || index2){// if (app.globalData.hasLogin) {// }else{// wx.navigateTo({// url: /pages/auth/login/login,// })// }// }// }
})
6. 效果展示
发起投票 参与投票 查看所有投票
