微信小程序 — 小程序反馈与建议功能 及 小程序button按钮去除默认样式
这节给大家讲解小程序 反馈与建议功能的实现。
我们做小程序难免会遇到一些未知的问题,这个时候给用户提供一个反馈与建议功能就显得至关重要了。这一节来带领大家实现小程序的反馈与建议功能。
先看效果图
还是老规矩,我们学习这节之前,先带领大家去熟悉下相关的官方文档。
“官方文档永远是最好的老师”
https://developers.weixin.qq.com/miniprogram/dev/component/button.html
我们需要实现的反馈与建议功能是小程序官方为我们提供的一个开发能力,所以我们要要做的就是调起微信官方的“反馈与建议功能”
调起官方提供的功能,我们通常用button按钮来实现,botton按钮有一个open-type属性,open-type就是微信官方提供的开发能力。
open-type官方目前开发的功能如下
这节我们使用feedback功能来实现反馈与建议。下面开发教大家实现步骤。
一,个人中心添加反馈与建议模块
如上图所示,我们在代码的me.wxml里添加
<button class='button' open-type="feedback">反馈与建议
</button>
这就是调起反馈与建议开发功能的关键。
反馈与建议功能我们用模拟器是没有办法调起来的 所以我们要用手机微信来预览该功能。步骤就是,点击开发者功能的预览---》出现如下图的二维码----》用手机微信扫描二维码即可。
预览
然后到个人中心点击反馈与建议按钮,就可以调起反馈与建议的功能了。
1,反馈与建议功能页
功能页
2,我们这里提一条建议,在小程序后台可以看到用户提的这条建议。
提交成功
3,小程序后台收到这条反馈的效果图如下
到这里我们就可以轻松的实现反馈与建议功能了
但是有个问题,我们的反馈与建议和联系客服按钮样式不统一,显得有些不太好看
样式不统一
所以接下来带领大家来实现样式的统一。
1,首先来分析下样式为什么不统一
我们联系客服和反馈建议写的css样式都是一样的,为什么显示出来会有差异呢?因为button按钮有自己自带的样式,所以我们要做的就是去除botton自带的样式。2,去除botton自带样式
去除默认
经过如上修改后,可以看到样式很统一了。
到这里我们就完美的实现了反馈与建议了。下面贴出来me.wxml和me.wxss的代码
- me.wxml
<!--pages/me/me.wxml-->
<view class='top' wx:if='{{!yincang}}'><image class='touxiang' src='{{yonghu.avatarUrl}}'></image><text class='name'>{{yonghu.nickName}}</text>
</view>
<button wx:if='{{yincang}}' open-type="getUserInfo" type='primary' lang="zh_CN" bindgetuserinfo="onGotUserInfo">获取用户信息</button>
<!-- 分割线 -->
<view class='fengexian'></view>
<!-- 联系客服 -->
<view class='kefu' bindtap='qukefuye'><text>联系客服</text>
</view>
<!-- 分割线 -->
<view class='fengexian'></view>
<!-- 反馈与建议 -->
<button class='button' open-type="feedback"><text class='button_title'>反馈建议</text>
</button>
- me.wxss
/* pages/me/me.wxss */page {background: gainsboro;
}.touxiang {width: 100px;height: 100px;border-radius: 100px;
}.top {display: flex;flex-direction: column;align-items: center;background: white;
}.name {margin-top: 20px;font-size: 20px;margin-bottom: 20px;color: red;
}.fengexian {width: 100%;height: 5px;background: gainsboro;
}/* 联系客服的样式 */.kefu {width: 100%;background: white;padding: 10px;
}/* 反馈与建议的样式 */
.button {width: 100%;background: white;border: none;text-align: left;padding: 7px 10px;margin: 0px;line-height: 1.6;border-radius: 0;
}.button::after {border: none;border-radius: 0;
}.button_title {font-size: 1rem;
}
如果此文对你有帮助请点赞或者打赏哦 ^-^
微信小程序 — 小程序反馈与建议功能 及 小程序button按钮去除默认样式相关推荐
- 小程序去除button按钮的默认样式
/* 去除button默认样式 */ button::after { border: none; } button { background-color: transparent; padding-l ...
- php取消滑动条,小程序中button以及滚动条默认样式如何清除(代码)
本篇文章给大家带来的内容是关于小程序中button以及滚动条默认样式如何清除(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实现如下图所示的效果,用四个button实现: 在 ...
- 微信小程序中 button丢失其默认样式
ps: 微信官方没有提供 打开客服的api 所以只能通过button来打开客服 实现思路: 1.让botton按钮 宽度高度 百分百充斥整个盒子 2. 外面盒子设置相对定位 button设置绝对定位 ...
- 微信小程序 —— button按钮去除border边框
在开发微信小程序组件框架时,我遇到了一个问题,微信小程序中的button组件有特定的css,背景可以用"background:none"去掉,但是边框再用"border ...
- 微信小程序顶部去除默认样式后依旧显示返回按钮和顶部页面名称
微信小程序顶部白边变透明后依旧显示返回按钮和顶部标题名称 ⭕️ 实现效果: 正文 1⃣️ 官方并没有提供相关的api 2⃣️ 本文实现的效果能响应式的适配任何机型(安卓苹果通用) 3⃣️ 先得去ico ...
- 云开发超多功能工具箱组合微信小程序源码/附带流量主功能介绍
简介: 这是一款云开发超多功能工具箱组合微信小程序源码附带流量主功能,小程序内包含了40余个功能,堪称全能工具箱了,大致功能如下: 证件照制作 | 垃圾分类查询 | 个性签名制作 二维码生成丨文字 ...
- 【小程序源码】实用多功能工具箱
这是一款由多功能组合的一款微信小程序源码 功能组成部分为: 车牌归属地查询 调色板 圆周率查询 温度转换 BML测试 时光流逝查询 心跳是否决定 节拍器 运动心率 等等就不多介绍了,具体大家自行研究! ...
- ⭐程序员必备软件图鉴⭐(建议收藏)
⭐程序员必备软件图鉴⭐(建议收藏) 文章目录 ⭐程序员必备软件图鉴⭐(建议收藏) 前言: 一.系统处理类 无声的安全管家:火绒安全软件 压缩/解压神器:Band Zip 远程控制软件:向日葵 文件解锁 ...
- java channel midi_为Java程序中添加播放MIDI音乐功能
下载本文示例代码 Java在多媒体处理方面的确优势不大,但是我们在程序中有些时候又需要一些音乐做为点缀,如果播放的音乐是wav等波形音频文件,又挺大,所以背景音乐最好就是MIDI了,可是网上很多播放M ...
最新文章
- 菜鸟学SSH(十二)——Hibernate与Spring配合生成表结构
- 【C 语言】结构体 ( 结构体浅拷贝 )
- WPF实战案例-打印
- PHP调用数据库数据乱码问题
- git branch commands
- LINUX下使用scp命令与其他机器远程交换文件
- github注册以及安装教程
- 中国智能燃气表行业发展态势分析及投资风险评估报告2022-2028年版
- opensource项目_2020 Opensource.com夏季阅读列表
- 场景二:刮刮卡,大转盘等抽奖算法
- MIT6.824 2022 Fault-tolerant Key/Value Service
- rollup又一打包利器,不需要的代码统统走开
- 前端识别验证码思路分析
- 心跳包(HeartBeat)
- Windows Mobil中解决日期显示不正常的方法
- [nlp] sentiment analysis(情感分析)
- APP启动时白屏/黑屏 或者 Activity打开时白屏/黑屏
- SQL server服务显示远程过程调用失败的解决方法
- 全国互联电网调度管理规程(第一章__第九章)
- 软考 - 软件设计师 - 下午-案例分析 做题技巧与考点整理
热门文章
- 小插曲:我和Nios II的故事
- matlab获取手机传感器,分享采集Android内置传感器数据到MATLAB的方法
- python编程火柴人格斗_格斗火柴人_JAVA游戏免费版下载_7723手机游戏[www.7723.cn]
- BZOJ4861 魔法咒语 【AC自动机】【DP】【矩阵快速幂】
- 电脑备忘录设置密码锁的教程是什么?
- 无刷直流电机常用控制方式比较
- iphone 3gs 美版,6.1.3+降基带+越狱+解锁。成功分享(转)
- 20年后的计算机450作文,20年后的高科技作文450字
- C# 连接ACCESS数据库 - 增删改查(详细步骤)
- 《MySQL技术内幕:InnoDB存储引擎》第2版笔记