精华内容
下载资源
问答
  • 小程序样式修改默认没有对按钮设置任何样式时,按钮占用整个一行,而按钮可点区域居中,使用控制台中的选择工具,选择这个按钮,查看一下按钮的默认样式。可以看到默认样式下有主要有button:not、button、button:...

    在微信小程序中,当我们向页面中插入一个按扭button的时侯只需要简单的代码就可以了。

    插入button按钮并保存后,便可以以预览界面看到一个原始的按钮。

    a36e4d81d0fb6a61a6f6cc0b296594ea.png

    小程序样式修改

    默认没有对按钮设置任何样式时,按钮占用整个一行,而按钮可点区域居中,使用控制台中的选择工具

    6217b8a174b666f93759a3ec922f38c4.png,选择这个按钮,查看一下按钮的默认样式。

    c87aa97306f6945d56a3e60666db4175.png

    可以看到默认样式下有主要有button:not、button、button:after几个来控制按钮的样式。可以在控制台通过开关某个样式的复选框

    77d8716ab6df0455448d951c33d227b2.png来查看其控制效果。

    由于这些默认样式我们是不可更改的,所以就不去一个一个地研究,下面只把按钮控制的CSS介绍一下,只要 我们在页面wcss文件中设置我们需要的样式。

    如为button设置一个btn样式。再定义这个btn样式(只介绍需要说明的几个,没有特殊注意的不列举说明):.btn{/*btn样式设置*/

    display:inline-block;/*可以控制按钮独占一行还是行内元素建议用inline-block*/

    width:auto!important;/*控制按钮宽度important必备要不无法生效默认为184px*/

    margin-left:5px!important;/*按钮左外距离必须加important否则无效默认auto*/

    margin-right:5px!important;/*同上*/

    font-weight:normal;/*文字粗细默认为700*/

    }

    其它诸如文字颜色、文字大小、就和其它的样式一样了,此处不多做介绍。

    需要注意的时,默认样式有一个:after属性,一般如果我们不需要这个属性时,可以设置其为display:none,如真需要这个after属性时改为非none就是,只是小程序有默认的after样式(参看上面图片中的默认样式)。

    小程序按钮点击样式

    点击时的样式又是如何定义的呢?也以上面的btn为例,只需要再设置一个.btn.button-hover即可。.btn.button-hover{/*btn点击样式*/

    color:#c00;

    }

    至于里面的样式就随自己需要设置了。

    总结:可以看出,要自定义小程序的按钮,无非就是三个样式:按钮样式【.btn】、按钮点击样式【.btn.button-hover】、按钮after样式【.btn:after】。

    展开全文
  • ,因为是从Android 开发转小程序开发,在Android中给按钮添加背景图片是一件非常简单的事情:如下所示: <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:layout...

    心急的小伙伴可直接看最后的总结。


    这个功能真的是不吐不快!!!,因为是从Android 开发转小程序开发,在Android中给按钮添加背景图片是一件非常简单的事情:如下所示:

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:background="@mipmap/img_auto_btn"
            android:text="自动"
            android:textColor="#FFFFFF" />
    

    预览效果如下所示:(只需要在background中加入mipmap文件夹中的资源即可,真的是很方便!有没有!)
    Android按钮添加背景图
    现在切换回小程序中使用相同的方法我们试试看:(我知道这是两种编程方式,我也说了是试一试,万一成功了呢?)

    小程序中:
    test1:(然而并不可以)
    在这里插入图片描述
    test2:(并不死心)
    在这里插入图片描述
    然而这样的写法也是不正确的,具体的原因可以产看log。
    直接在按钮上图片背景图片这个方法被PASS了,然鹅。。这并不能阻止我们程序员的脚步。

    那我们就换一种方法来写:直接整个image 再添加bindtap不就可以了,我可真是个小机灵鬼呢!
    说干就干:
    wxml:

      <view class="v_btn flex_center flex_column">
        <image class="img_one" src="../img/img_auto_btn.png" bindtap="onClick" />
        <text class="tv_one">我是按钮</text>
      </view>
    

    wxss:

    .v_all {
      width: 100%;
      height: 100%;
      background: #323B4C;
      position: fixed;
    }
    
    .flex_column {
      display: flex;
      flex-direction: column;
    }
    
    .flex_center {
      justify-content: center;
      align-items: center
    }
    
    .v_btn {
      width: 100%;
      height: 100rpx;
    }
    
    .img_one {
      width: 100%;
      height: 100%;
    }
    
    .tv_one {
      color: #FFFFFF;
      position: absolute;
      font-size: 32rpx;
    }
    

    预览效果:(完美!但是有坑。。。)
    在这里插入图片描述
    当我点击图片按钮的时候发现bindtap中的onClick并没有执行,其实是点错的地方了,如图所示:
    在这里插入图片描述
    我点击的是红色区域,onClick方法没有执行是正确的,因为他是一个text标签,text并没有添加bindtap点击方法,就相当于在图片前面加了个挡板一样!解决方法有两种,一个是将图片 z-index 提高,如果你的图片是半透白或者就一个框那么你就可以使用这种方法,如果是纯色的那么你也得在text标签上添加相同的点击事件

    但是这么写总感觉怪怪的!

    我想完成个带图片的按钮,又得提高z-index,又得在image和text上添加两个点击事件,那我不成跪着要饭的了吗?(建议申遗)
    其实可以把这个点击事件放到最外层的view当中去处理:
    wxml:

      <view class="v_btn flex_center flex_column" bindtap="onClick" >
        <image class="img_one" src="../img/img_auto_btn.png" />
        <text class="tv_one">我是按钮</text>
      </view>
    

    再次点击方法就执行了。
    在这里插入图片描述
    至此代码完成,心细的同学可能会问了,没有设置左右的边距你的图片为什么边距,而且我就算点击图片外部左右两边也会触发方法。

    其实我这里偷懒了,我的图片是PNG格式的,图的两侧其实是透明区域,可以让UI的给你裁了,自己再设置边距属性。

    写到这里就已经能实现功能了。但是我还是想用button来嵌套image和text标签,这里我就又要吐槽了如下图所示。
    在这里插入图片描述
    在这里插入图片描述

    无论我怎么在wxss中设置属性仿佛都不好使用。我又不仅陷入了沉思emmmmmm,各种搜索之后终于无意间发现是这里出了问题
    在这里插入图片描述
    就是这个V2坑的我不轻啊!!!
    关于V2: 影响的只是 button icon radio checkbox switch slider 这些组件(如果有其他的欢迎补充)
    删除这段代码后再看看我的页面
    在这里插入图片描述
    嗯终于好了。


    总结:
    1.使用view 进行嵌套,bindtab方法加在view标签上 , 复制我上面的代码即可。
    2.使用button进行嵌套,那么一定要注意app.json中的 v2,不使用删除即可

    展开全文
  • 公众号跳到了小程序小程序webview嵌套的公众号页面里按钮展示不出来了,这是微信的问题,那个按钮是用的微信api写的,需要判断下当前H5页面是在什么环境中,小程序还是微信公众号里,然后ifelse一下按钮 ...

    公众号是认证好的,服务号。安全域名配置好了

    解决方案:

    公众号跳到了小程序,小程序webview嵌套的公众号页面里按钮展示不出来了,这是微信的问题,那个按钮是用的微信api写的,需要判断下当前H5页面是在什么环境中,小程序还是微信公众号里,然后if else一下按钮

    展开全文
  • 1、开发使用者必须是已认证的服-务-号(服务号可以置顶,订阅号不能),服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。 2、开发使用者必须是已认证的非个人主体的小程序,使用小程序...

    1、开发使用者必须是已认证的服-务-号(服务号可以置顶,订阅号不能),服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。
    2、开发使用者必须是已认证的非个人主体的小程序,使用小程序云开发的静态网站托管绑定的域名下的网页,可以使用此标签跳转任意合法合规的小程序。
    3、必须部署到正式服务器,测试公众号不显示图标。
    4、必须是在已认证的服务号中做JS接口安全域名验证,“JS接口安全域名”和“IP白名单”都要,IP是指获取微信签名的服务器的IP

    注意:1、2两个条件必须满足其中一个;3、4两个条件必须满足,否则标签中的按钮不会显示(微信文档不讲武德,写的不清楚,稍微不注意就会掉坑)。
    官方文档入口:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21
     

    还有几点:

    1、微信开发者工具,"verifyOpenTagList":[],是显示不了图标的。微信开发工具和真机测试结果可能不一样,一定要用真机测试。安卓和ios测试结果也可能不同,都要测试。

    2、小程序的web-view不支持wx-open-launch-weapp。

    3、jsApiList:['chooseImage', 'previewImage'](必须有,不然安卓不显示)

    4、微信版本要求为:7.0.12及以上。 系统版本要求为:iOS 10.3及以上、Android 5.0及以上

    展开全文
  • 被wx-open-launch-weapp折磨累了,也就不废话了,直接上关键点: ...设置:openTagList:['wx-open-launch-weapp'](必须有,跳转小程序) 设置:jsApiList:['chooseImage', 'previewImage'](必须有,不然安卓
  • 微信小程序按钮点击跳转页面详解

    千次阅读 2021-01-17 16:58:48
    微信小程序中,按钮也是标签,它通过bindtap属性绑定点击事件:然后在js里面注册这个回调函数:回调函数里面通过wx.navigateTo({url: '/pages/index/talkPage',})跳转到talkPage界面。注意,html界面要在app.json...
  • 小程序按钮控制视频播放暂停】

    千次阅读 2021-12-03 17:10:44
    小程序按钮控制视频播放暂停 wxml // 播放视频 <video id="myvideo" src='https://peacebird-img.oss-cn-shanghai.aliyuncs.com/wx/2019-12-11-bar-12.mp4' controls> </video> // 按钮控制播放 &...
  • 微信小程序 修改按钮中文字的颜色

    千次阅读 2021-05-22 13:37:20
    修改按钮中文字的颜色: <button style="color:#828282" size="default" bindtap="onDelete">删除</button> 生效: <button class="onDeleteButton" size="default" bindtap="onModify"&...
  • 微信小程序浮动按钮的实现

    千次阅读 2021-01-17 11:57:40
    初步构想记得以前看小程序组件文档时有一个movable-view,可以拿来用一下。结果真正使用时才发现,movable-view外面需要套一个movable-area才可以。没关系,套上好了。首先,建一个组件,叫phone好了,最外层是movab...
  • 1.微信小程序BUTTON常见属性: 2.BUTTON宽高等样式的有效调整方法: 微信小程序当中通过wxss来设置button的宽高值并不起效果,而size属性却只有两个合法值,当我们想要自定义大小时则: 在 标签中直接写 style...
  • 业务背景:小程序需要根据条件动态隐藏分享给好友、分享到朋友圈功能 话不多说,上码,粘过去直接用 满足条件隐藏分享给好友按钮 if (条件) { wx.hideShareMenu({ menus: ['shareAppMessage'], //menus: ['...
  • H5跳转微信小程序按钮不显示问题等解决笔记 最近收到一个需求: 用户可以通过指定链接或二维码进入微信小程序,指定链接进入的微信小程序与正常微信小程序进入的有一些区别。 实现需求的想法: 用h5页面跳转微信...
  • 通常来说,一段程序代码中所用到的名字不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。 JS作用域:就是代码名字(变量)作用的范围 作用域的目的:是为了提高程序的可靠性,更重要的...
  • .launch_btn_2 { z-index: 10; position: absolute;...而且这个按钮也只能在生产环境上验证,真的很吐血。 最后使用一个最原始的办法来实现.啊哈哈,看html 。在里面写多文字,通过文字来撑开按钮,实现覆盖。
  • 本章节主要介绍了如何将操作按钮悬浮固定在微信小程序底部?操作起来也比较简单,还不会的朋友一起跟着小编学习一下吧,希望对你们有所帮助。常见的有加入购物车按钮、结算按钮、收货列表添加地址按钮。以收货地址为...
  • 按钮组件。 button具有的属性 type 类型:String 默认值:default ...(2)mini:尺寸 plain 类型:boolean 默认值:false 按钮是否镂空,背景色透明 disabled 类型:boolean 默认值:false 按钮是否禁用 loa
  • 微信小程序实现浮动按钮

    千次阅读 2021-01-13 09:31:48
    _Gaara_ https://www.jianshu.com/p/8730f9fd1815 效果图 wxml <!--圆形点击框 --> <view class="round-click"> <navigator url='/pages/xxx/xxx' >点我添加<... heig...
  • <view class="s_view"> <button class="saveBtn" >保存草稿</button> <button class="submitBtn" type="primary">提交</button> </view> 样式: ... ...
  • 小程序底部弹出菜单操作.gifhtml//index.wxml弹出action sheet{{item.txt}}取消提示:您选择了菜单{{menu}}js//index.jsPage({data:{// text:"这是一个页面"actionSheetHidden:true,actionSheetItems:[{bindtap:'...
  • 今天根据网上的教程搭建了微信小程序的环境,然后看文档做了一个简单的小应用。项目的目录是这个样子的:app.js、app.json、app.wxss是全局文件,必不可少的文件。定义在app.wxss中的样式为全局样式,作用于每一个...
  • app.json中已经配置 { "pages":[ "pages/demo04/demo04" ] } demo04.js Page({ data: { num:0 }, hangleInput(e){ //console.log( e.detail.value);... //加 减 按钮的事件 handletap(e){ // c
  • ​比如页面有一个form表单,快速重复点击两次提交按钮,你会发现...方维网络参考微信小程序开发文档以及网络搜索找到了如下几个方法:方法一、解决问题主要思路是当按钮被第一次点击时,设置按钮disabled属性为true...
  • 本文实例讲述了微信小程序单选radio及多选checkbox按钮用法。分享给大家供大家参考,具体如下:1.单选:radio实例:js:Page({data : {radioId:"",loves:[{id:1, name:"跑步" ,checked : 'true'},{id:2, name:"篮球" ...
  • 微信小程序我是用的uniapp写的,所以部分API可能和微信小程序原本的不同 <text class="code-id"> <text>會員ID:</text> <text selectable="true">{{ details.id }}</text> <...
  • 微信小程序开发解决button按钮无法设置长度以及按钮框中的字无法上下居中 设置button按钮长度:在相应的wxml文件的button标签中设置属性type=“button” style=“width:××px;” 设置button按钮框中的字上下居中:...
  • 自定义轮播按钮 示例库 代码片段
  • app.json中已经配置 ...mini 尺寸 type 控制按钮的颜色 default 白色(灰色) primary 绿色 warn 红色 plain: 按钮是否镂空,背景色透明 <button> 默认按钮</button> <button size="mini">
  • (一)单选按钮组模型图如下:index.jsPage({data: {parameter: [{ id:1, name: '银色' }, { id: 2, name: '白色' },{ id: 3, name: '黑色' }],//模拟商品参数数据,如果是线上版本需要自行发起request请求},onLoad:...
  • 微信小程序不支持监听页面返回键监听,但可以用onUnload来监听是否有离开当前页面,有就返回上一个页面。注意不只是点击返回去上一个页面会触发onUnload,提交保存这类正常跳转下个页面也会触发,因此在data先定义个...
  • 微信小程序-----使用Button按钮点击授权登录 login.wxml界面内容 <button open-type="getUserInfo" bindgetuserinfo="getuserinfo" wx:if="{{showAuth}}">授权登录</button> getUserInfo获取用户信息,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 515,013
精华内容 206,005
关键字:

小程序按钮