文章目录
- 前言
- 一、意见反馈页面
- 1. 业务逻辑
- 2. 关键技术
- 二、意见反馈页面代码
- 1.图片上传组件
- 2.页面代码
- 3.效果
前言
对于需要收集产品上线后用户实际使用感受的，意见反馈绝对是一个很好用的功能，开发设计成本很低，却能获得比较显著的效果，但就因为是小功能，所以往往不被重视。如果一个产品是有长远发展规划的，个人觉得应该在产品的第一个版本上线的时候就应该配备意见反馈的功能，这里所能收集到的有需求，有 BUG，还有其他的，只要有问题，就能找到解决的办法，没有任何反馈的时候，就只能靠产品的规划和设计师的水平了，当然也不是一味的遵循用户的意见，但绝对是一个非常好的参考来源。
一、意见反馈页面
1. 业务逻辑
- 点击 可以选择本地图⽚，并且显⽰到⻚⾯上
- 点击 提交 可以上传图⽚到 接⼝ 地址 新浪图床 上
- 点击图⽚，会移除⾃⼰
- 点击 tab栏的标题，可以切换选中效果
2. 关键技术
- ⾃定义组件 tab
- ⾃定义组件 图⽚删除组件
- ⼩程序 上传⽂件 api
二、意见反馈页面代码
1.图片上传组件
代码语言：javascript复制<view class="up_img_wrap">
<image src="{{src}}"></image>
<icon type="clear" size="23" color="red">
</icon>
</view>// components/UpImg/UpImg.js
Component({
/**
* 组件的属性列表
*/
properties: {
src:{
type:String,
value:""
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
}).up_img_wrap{
width: 90rpx;
height: 90rpx;
position: relative;
}
.up_img_wrap image{
width: 100%;
height: 100%;
border-radius: 15rpx;
}
.up_img_wrap icon{
position: absolute;
top:-22rpx;
right: -22rpx;
}2.页面代码
代码语言：javascript复制<Tabs tabs="{{tabs}}" bindtabsItemChange="handleTabsItemChange" >
<view class="fb_main">
<view class="fb_title">问题的种类</view>
<view class="fb_tips">
<text>功能建议</text>
<text>购买遇到问题</text>
<text>性能问题</text>
<text>其他</text>
</view>
<view class="fb_content">
<textarea value="{{textVal}}" bindinput="handleTextInput" placeholder="请描述一下您的问题"> </textarea>
<view class="fb_tool">
<button bindtap="handleChooseImg"> </button>
<view class="up_img_item"
wx:for="{{chooseImgs}}"
wx:key="*this"
bindtap="handleRemoveImg"
data-index="{{index}}"
>
<UpImg src="{{item}}" ></UpImg>
</view>
</view>
</view>
<view class="form_btn_wrap">
<button bindtap="handleFormSubmit" type="warn" >
<icon type="success_no_circle" size="23" color="white">
</icon>
提交
</button>
</view>
</view>
</Tabs>/*
1 点击 “ ” 触发tap点击事件
1 调用小程序内置的 选择图片的 api
2 获取到 图片的路径 数组
3 把图片路径 存到 data的变量中
4 页面就可以根据 图片数组 进行循环显示 自定义组件
2 点击 自定义图片 组件
1 获取被点击的元素的索引
2 获取 data中的图片数组
3 根据索引 数组中删除对应的元素
4 把数组重新设置回data中
3 点击 “提交”
1 获取文本域的内容 类似 输入框的获取
1 data中定义变量 表示 输入框内容
2 文本域 绑定 输入事件 事件触发的时候 把输入框的值 存入到变量中
2 对这些内容 合法性验证
3 验证通过 用户选择的图片 上传到专门的图片的服务器 返回图片外网的链接
1 遍历图片数组
2 挨个上传
3 自己再维护图片数组 存放 图片上传后的外网的链接
4 文本域 和 外网的图片的路径 一起提交到服务器 前端的模拟 不会发送请求到后台。。。
5 清空当前页面
6 返回上一页
*/
Page({
data: {
tabs: [
{
id: 0,
value: "体验问题",
isActive: true
},
{
id: 1,
value: "商品、商家投诉",
isActive: false
}
],
// 被选中的图片路径 数组
chooseImgs: [],
// 文本域的内容
textVal: ""
},
// 外网的图片的路径数组
UpLoadImgs: [],
handleTabsItemChange(e) {
// 1 获取被点击的标题索引
const { index } = e.detail;
// 2 修改源数组
let { tabs } = this.data;
tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
// 3 赋值到data中
this.setData({
tabs
})
},
// 点击 “ ” 选择图片
handleChooseImg() {
// 2 调用小程序内置的选择图片api
wx.chooseImage({
// 同时选中的图片的数量
count: 9,
// 图片的格式 原图 压缩
sizeType: ['original', 'compressed'],
// 图片的来源 相册 照相机
sourceType: ['album', 'camera'],
success: (result) => {
this.setData({
// 图片数组 进行拼接
chooseImgs: [...this.data.chooseImgs, ...result.tempFilePaths]
})
}
});
},
// 点击 自定义图片组件
handleRemoveImg(e) {
// 2 获取被点击的组件的索引
const { index } = e.currentTarget.dataset;
// 3 获取data中的图片数组
let { chooseImgs } = this.data;
// 4 删除元素
chooseImgs.splice(index, 1);
this.setData({
chooseImgs
})
},
// 文本域的输入的事件
handleTextInput(e) {
this.setData({
textVal: e.detail.value
})
},
// 提交按钮的点击
handleFormSubmit() {
// 1 获取文本域的内容 图片数组
const { textVal, chooseImgs } = this.data;
// 2 合法性的验证
if (!textVal.trim()) {
// 不合法
wx.showToast({
title: '输入不合法',
icon: 'none',
mask: true
});
return;
}
// 3 准备上传图片 到专门的图片服务器
// 上传文件的 api 不支持 多个文件同时上传 遍历数组 挨个上传
// 显示正在等待的图片
wx.showLoading({
title: "正在上传中",
mask: true
});
// 判断有没有需要上传的图片数组
if (chooseImgs.length != 0) {
chooseImgs.forEach((v, i) => {
wx.uploadFile({
// 图片要上传到哪里
url: 'https://images.ac.cn/Home/Index/UploadAction/',
// 被上传的文件的路径
filePath: v,
// 上传的文件的名称 后台来获取文件 file
name: "file",
// 顺带的文本信息
formData: {},
success: (result) => {
console.log(result);
let url = JSON.parse(result.data).url;
this.UpLoadImgs.push(url);
// 所有的图片都上传完毕了才触发
if (i === chooseImgs.length - 1) {
wx.hideLoading();
console.log("把文本的内容和外网的图片数组 提交到后台中");
// 提交都成功了
// 重置页面
this.setData({
textVal: "",
chooseImgs: []
})
// 返回上一个页面
wx.navigateBack({
delta: 1
});
}
}
});
})
}else{
wx.hideLoading();
console.log("只是提交了文本");
wx.navigateBack({
delta: 1
});
}
}
})page {
background-color: #eeeeee;
}
.fb_main {
padding: 20rpx;
color: #666;
}
.fb_main .fb_tips {
display: flex;
flex-wrap: wrap;
}
.fb_main .fb_tips text {
width: 30%;
padding: 10rpx;
text-align: center;
background-color: #fff;
margin: 20rpx 10rpx;
}
.fb_main .fb_content {
background-color: #fff;
margin-top: 20rpx;
}
.fb_main .fb_content textarea {
padding: 10rpx;
}
.fb_main .fb_tool {
display: flex;
flex-wrap: wrap;
padding-bottom: 30rpx;
}
.fb_main .fb_tool button {
margin: 0;
width: 90rpx;
height: 90rpx;
font-size: 60rpx;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
margin-left: 20rpx;
margin-top: 20rpx;
color: #ccc;
}
.fb_main .fb_tool .up_img_item {
margin-left: 20rpx;
margin-top: 20rpx;
}
.fb_main .form_btn_wrap {
margin-top: 20rpx;
display: flex;
justify-content: flex-end;
}
.fb_main .form_btn_wrap button {
margin: 0;
width: 30%;
}3.效果
