Skip to content

Commit 65a1711

Browse files
coderwhycoderwhy
committed
常见的内置组件
1 parent 51f8b15 commit 65a1711

26 files changed

+431
-1
lines changed

‎app.json

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
{
22
"pages": [
3+
"pages/scroll/scroll",
4+
"pages/input/input",
5+
"pages/image/image",
6+
"pages/view/view",
7+
"pages/button/button",
8+
"pages/text/text",
39
"pages/home/home",
410
"pages/about/about"
5-
]
11+
],
12+
"sitemapLocation": "sitemap.json"
613
}

‎assets/test/coderwhy.jpeg

9.58 KB
Loading

‎pages/button/button.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// pages/button/button.js
2+
Page({
3+
4+
/**
5+
* 页面的初始数据
6+
*/
7+
data: {
8+
9+
},
10+
onBindContact() {
11+
console.log('打开了客服会话')
12+
},
13+
onGetUserInfo(e) {
14+
console.log('获取用户的信息', e)
15+
}
16+
})

‎pages/button/button.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"usingComponents": {}
3+
}

‎pages/button/button.wxml

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!--pages/button/button.wxml-->
2+
<text>pages/button/button.wxml</text>
3+
4+
<!-- 1.button基本使用: block -->
5+
<button>按钮</button>
6+
7+
<!-- 2.size: mini/default -->
8+
<button size='mini'>按钮</button>
9+
10+
<!-- 3.type: primary/default/warn -->
11+
<view>
12+
<button type='primary' size='mini'>主要</button>
13+
<button type='default' size='mini'>默认</button>
14+
<button type='warn' size='mini'>警告</button>
15+
</view>
16+
17+
<!-- 4.plain: true背景透明 -->
18+
<view>
19+
<button size='mini' plain="{{true}}">按钮</button>
20+
</view>
21+
22+
<!-- 5.disable: true不可以和用户交互 -->
23+
<view>
24+
<button size='mini' disabled='{{true}}'>按钮</button>
25+
</view>
26+
27+
<!-- 6.loading -->
28+
<view>
29+
<button size='mini' loading='{{true}}'>按钮</button>
30+
</view>
31+
32+
<!-- 7.hover-class: -->
33+
<view>
34+
<button size='mini' hover-class='hover'>按钮</button>
35+
</view>
36+
37+
<!-- 8.open-type属性 -->
38+
<view>
39+
<button size='mini' open-type='contact' bindcontact='onBindContact'>客服会话</button>
40+
<button size='mini' open-type='share'>小程序分享</button>
41+
<button size='mini' open-type='getUserInfo' bindgetuserinfo='onGetUserInfo'>用户信息</button>
42+
</view>

‎pages/button/button.wxss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/* pages/button/button.wxss */
2+
.hover {
3+
background: red;
4+
}

‎pages/image/image.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
// pages/image/image.js
2+
Page({
3+
data: {
4+
imagePath: ''
5+
},
6+
handleChooseAlbum() {
7+
// 系统API,让用户在相册中选择图片(或者拍照)
8+
wx.chooseImage({
9+
success: (res) => {
10+
// 1.取出路径
11+
const path = res.tempFilePaths[0]
12+
13+
// 2.设置imagePath
14+
// this: undefined
15+
this.setData({
16+
imagePath: path
17+
})
18+
},
19+
})
20+
},
21+
handleImageLoad() {
22+
console.log('图片加载完成')
23+
}
24+
})

‎pages/image/image.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"usingComponents": {}
3+
}

‎pages/image/image.wxml

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!-- 1.image的基本使用 -->
2+
<!--
3+
重点:
4+
1.image组件可以写成单标签,也可以修成双标签
5+
2.image组件默认有自己的大小: 320x240
6+
3.image组件时一个行内块级元素(inline-block)
7+
-->
8+
<!-- <image/> -->
9+
10+
<!-- 2.src: 本地路径(相对路径/绝对路径)/远程地址 -->
11+
<image src='../../assets/test/coderwhy.jpeg'/>
12+
<image src='/assets/test/coderwhy.jpeg'/>
13+
14+
<image src='https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg'/>
15+
16+
<!-- 补充: 相册中的图片 -->
17+
<button bindtap='handleChooseAlbum'>选中图片</button>
18+
<image src="{{imagePath}}"/>
19+
20+
21+
<!-- 3.bindload: 监听图片加载完成 -->
22+
<!-- lazy-load: 图片的懒加载 -->
23+
<view>------------------------------</view>
24+
<image wx:for="{{1}}"
25+
src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"
26+
bindload='handleImageLoad'
27+
lazy-load/>
28+
29+
<!-- 4.show-menu-by-longpress: 长按图片出现识别小程序码 -->
30+
<image show-menu-by-longpress
31+
src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"/>

‎pages/image/image.wxss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/* pages/image/image.wxss */

0 commit comments

Comments
 (0)