13 | 小程序实战之意见反馈

最新推荐文章于 2022-05-15 17:35:41 发布
最新推荐文章于 2022-05-15 17:35:41 发布
阅读量3.7k 收藏 34
点赞数 2
分类专栏： 小程序实战1_购物商城
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nsx_truth/article/details/108171152
版权

前言

其实微信小程序的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
      });
    }
༺鲸落༻
关注
  • 2
    点赞
  • 踩
  • 34
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
微信小程序开发中的用户反馈与意见收集
吃不胖.
09-28 591
在微信小程序开发中，用户反馈与意见收集是非常重要的一环，有效地收集用户的反馈和意见可以帮助我们更好地了解用户需求和不足之处，从而进行相应的改进和优化。以上三种方式都是比较常见的用户反馈和意见收集方式，在实际的微信小程序开发中，我们可以根据实际需求来选择适合的方式。无论使用哪种方式，收集到用户的反馈和意见后，我们需要及时对其进行处理和回复，以提高用户满意度。在微信小程序中，我们还可以通过调查问卷来收集用户的反馈和意见，这需要使用到微信小程序的第三方库。与表单不同，我们也可以通过弹窗来收集用户的反馈和意见。
微信用户反馈小程序示例.rar
07-10
微信小程序中的一些用户反馈组件用法示例，可熟悉使用一些组件实现的相关功能，比如页面监控， 生命周期函数--监听页面初次渲染完成，页面相关事件处理函数--监听用户下拉动作，用户点击右上角分享，加号的控制打开/关闭，头像显示，弹出框、添加图片到服务器、使用hotapp接口获取图片路径、上传文字到服务器、消息数组等。 　　你可以留下联系方式，文本，图片，进行反溃
小程序页面跳转与意见反馈
qq_45221780的博客
02-25 3073
小程序My功能（一） open-type="feedback与老版不同，新版已经改为该页面，提建议可以在其它异常。而且在开发工具，这个功能是无法打开，只有真机测试可以体验。 跳转外部页面 微信小程序无法在直接内部打开并跳转到外部的应用，反之也一样。 跳转内部界面 以下方法均类似，绑定事件（具体参数见官方文档） wx.navigateTo 保留当前页面、跳转到应用内的某个页面。 用 wx....
微信小程序 — 小程序反馈与建议功能 及 小程序button按钮去除默认样式
紫陌520的博客
02-27 7501
这节给大家讲解小程序 反馈与建议功能的实现。 我们做小程序难免会遇到一些未知的问题，这个时候给用户提供一个反馈与建议功能就显得至关重要了。这一节来带领大家实现小程序的反馈与建议功能。 先看效果图 还是老规矩，我们学习这节之前，先带领大家去熟悉下相关的官方文档。“官方文档永远是最好的老师”https://developers.weixin.qq.com/miniprogram...
微信小程序使用意见反馈
weixin_33882452的博客
05-17 4157
使用微信提供的意见反馈 一、button调用意见反馈 1、直接上代码 <button open-type='feedback'>意见反馈</button> 复制代码简单吧、点击调用效果 2、出现很多list 随便点一个先发送看一看 3、反馈成功 4、这个反馈信息咱们可以到小程序后台去查看 点击左侧导航 管理>用户反馈 5、回复消息需要配客服账户 二、打开小程...
微信小程序商城项目实战(完结篇:意见反馈)
没有途径，只有努力
05-15 1229
微信小程序商城项目完结意见反馈代码实现首先修改标题并且使用之前写好的tab组件编写界面编写样式逻辑处理js效果图 意见反馈 做假的意见反馈,主要练习一下微信小程序文件上传api以及样式界面的编写、组件的使用逻辑 代码实现 首先修改标题并且使用之前写好的tab组件 json { "usingComponents": { "tab":"/components/Tabs/Tabs" }, "navigationBarTitleText": "意见反馈" } 编写界面 <tab ta
微信小程序：意见反馈制作（2）组件（可加图片）
qq_52126119的博客
04-27 1556
此篇文章为意见反馈组件，详细做法、 具体做法见[微信小程序：意见反馈制作（1）（可加图片）](https://blog.csdn.net/qq_52126119/article/details/124440881?utm_source=app&app_version=5.3.0&code=app_1562916241&uLinkId=usr1mkqgl919blen)
微信小程序意见反馈的实现
热门推荐
AnonymousColt的博客
06-01 1万+
第一种：自己实现 feedback.js： const url = require('../../utils/requireurl.js').url; Page({ /** * 页面的初始数据 */ data: { loading: false, contact: '', contant: '' }, formSubmit: functi...
微信小程序——意见反馈页面的实现（使用使用微信官方反馈功能）
Leuchten的博客
07-19 6511
** 微信小程序——意见反馈的实现 **（使用使用微信官方反馈功能） 代码： .json { "navigationBarTitleText": "问题反馈" } .wxml <view class="container"> <image class='about-banner'src='/images/图片名.jpg'></image> <button open-type='feedback' type='primary'>意见反馈</butto
微信小程序代码-用户反馈组件.zip
04-22
微信小程序代码-用户反馈组件.zip，小程序模板代码，可以直接从源码里粘贴复制过来，虽然这样做不利于自己独立编写代码。
小程序demo
07-21
小程序,小程序demo,小程序
微信小程序实战之轮播图（3）
01-20
由于微信小程序，整个项目编译后的大小不能超过1M 查看做轮播图功能的一张图片大小都已经有100+k了 那么我们可以把图片放在服务器上，发送请求来获取。 index.wxml： 这里使用小程序提供的组件 autoplay：自动播放 ...
微信小程序实战之运维小项目
08-31
主要介绍了微信小程序实战之运维小项目,就是利用微信小程序实现了一个类似138的功能，输入IP就可以查看IP的详细信心，有需要的朋友可以参考借鉴，下面来一起看看吧。
微信小程序点餐系统微信小程序开发实战
06-07
微信小程序点餐系统微信小程序开发实战
微信小程序 实战小程序实例
11-23
微信小程序基本组件和API已撸完，总归要回到正题的，花了大半天时间做了个精简版的百思不得姐，包括段子，图片，音频，视频，四个模块。这篇就带着大家简述下这个小的APP，源码会放到GitHub上欢迎start。 项目中我能...
4 | 小程序实战之分类页面（点击菜单切换商品种类并且右侧菜单置顶 + 使用缓存技术）
NSX-Truth
08-15 6628
1. 效果 2. 分析接口数据 3. 获取分类页面的数据接口 https://api-hmugo-web.itheima.net/api/public/v1/categories 4. 调用接口 （1）为了方便演示，添加一个编译模式 （2）现在分类页面的index.js文件中创建三个空数组 index.js data: { // 左侧的菜单数据 leftMenuList: [], // 右侧的商品数据 rightContent: [] }, // 为了方便使用数据
7 | 小程序实战之商品详情页面（轮播图&价格&名称&图文详情动态渲染 + 实现轮播图可放大预览图片 + 底部工具栏如购物车 + 收藏按钮状态）
NSX-Truth
08-18 6467
1. 效果 2. 获取商品详情数据接口 2.1 数据接口地址 https://api-hmugo-web.itheima.net/api/public/v1/goods/detail 如果发现为null，别慌，记得传个goods_id参数 2.2 调用请求 先添加一个商品详情编译模式 3. 分析接口数据 4. 轮播图&价格&名称&图文详情动态渲染 index.js import {request} from "../../request/index.js" import r
微信小程序开发实战pdf下载
最新发布
12-22
微信小程序开发实战PDF下载的过程需要通过微信小程序的开发工具和相关接口来实现。首先，开发人员需要在微信小程序的开发工具中创建一个新的小程序项目，然后进行相关的页面布局和编码工作。在小程序内需要添加一个用于PDF文件下载的按钮或者链接，用户点击后触发下载操作。 在小程序中实现PDF下载的关键是使用小程序的网络请求接口和文件保存接口。开发人员需要向服务器发起HTTP请求，获取PDF文件的URL地址，并使用小程序的文件保存接口将文件保存到用户的本地设备中。为了确保下载操作的顺利进行，开发人员需要处理好网络请求和文件保存的错误处理，以提高用户体验。 另外，在实际开发中还需要考虑到PDF文件的大小和下载时间，如果文件较大可能会影响用户的下载体验，因此可以考虑使用压缩文件或者分片下载等技术来优化下载过程。同时，为了保护用户隐私和数据安全，开发人员需要确保下载的PDF文件来源可信，避免下载到恶意文件导致设备受损。 总的来说，微信小程序开发实战PDF下载需要开发人员熟练掌握小程序的开发工具和接口，结合网络请求和文件保存技术，确保用户能够顺利下载并安全地保存PDF文件。同时也需要考虑到用户体验和数据安全等方面的问题，以提高小程序的整体质量和用户满意度。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值