微信小程序：意见反馈制作（1）（可加图片）

微信小程序：意见反馈制作（可加图片）

不同类型的微信小程序可能需要不同的意见反馈样式，仅以我做的为例，具体样式可自行修改
1、小程序自带意见反馈（非常简单）

<button open-type="feedback">意见反馈</button>

效果图

2.自制意见反馈
效果图

wxml

<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>

wxss

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: 40%;background-color: var(--themeColor);color: #fff;
}

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 调用小程序内置的选择图片apiwx.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,// 上传的文件的名称 后台来获取文件  filename: "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});}}
})

json

{"usingComponents": {"Tabs":"../../components/Tabs/Tabs","UpImg":"../../components/UpImg/UpImg"},"navigationBarTitleText": "意见反馈"
}

由于内容过多，看起来混乱，
“Tabs”:“…/…/components/Tabs/Tabs”,
“UpImg”:“…/…/components/UpImg/UpImg”
这两个组件的代码放在下一篇文章中
微信小程序：意见反馈制作（2）组件（可加图片）

微信小程序：意见反馈制作（1）（可加图片）相关推荐

微信小程序——意见反馈页面的实现（使用使用微信官方反馈功能）
微信小程序--意见反馈页面的实现 (使用使用微信官方反馈功能) 代码: .json {"navigationBarTitleText": "问题反馈" } .w ...
微信小程序意见反馈的实现
第一种:自己实现 feedback.js: const url = require('../../utils/requireurl.js').url; Page({/*** 页面的初始数据*/data ...
微信小程序使用swiper制作轮播图留白的解决方法
微信小程序相比网页制作轮播图快捷了很多,直接可以使用swiper标签,但是对于新手来说,也有很多不可避免的坑. 附上轮播图代码 <view class="swp">&l ...
微信小程序：block制作动态商品列表
微信小程序:block制作动态商品列表在制作微信小程序时,我们往往会碰到需要动态生成列表的情况,本文便是以常见的商品列表为例来学习如何利用block制作动态商品列表. 运行截图实现代码 js: P ...
个人怎么制作微信小程序，微信小程序可以免费制作吗？微信小程序制作教程
微信小程序微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打开应 ...
微信小程序使用 setInterval 制作计时器后台延迟问题
微信小程序使用 setInterval 制作计时器后台延迟问题之前参加2020年微信小程序应用开发大赛的时候写了一个用于校园足球的微信小程序--踢在浙大. 在小程序的设计过程中出现了一个裁判工具的功 ...
微信小程序：scroll-view制作横向滚动导航条特效
微信小程序:scroll-view制作横向滚动导航条特效一.scroll-view介绍微信小程序官方释义为:可滚动视图区域,目前一共有10几个属性,包括:scroll-x.scroll-y.scr ...
微信小程序中如何制作瀑布流效果
微信小程序中如何制作瀑布流效果如图是首先,页面布局,页面分为两个部分,左右各一部分,各自插入图片,页面代码如下: <view class="city_history"> ...
php微信小程序向下滑动,微信小程序功能实现：上滑加载下拉刷新
本篇文章给大家带来的内容是关于微信小程序功能实现:上滑加载下拉刷新,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 之前谈到文章列表的数据加载,是一次性全部加载,这样是不友好的.这章介 ...
微信小程序开发之scroll-view上拉加载数据实现
微信小程序开发之scroll-view上拉加载数据实现一.开发思路 1.使用小程序的scroll-view组件中提供了一个bindscrolltolower属性监听组件的滑动到了底部 https:/ ...

微信小程序：意见反馈制作（1）（可加图片）

微信小程序：意见反馈制作（可加图片）

微信小程序：意见反馈制作（1）（可加图片）相关推荐

最新文章

热门文章