13 | 小程序实战之意见反馈
前言
其实微信小程序的button按钮，open-type可以跳转到内置的意见反馈界面，你如果想自己自定义一个意见反馈界面可以看看这篇文章，可以上传图片的哟
13.1 效果
13.2 静态页面
<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>
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>
page {
background-color: #eeeeee;
}
.fb_main {
padding: 20rpx;
color: #666;
.fb_title {
}
.fb_tips {
display: flex;
flex-wrap: wrap;
text {
width: 30%;
padding: 10rpx;
text-align: center;
background-color: #fff;
margin: 20rpx 10rpx;
}
}
.fb_content {
background-color: #fff;
margin-top: 20rpx;
textarea {
padding: 10rpx;
}
}
.fb_tool {
display: flex;
flex-wrap: wrap;
padding-bottom: 30rpx;
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;
}
.up_img_item{
margin-left: 20rpx;
margin-top: 20rpx;
}
}
.form_btn_wrap {
margin-top: 20rpx;
display: flex;
justify-content: flex-end;
button{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin: 0;
width: 30%;
color: white;
background-color: #e64340;
}
}
}
Page({
data: {
tabs: [
{
id: 0,
value: "体验问题",
isActive: true
},
{
id: 1,
value: "商品、商家投诉",
isActive: false
}
]
}
})
13.3 选择并显示图片
（1）思路
1 先创建一个用来显示上传后的图片的组件
2 点击 “+” 触发tap点击事件
3 调用小程序内置的 选择图片的 api
4 获取到 图片的路径 数组
5 把图片路径 存到 data的变量中
6 页面就可以根据 图片数组 进行循环显示 自定义组件
（2）代码
1 自定义组件 UpImgs
<view class="up_img_wrap">
<image src="{{src}}">image>
<icon
type="clear"
size="23"
color="red"
>
icon>
view>
.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;
}
properties: {
src:{
type:String,
value:""
}
},
2 反馈页面
<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"
>
<UpImgs src="{{item}}">UpImgs>
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>
page {
background-color: #eeeeee;
}
.fb_main {
padding: 20rpx;
color: #666;
.fb_title {
}
.fb_tips {
display: flex;
flex-wrap: wrap;
text {
width: 30%;
padding: 10rpx;
text-align: center;
background-color: #fff;
margin: 20rpx 10rpx;
}
}
.fb_content {
background-color: #fff;
margin-top: 20rpx;
textarea {
padding: 10rpx;
}
}
.fb_tool {
display: flex;
flex-wrap: wrap;
padding-bottom: 30rpx;
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;
}
.up_img_item{
margin-left: 20rpx;
margin-top: 20rpx;
}
}
.form_btn_wrap {
margin-top: 20rpx;
display: flex;
justify-content: flex-end;
button{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin: 0;
width: 30%;
color: white;
background-color: #e64340;
}
}
}
Page({
data: {
tabs: [
{
id: 0,
value: "体验问题",
isActive: true
},
{
id: 1,
value: "商品、商家投诉",
isActive: false
}
],
// 被选中的图片路径 数组
chooseImgs: []
},
// 外网的图片的路径数组
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]
})
}
});
},
})
13.4 删除上传的图片
（1）思路
1 点击 自定义图片 组件
2 获取被点击的元素的索引
3 获取 data中的图片数组
4 根据索引 数组中删除对应的元素
5 把数组重新设置回data中
（2）代码
在意见反馈页面中修改部分代码
<view
class="up_img_item"
wx:for="{{chooseImgs}}"
wx:key="*this"
bindtap="handleRemoveImg"
data-index="{{index}}"
>
<UpImgs src="{{item}}">UpImgs>
view>
// 根据索引删除上传的图片
handleRemoveImg(e){
// 1 获取被点击的组件的索引
const {index} = e.currentTarget.dataset;
// 2 获取data中的图片数组
let { chooseImgs } = this.data;
// 3 删除元素
chooseImgs.splice(index, 1);
this.setData({
chooseImgs
})
}
13.5 提交功能
// 文本域的输入的事件
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://img.coolcr.cn/api/upload',
// 被上传的文件的路径
filePath: v,
// 上传的文件的名称后台来获取文件file
name: "image",
// 顺带的文本信息
formData: {},
success: (result) =>{
console.log(result);
let url=JSON.parse (result.data);
this.UpLoadImgs.push(url);
// 所有的图片都上传完毕了才触发
if(i===chooseImgs.length-1){
// 关闭正在等待的图片
wx.hideLoading();
console.log("把文本的内容和外网的图片数组提交到后台中");
// 提交都成功了
// 重置页面
this.setData({
textVal:"",
chooseImgs:[]
})
// 返回上一个页面
wx.navigateBack({
delta: 1
});
}
console.log(this.UpLoadImgs);
},
})
})
}else{
// 关闭弹窗
wx.hideLoading();
console.log("只是提交了文");
// 返回上个页面
wx.navigateBack({
delta:1
});
}