微信小程序使用图片作为Button

 时间:2026-02-16 01:20:53

1、打开开发者工具,在项目的pages文件夹下新建mypage文件夹,并在文件夹下新建mypage,在app.json中将mypage设为第一页面

微信小程序使用图片作为Button

2、在mypage.wxml中写代码如下:

<view>

 <button>gggg</button>

</view>

微信小程序使用图片作为Button

3、保存代码,左侧模拟器效果如下图,这是没有任何样式的button

微信小程序使用图片作为Button

4、修改mypage.wxml代码如下:

<view>

 <button plain="true" ><image src='a.png'></image></button>

</view>

这里的plain是设置透明效果

微信小程序使用图片作为Button

5、在mypage.wxss中写代码如下:

button[plain]

{ border:0;

 width: 80px;

}

image{

 margin: 0;

 width:50rpx;

 height: 50rpx;

 border: none;

}

微信小程序使用图片作为Button

6、下载一张图片,放在mypage文件夹下

微信小程序使用图片作为Button

7、保存代码,在模拟器查看效果如下图

微信小程序使用图片作为Button

  • C#中!IsPostBack具体是什么意思啊
  • 实现二叉树的基本操作及求二叉树深度和叶子数
  • crc生成多项式怎么算?
  • 如何设置Java窗体的图标
  • 如何利用Java图形图像编程按钮获取文本框内容
  • 热门搜索
    大别山旅游攻略 旅游团队 无锡 旅游 石家庄市旅游景点 台湾旅游地图 境内旅游 增城旅游 上海到海南旅游 11月份适合去哪里旅游 海南旅游岛