精华内容
下载资源
问答
  • 记录一下我做微信小程序以来button

    记录一下我做微信小程序以来,button组件无法自定义样式的问题和其解决方法。小程序的button组件有其默认的样式,它默认的样式有时候不适合我们项目开发,所以我们需要自定义其样式。(源代码在文章结尾)

    wxss-----button修改样式
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    wxss-----calss修改样式
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    用class修饰与button直接修饰的主要区别为button直接修饰修改不了button组件的宽,能修改高;用class修饰则可以修改其宽高。

    wxss代码
    testBt:not([size='mini']){ display: flex; align-items: center; justify-content: center; background-color: red; margin-top: 15rpx; padding: 0rpx; width:200rpx; height:70rpx; border-radius: 40rpx; color: white; }.

    本人自己做了一个完整的图文分享、点赞、收藏云开发小程序,可以用来做毕业设计、图文分享项目,操作简单,利用腾讯免费赠送的云开发空间就可以完成所有操作,节省成本、方便快捷,当天就可以上线!
    链接:https://download.csdn.net/download/weixin_52658156/20238876

    展开全文
  • 转自https://www.cnblogs.com/fightjianxian/p/13786328.html 方法1. 样式中加入!important,即:width: 100% !important; wxss代码示例 .login-btn { font-size: 16px; width: 100% !... border:1px soli

    转自https://www.cnblogs.com/fightjianxian/p/13786328.html

    方法1.

    样式中加入!important,即:width: 100% !important;

    wxss代码示例

    .login-btn {
        font-size: 16px;
        width: 100% !important;
        font-weight: 400;
        color: #fff;
        border-radius: 4px;
        border:1px solid rgba(254,50,50,1);
        background:linear-gradient(180deg,rgba(241,94,94,1) 0%,rgba(222,62,62,1) 100%);
    }
    

    wxml代码示例:

    <button class="login-btn" bindclick="login">登录</button>
    

    方法2.

    标签内,使用style

    wxml代码示例:

    <button class="login-btn" bindclick="login" style="width:100%">登录</button>
    

    方法3.

    删除app.json的配置"style": “v2”,不过这个不推荐

    展开全文
  • 如图所示,当我们手指触摸了button文字所在的cell区域时,对应的区域底色变成浅灰色,这样用户就可以知道小程序是有及时响应他的这次触摸操作,用户就不会很迷惑。 /*page.wxss */ .hover{ background-color: ...

    通常页面会摆放一些button按钮或者view区域,用户触摸按钮之后会触发下一步的操作。这种情况下,我们要对触摸这个行为给予用户一些响应。如图所示,当我们手指触摸了button文字所在的cell区域时,对应的区域底色变成浅灰色,这样用户就可以知道小程序是有及时响应他的这次触摸操作,用户就不会很迷惑。
    微信小程序 button hover-class 不显示 没效果

    /*page.wxss */
    
    .hover{
    
      background-color: gray;
    
    }
    
    <!--page.wxml -->
    
    <button type="default" hover-class="hover"> 点击button </button>
    
    <view hover-class="hover"> 点击view</view>
    

    也就是在wxml页面加组件以及设置hover-class,在wxss写触摸时的反馈效果。但是实际测试时候,只有view组件有效果,button组件是没有触摸反馈的。

    解决:

    在wxml中,将hover-class="hover"改为hover-class="button-hover"
    在wxss中,将.hover改为.button-hover


    微信开发指南,4.3交互反馈例子
    教程 | 《小程序开发指南》

    展开全文
  • 最近才开始上手学习微信小程序开发,跟着视频的步骤去做一些小Demo居然也会翻车!这就让人很纳闷了。视频里面明明就是用了很简单的一个方法就能获取到用户的登录信息了 <button open-type="getUserInfo">获取...

    问题描述

    最近才开始上手学习微信小程序开发,跟着视频的步骤去做一些小Demo居然也会翻车!这就让人很纳闷了。视频里面明明就是用了很简单的一个方法就能获取到用户的登录信息了
    <button open-type="getUserInfo">获取用户信息</button>
    我同样的操作能获取到用户的头像,其他的信息都没有,而且没有弹出

    解决过程

    确保我没有犯一些低级错误后,我查阅了官方文档
    原来是官方在2021.4月进行了一些更改操作导致的。
    相关文章:https://developers.weixin.qq.com/community/develop/doc/000cacfa20ce88df04cb468bc52801

    在里面有说到:
    4月28日24时后发布的新版本小程序,开发者调用wx.getUserInfo或将不再弹出弹窗,直接返回匿名的用户个人信息,获取加密后的openID、unionID数据的能力不做调整。
    即wx.getUserInfo接口的返回参数不变,但开发者获取的userInfo为匿名信息。
    在这里插入图片描述

    新增getUserProfile接口

    若开发者需要获取用户的个人信息(头像、昵称、性别与地区),可以通过wx.getUserProfile接口进行获取,该接口从基础库2.10.4版本开始支持,该接口只返回用户个人信息,不包含用户身份标识符。该接口中desc属性(声明获取用户个人信息后的用途)后续会展示在弹窗中,请开发者谨慎填写。开发者每次通过该接口获取用户个人信息均需用户确认,请开发者妥善保管用户快速填写的头像昵称,避免重复弹窗。

    所以,就是官方将getUserInfo的那个弹窗给搬到了getUserProfile里面去了,那我们直接用这个就可以了

    getUserProfile的API文档 :https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserProfile.html

    解决方案

    <button bindtap="getUserProfile">get user info</button>
    
    Page({
    data: {
      username: "初始化测试数据",
      userInfo: {},
      hasUserInfo: false
    },
    
    getUserProfile(e) {
      // 推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认
      // 开发者妥善保管用户快速填写的头像昵称,避免重复弹窗
      wx.getUserProfile({
        desc: '用于完善会员资料', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
        success: (res) => {
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
    })
    
    
    展开全文
  • button>的属性open-type触发该功能。 按钮内有图片和文字 去掉padding和margin <button style="padding: 0; margin: 0;"> <image /> <view>分享</view> </button> 去掉图片...
  • 方法一 直接在button按钮上写行内样式 (推荐使用) wxml代码示例 <button type="primary" style="width:100%"></button> 方法二 删除app.json的配置"style": "v2" 转载:...
  • 小程序实现多button单选/多选红色为选中状态单选多选①wxss/* pages/button-select/button-select.wxss */.button_container{display: flex;flex-direction: row;justify-content: space-around}/* 按钮未选中 */....
  • button绑定id data-id <button class="shanchu" bindtap="shanchu" data-id="{{item._id}}">删除</button> js里删除函数 //删除 shanchu(e) { //获得绑定的商品id id = e.currentTarget.dataset.id...
  • button边框去除相信大家开发微信小程序时使用button会遇到一些与预期效果不同的样式问题。例如button的边框无法去除,在为button设置圆角的时候周围会有一些"杂质",像这样:边框的存在,使得显示效果并不理想我们来...
  • button::after { border: none; // 设置为0 不可清除,为none }
  • 微信小程序中,当我们向页面中插入一个按扭button的时侯只需要简单的代码就可以了。插入button按钮并保存后,便可以以预览界面看到一个原始的按钮。小程序样式修改默认没有对按钮设置任何样式时,按钮占用整个一行...
  • 1.下面我们会说到button组件的一些信息,关于button组件的一般属性我在这里就不详细... 1.contact:直接打开客服对话功能,需要在微信公众平台里配置,添加自己小程序的客服。这个功能且需要真机调试才能使用。 2....
  • 1.微信小程序BUTTON常见属性: 2.BUTTON宽高等样式的有效调整方法: 微信小程序当中通过wxss来设置button的宽高值并不起效果,而size属性却只有两个合法值,当我们想要自定义大小时则: 在 标签中直接写 style...
  • https://www.jianshu.com/p/93d7104be420  .button-none { width: auto; margin: 0rpx; padding: 0rpx; line-height: auto; font-size: 16px; font-style: normal; border: none; border-radius: 0; ...
  • button添加icon <button class="wxBtn"> <image class="wxfxBtn_image" src="../../...微信小程序里面的button标签默认背景色为.button-hover样式渲染,可通过控制台查看,只需覆盖这个背景色即可。 /* 点
  • .button{ border: none; border-color: transparent; background: none!important; } .button::after{ border: none; background: none!important; }
  • button{ border-radius: 0rpx; padding:0rpx; margin:0rpx; display: inline-block; line-height: 1; } button::after{ border:none; } .button-hover{ color:#000; background-color: rgb(247, 247, 247...
  • 微信小程序button去除默认的边框的实现方法如下所示:button {position:relative;display:block;margin-left:auto;margin-right:auto;padding-left:14px;padding-right:14px;box-sizing:border-box;font-size:18px...
  • 本篇文章给大家带来的内容是关于微信小程序中如何改变button按钮的样式,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。Button按钮disabled='{{disabled}}' Button按钮样式.getCodeView {width: ...
  • 通常来说,一段程序代码中所用到的名字不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。 JS作用域:就是代码名字(变量)作用的范围 作用域的目的:是为了提高程序的可靠性,更重要的...
  • button::after { border-color: transparent; }
  • 微信小程序三个button居中

    千次阅读 2021-04-26 19:59:34
    button size="mini" class="zhuanfa1">转发评分</button> <button size="mini" class="jisuan">计算得分</button> <button size="mini" class="chakan">查看记录</button>
  • button按钮添加伪类::after .set-btn-chat::after{ border: none; }
  • 问题: 微信小程序button按钮在wxss中定义宽度占比后无效 图片:
  • 微信小程序清除 button按钮 的默认点击效果 在 button 中进行插入 hover-class=“none” 即可 在微信官方文档中有对于此项属性的详细解释
  • 通过给 button 组件设置属性open-type=“share...相关组件:button wxml: <view class="share" bindtap="share" > <image src="/static/img/icon_share02@2x.png"></image> <button open-typ
  • button{ background-color:rgb(247, 247, 247); //可根据自己的背景颜色自行设置 border-radius: 0rpx; padding:0rpx; margin:0rpx; display: inline-block; line-height: 1; } button::after{ /*button的边框样式...
  • 求一代码为100行左右汇编小程序,好带上说明,跪谢看看这个:.model small.stack 100h.datamsg1 db 'Input a number: $'msg2 db 0ah, 0dh, 'BAD INPUT', 0ah, 0dh, '$'msg3 db 0ah, 0dh, 'Binary is: $'.codestart:;...
  • 只需要再写一个类名(例如 btn),.btn:not([size='mini])样式来覆盖默认的button样式width即可 一般常用样式 .btn:not([size='mini']){ width: 572rpx; //自定义宽度 height: 84rpx; //自定义高度 border: 1px ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 33,169
精华内容 13,267
关键字:

微信小程序button

微信小程序 订阅