微信小程序笔记_小程序里面给通配符设置box-sizing:border-box不生效

微信小程序笔记

一.⼩程序配置⽂件

1.1全局配置app.json

app.json 是当前⼩程序的全局配置，包括了⼩程序的所有⻚⾯路径、界⾯表现、⽹络超时时间、底 部 tab 等。普通快速启动项⽬⾥边的 app.json 配置

{
  "pages":[
    "pages/index/index",//微信小程序显示的首页，谁在第一位显示谁
    "pages/logs/logs",
    "pages/demo01/demo01"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

字段的含义 ：

1. pages 字段⸺⽤于描述当前⼩程序所有⻚⾯路径，这是为了让微信客⼾端知道当前你的⼩程序 ⻚⾯定义在哪个⽬录。

2. window 字段⸺定义⼩程序所有⻚⾯的顶部背景颜⾊，⽂字颜⾊定义等。

3. 完整的配置信息请参考 app.json配置

1.2全局window配置

{
  "pages":[
    "pages/index/index",//微信小程序显示的首页，谁在第一位显示谁
    "pages/logs/logs",
    "pages/demo01/demo01"
  ],
  "window":{
    "backgroundTextStyle":"dark",//两个值dark/light 默认是light
    "navigationBarBackgroundColor": "#0094ff",//头部导航栏颜色
    "navigationBarTitleText": "我的应用",//标题
    "navigationBarTextStyle":"white",//标题颜色，两个值black/white 默认是white
    "enablePullDownRefresh": true,//是否开启下拉刷新，默认是false
    "backgroundColor": "#ccc"//下拉刷新时的背景颜色
  },
    "tabBar": {//tabbar
    "color": "#999",//未选中的字体颜色
    "selectedColor": "#ff2d4a",//选中时字体颜色
    "backgroundColor": "#fafafa",//tabbar的背景颜色
    "position": "bottom",//tabbar的位置
    "borderStyle": "black",//tabbar边框
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "icons/home.png",
        "selectedIconPath": "icons/home-o.png"
      },
      {
        "pagePath": "pages/category/index",
        "text": "分类",
        "iconPath": "icons/category.png",
        "selectedIconPath": "icons/category-o.png"
      }
      ,
      {
        "pagePath": "pages/cart/index",
        "text": "购物车",
        "iconPath": "icons/cart.png",
        "selectedIconPath": "icons/cart-o.png"
      }
      ,
      {
        "pagePath": "pages/user/index",
        "text": "我的",
        "iconPath": "icons/my.png",
        "selectedIconPath": "icons/my-o.png"
      }
    ]
  }
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

二.数据绑定

<!--pages/demo02/demo02.wxml-->
<!-- <text></text>  相当于html中的span 是一个行内块元素，不换行 -->
<!-- <view></view> 相当于html中的div 是一个块级元素 换行 -->
<!-- <checkbox></checkbox> 相当于html中的复选框 -->
<text>1</text>
<text>2</text>
<view>1</view>
<view>2</view>
<!-- 1.字符串类型 -->
<view>
    {{msg}}
</view>
<!-- 2.数字类型 -->
<view>{{num}}</view>
<!-- 3.bool类型 -->
<view>是否是伪娘:{{isGril}}</view>
<!-- 4.object类型 -->
<view>{{person.name}}</view>
<view>{{person.age}}</view>
<view>{{person.height}}</view>
<view>{{person.weight}}</view>

<!-- 5.自定义属性   -->
<view data-num="{{num}}">自定义数据</view>

<!-- 6.使用bool充当checked属性是要注意 -->
<!-- checked="{{isChecked}}" 前一个双引号和花括号直接不能有空格否则机会编译错误 
    以下写法就是错误的示范
    <checkbox checked="        {{isChecked}}"></checkbox>
-->
<checkbox checked="{{isChecked}}"></checkbox>

<!-- 7.运算=>表达式
    可以在花括号中放一些运算表达式，但是不能放语句
    例：<view>{{1+1}}</view>成立
    <view>{{if()}}</view> 这样不允许
 -->
 <!-- 数字加减 -->
<view>{{1+1 - 3  * 2 / 3}}</view>
  
<!-- 字符串拼接 -->
<view>{{'hello' + 'wx'}}</view>

<!-- 三元表达式 -->
<view>{{17+1 == 18 ? '欢迎' : '您未满18岁'}}</view>

<!-- 这样是不允许的 <view>{{if(age>18){666}}}</view> -->

 //注意: 花括号和引号之间如果有空格，将最终被解析成为字符串
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

2.1循环

wx:for

项的变量名默认为 item wx:for–item 可以指定数组当前元素的变量名

下标变量名默认为 index wx:for–index 可以指定数组当前下标的变量名

wx:key ⽤来提⾼数组渲染的性能

wx:key 绑定的值 有如下选择

1. string 类型，表⽰ 循环项中的唯⼀属性 如

list:[{id:0,name:"炒饭"},{id:1,name:"炒面"}]

wx:key="id"
1
2
3

2.保留字 *this ，它的意思是 item 本⾝ ，*this 代表的必须是 唯⼀的字符串和数组。

list:[1,2,3,4,5]
wx:key="*this"
1
2

<!-- 循环
    1 wx:for="{{数组或者对象}}"  wx:for-item="循环项的名称"  wx:for-index="循环项的索引"
    2 wx:key="唯一的值" 用来提高列表渲染的性能
      1 wx:key 绑定一个普通的字符串的时候 那么这个字符串名称 肯定是 循环数组 中的 对象的 唯一属性
      2 wx:key ="*this"  就表示 你的数组 是一个普通的数组  *this 表示是 循环项 
        [1,2,3,44,5]
        ["1","222","adfdf"]
    3 当出现 数组的嵌套循环的时候 尤其要注意  以下绑定的名称 不要重名
        wx:for-item="item" wx:for-index="index"
    4 默认情况下 我们 不写
       wx:for-item="item" wx:for-index="index"
       小程序也会把 循环项的名称 和 索引的名称 item 和 index 
       只有一层循环的话 （wx:for-item="item" wx:for-index="index"） 可以省略
 -->
 <view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="id">
    索引:{{index}}---值：{{item.name}}
 </view>

 <view>遍历对象</view>
 <view wx:for="{{person}}" wx:for-item = "value" wx:for-index = "key" wx:key="age">
    属性：{{key}}---值:{{value}}
 </view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

2.2 block

渲染⼀个包含多节点的结构块 block最终不会变成真正的dom元素

<block wx:for="{{[1, 2, 3]}}" wx:key="*this" >
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>
1
2
3
4

2.3 if 条件渲染

在框架中，使⽤ wx:if="{{condition}}" 来判断是否需要渲染该代码块：

<!-- 10条件渲染
   1.wx:if="{{true/false}}"

   2.多分支
   wx:if="{{true/false}}"
   wx:elif="{{true/false}}"
   wx:else

   3.hidden
      1 在标签上直接加入属性 hidden 
      2 hidden="{{true/false}}"

   4. 什么场景下用哪个
      1 当标签不是频繁的切换显示 优先使用 wx:if
         直接把标签从 页面结构给移除掉 
      2 当标签频繁的切换显示的时候 优先使用 hidden
         通过添加样式的方式来切换显示 
         hidden 属性 不要和 样式 display一起使用
   
 -->

 <view>条件渲染</view>
 <view wx:if="{{true}}">显示</view>
 <view wx:if="{{false}}">隐藏</view>

 <view wx:if="{{false}}">不显示</view>
 <view wx:elif="{{false}}">不显示</view>
 <view wx:else>他们都不要，我接盘</view>

 <view>----------</view>
 <view hidden> 我被hidden我不会显示</view>
 <view hidden="{{false}}">我可以被看到</view>
 <view hidden="{{true}}">你看不到我</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

2.4 小程序事件的绑定

小程序绑定事件，通过bind关键字来实现，如 bindtap bindinput bindchange等不同组件支持不同的事件，具体看组件的说明即可

<!-- 
  1.需要input标签绑定input事件
  绑定关键字 bindinput

  2.获取输入的值
  要通过事件源对象来获取
  e.detail.value

  3.把输入框的值 赋给data中的num
  注意：
  不能直接赋值
  this.num = e.detail.value
  this.data.num = e.detail.value
  真确的写法
  this.setData({
    num:e.detail.value
  })

  4.加入一个点击事件
    1.bindtap
    2.无法在小程序当中的事件中直接传参
    3.通过自定义属性的方式来传递参数
    4.事件源中获取自定义属性
    e.target.dataset.operation
注意：事件传参要通过自定义参数
   -->
<input type="text" bindinput="handleInput"></input>
<view>{{num}}</view>

<button bindtap="changeNum" data-operation="{{1}}">+</button>
<button bindtap="changeNum" data-operation="{{-1}}">-</button>

// pages/demo03/demo03.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    num: 0
  },
  handleInput(e) {
    console.log(e.detail.value)
    this.setData({
      num: e.detail.value
    })
  },
  changeNum(e){
    console.log(e)
    const {operation} = e.target.dataset
    this.setData({
      num:this.data.num + operation
    })
  }
})


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

2.5wxss宽度自适应配置

/* pages/demo04/demo04.wxss */
/*
1.小程序中 不需要主动引入样式文件
2.需要把页面中某些元素的单位 由px改换成rpx
    1.设计稿 750px
    750 px = 750rpx
      1 px = 1 rpx
    2.把屏幕宽度改成375px
    375px = 750 rpx
    1 px = 1 rpx 
    1rpx = 0.5px
    3.存在一个设计稿 款多 414 或者未知page
    1.设计稿 page 存在一个元素宽度 100px
    2.拿以上的需求 趋势线 不同宽度的页面适配

    page px = 750px
    1px = 750 rpx * 100 / page
    100px = 750 rpx * 100  / page
    假设设计稿的宽度page等于375px
    4. 利用 一个calc属性 
    注意：1.750和rpx中间不要留空格
    2.运算符的两边也不要留空格
*/
view{
  /* width: 200rpx; */
  height: 200rpx;
  background-color: aqua;
  font-size: 40rpx;
  width: calc(750rpx * 100 / 375);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

2.6引入外部样式

通过@import “路径位置”

注意只支持相对路径

代码演示：

/*style文件夹下的common样式*/
view{
  color: aqua;
  font-size: 16px;
}

/*导入到demo05中的样式中*/

@import "../../style/common.wxss"
1
2
3
4
5
6
7
8
9

2.7选择器

特别需要注意的是小程序不支持通配符*因此以下代码无效

*{
    margin:0;
    padding:0;
    box-sizing:border-box; 
 }
1
2
3
4
5

目前的选择器有：

2.8小程序中使用less

1.原生小程序不支持less,其他基于小程序的框架大体都支持，如wepy mpvue, taro

2.用vscode中的插件easy less

3.在vscode中设置加入以下配置

less.compile": {
        "outExt":       ".wxss"
   }
1
2
3

4.在要编写样式的地⽅，新建 less ⽂件，如 index.less ,然后正常编辑即可。

//嵌套写法
view{
    text{
        width: 20px;
    }
}
//定义变量
@color:yellow;
text{
    color: @color;
}
//导入外部less文件
@import '../../style/index.less';
view{
    color: @themeColor;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

三.小程序常见的组件

重点讲解⼩程序中常⽤的布局组件

view, text, rich-text, button, image, navigator, icon, swiper, radio, checkbox 等

3.1 view

代替原来的div标签

 <view hover-class="h-class">
 点击我试试
 </view>
1
2
3

3.2 text

1.文本标签

2.只能嵌套text

3.长安文字可以复制（只有该标签有这个功能）

4.可以对空格回车进行编辑

<!--pages/demo07/demo07.wxml-->
<!-- selectable 是否可复制 decode是否解码 -->
<text selectable="{{true}}" decode="{{true}}">
我是一个text，我可以被复制 &nbsp; 123&lt;
</text>

1
2
3
4
5
6

3.3 image

<!--pages/demo08/demo08.wxml-->


<!-- 
image 图片标签
  1 src 指定要加载的图片的路径
    图片存在默认的宽度和高度 320 * 240      原图大小是 200 * 100
  2 mode 决定 图片内容 如何 和 图片标签 宽高 做适配
    1 scaleToFill 默认值 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 
    2 aspectFit 保持宽高比 确保图片的长边 显示出来   页面轮播图 常用
    3 aspectFill 保持纵横比缩放图片，只保证图片的 短 边能完全显示出来。  少用
    4 widthFix 以前web的图片的 宽度指定了之后 高度 会自己按比例来调整   常用  
    5 bottom。。 类似以前的backgroud-position 
  3 小程序当中的图片 直接就支持 懒加载  lazy-load
    1 lazy-load 会自己判断 当 图片 出现在 视口  上下 三屏的高度 之内的时候  自己开始加载图片 

 -->


<image mode="top" lazy-load  src="https://pic.images.ac.cn/image/5ea0fe288244e.html" >
    
</image>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

1.image图片标签默认高度320px,240px

2.支持懒加载

mode有效值：

mode有13种模式，其中4种是缩放模式，9中是裁剪模式

3.4 swiper 微信内置轮播图组件

swiper组件默认的宽是100%,高度是150px

3.4.1swiper 滑块视图容器

3.4.2swiper-item每个滑块

默认宽度和高度都是100%

<!-- pages/demo09/demo09.wxml -->

<!-- 
  1 轮播图外层容器 swiper
  2 每一个轮播项 swiper-item
  3 swiper标签 存在默认样式
    1 width 100%
    2 height 150px    image 存在默认宽度和高度 320 * 240 
    3 swiper 高度 无法实现由内容撑开 
  4 先找出来 原图的宽度和高度 等比例 给swiper 定 宽度和高度
    原图的宽度和高度  1125 * 352 px
    swiper  高度 / swiper 宽度 =  原图的高度  /  原图的宽度
    swiper  高度  =  swiper 宽度 *  原图的高度 / 原图的宽度
    height: 100vw * 352 /  1125
  5 autoplay 自动轮播
  6 interval 修改轮播时间
  7 circular 衔接轮播
  8 indicator-dots 显示 指示器 分页器 索引器 
  9 indicator-color 指示器的未选择的颜色 
  10 indicator-active-color 选中的时候的指示器的颜色 
 -->
<swiper autoplay="{{true}}" interval="2000" circular indicator-dots="{{true}}" indicator-color="skyblue" indicator-active-color="orange">
    <swiper-item>
        <image mode="widthFix" src="//gw.alicdn.com/imgextra/i1/44/O1CN013zKZP11CCByG5bAeF_!!44-0-lubanu.jpg"></image>
    </swiper-item>
    <swiper-item>
        <image mode="widthFix" src="//gw.alicdn.com/imgextra/i2/142/O1CN012xkybe1Cv4pztdLZm_!!142-0-lubanu.jpg"></image>
    </swiper-item>
    <swiper-item>
        <image mode="widthFix" src="//gw.alicdn.com/imgextra/i4/190/O1CN01fmyLv41DH3qg3rPgY_!!190-0-lubanu.jpg"></image>
    </swiper-item>
</swiper>

wxss文件
/* pages/demo09/demo09.wxss */
image{
    width: 100%;
}
swiper{
    width: 100%;
    height: calc(100vw * 352 / 1125);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

3.5 navigator导航标签

<!--pages/demo11/demo11.wxml-->

<!--
    导航组件navigator 类似于html中的a标签
    注意：navigator是块级元素默认会换行 可以直接加宽度和高度
    参数
    1. url:要跳转的页面路径
    2. target 要跳转到当前的小程序 还是其他的小程序
        默认值是self 自己小程序的页面
        miniProgram 其他的小程序的页面
    3. open-type 跳转的方式
        1.navigate 默认值 保留当前页面，跳转到应用内的某个页面，但是不能跳转到tabbar页面
        2.redirect 关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到tabbar页面
        3.switchTab 跳转到tabbar页面，并关闭其他所有非tabbar页面
        4.reLaunch 关闭所有页面，打开到应用内的某个页面
 -->


<navigator url="/pages/demo09/demo09">
    跳转到轮播图页面
</navigator>
<!-- 因为open-type默认值是navigate 不能跳转到tabbar，所以不会有反应 -->
<navigator url="/pages/index/index">
    跳转到tabbar页面（我是默认值，跳不了哈哈哈）
</navigator>
<navigator open-type="redirect" url="/pages/demo09/demo09">
    我是redirect重定向到别的页面
</navigator>
<navigator open-type="switchTab" url="/pages/index/index">
    switchTab直接跳转到 tabbar页面
</navigator>
<navigator open-type="reLaunch" url="/pages/index/index">
    我是relaunch我可以随便跳转
</navigator>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

navigator 导航组件 类似于超链接组件

open-type有效值:

3.6 rich-text

富文本标签 类似于vue中的v-html

示例代码

<!--pages/demo12/demo12.wxml-->
<!-- <text>pages/demo12/demo12.wxml</text> -->


<!-- 
  rich-text 富文本标签
  1 nodes属性来实现
    1 接收标签字符串 
    2 接收对象数组 
 -->
<rich-text nodes="{{html}}">
    
</rich-text>

// pages/demo12/demo12.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 1. 标签字符串 最常用
    // html:'<div class="tpl-wrapper" data-tpl-id="m_h_v31icon_1" style="margin-top: -10px;"><div view-name="DFrameLayout" style="display: flex; overflow: hidden; height: 160px; width: 375px; place-self: flex-start; position: relative;"><div view-name="DView" style="display: flex; overflow: hidden; background-color: rgb(255, 255, 255); margin-top: 9px; height: 100%; width: 100%; top: 0px; left: 0px; position: absolute;"></div><div view-name="HImageView" style="display: flex; overflow: hidden; height: 100%; width: 100%; position: absolute;"><div style="width: 100%; height: 100%; background-image: url(&quot;https://gw.alicdn.com/tps/TB155AUPpXXXXajXVXXXXXXXXXX-1125-480.png_.webp&quot;); background-repeat: no-repeat; background-position: center center; background-size: contain;"></div></div><div view-name="DLinearLayout" aria-label="天猫" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 10px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB1Wxi2trsrBKNjSZFpXXcXhFXa-183-144.png_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">天猫</div></div><div view-name="DLinearLayout" aria-label="聚划算" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 83.5px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://img.alicdn.com/tfs/TB10UHQaNjaK1RjSZKzXXXVwXXa-183-144.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">聚划算</div></div><div view-name="DLinearLayout" aria-label="天猫国际" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 157px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB11rTqtj7nBKNjSZLeXXbxCFXa-183-144.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">天猫国际</div></div><div view-name="DLinearLayout" aria-label="外卖" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 230.5px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tps/TB1eXc7PFXXXXb4XpXXXXXXXXXX-183-144.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">外卖</div></div><div view-name="DLinearLayout" aria-label="天猫超市" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 304px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB1IKqDtpooBKNjSZFPXXXa2XXa-183-144.png_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">天猫超市</div></div><div view-name="DLinearLayout" aria-label="充值中心" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 10px; margin-top: 84px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB1o0FLtyMnBKNjSZFoXXbOSFXa-183-144.png_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">充值中心</div></div><div view-name="DLinearLayout" aria-label="飞猪旅行" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 83.5px; margin-top: 84px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB15nKhtpkoBKNjSZFEXXbrEVXa-183-144.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">飞猪旅行</div></div><div view-name="DLinearLayout" aria-label="领金币" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 157px; margin-top: 84px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB1BqystrZnBKNjSZFrXXaRLFXa-183-144.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">领金币</div></div><div view-name="DLinearLayout" aria-label="拍卖" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 230.5px; margin-top: 84px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB1CMf4tlnTBKNjSZPfXXbf1XXa-183-144.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">拍卖</div></div><div view-name="DLinearLayout" aria-label="分类" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 304px; margin-top: 84px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB18P98tyQnBKNjSZFmXXcApVXa-183-144.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">分类</div></div></div></div>'
    //2.对象数组的方式
    html:[
      {
        //1.放一个div标签用name属性来指定
        name:'div',
        //2.标签上有哪些属性，用attrs来指定
        attrs:{
          //标签上的属性有类名，和样式
          class:'my_div',
          style:'color:red;'
        },
        //子节点用 children来指定
        children:[
          {
            //div里面的子节点p标签
            name:"p",
            //p身上的属性
            attrs:{
              
            },
            children:[
              {
                type:'text',
                text:'hello'
              }
            ]
          }
        ]
      }
    ]
  },
  
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

3.6.1nodes属性

nodes属性支持字符串和标签节点数组

文本节点：type=text

html:[
      {
        //1.放一个div标签用name属性来指定
        name:'div',
        //2.标签上有哪些属性，用attrs来指定
        attrs:{
          //标签上的属性有类名，和样式
          class:'my_div',
          style:'color:red;'
        },
        //子节点用 children来指定
        children:[
          {
            //div里面的子节点p标签
            name:"p",
            //p身上的属性
            attrs:{
              
            },
            children:[
              {
                type:'text',
                text:'hello'
              }
            ]
          }
        ]
      }
    ]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

3.7 button 组件

<!-- pages/demo13/demo13.wxml -->
<!-- <text>pages/demo13/demo13.wxml</text> -->
<!-- button按钮标签
    1外观的属性
        1.1 size控制按钮的大小
            默认值是default 
            mini 小尺寸
    2.type用来控制按钮的颜色 有三种
        2.1default 默认颜色 灰色
        2.2 primary 绿色
        2.3 warn 红色
    3. plain 按钮是否镂空 背景色透明
    4. loading 文字前实现正在等待的图标 -->
<button>default按钮</button>
<button size="mini">mini按钮</button>
<button type="primary">primary按钮</button>
<button type="warn">warn按钮</button>
<button type="warn" plain>warn按钮 透明</button>
<button type="primary" loading>primary按钮</button>
<!-- button 开发能力
  open-type：
  1 contact 直接打开  客服对话功能  需要在微信小程序的后台配置   只能够通过真机调试来打开 
  2 share 转发当前的小程序 到微信朋友中   不能把小程序 分享到 朋友圈 
  3 getPhoneNumber 获取当前用户的手机号码信息 结合一个事件来使用  不是企业的小程序账号 没有权限来获取用户的手机号码 
    1 绑定一个事件 bindgetphonenumber 
    2 在事件的回调函数中  通过参数来获取信息 
    3 获取到的信息  已经加密过了 
      需要用户自己待见小程序的后台服务器，在后台服务器中进行解析 手机号码，返回到小程序中 就可以看到信息了
  4 getUserInfo 获取当前用户的个人信息
    1 使用方法 类似 获取用户的手机号码
    2 可以直接获取 不存在加密的字段 
  5 launchApp 在小程序当中 直接打开 app
    1 需要现在 app中 通过app的某个链接 打开 小程序
    2 在小程序 中 再通过 这个功能 重新打开 app
    3 找到 京东的app 和 京东的小程序  
  6 openSetting 打开小程序内置的 授权页面
    1 授权页面中 只会出现 用户曾经点击过的 权限 
  7 feedback 打开 小程序内置的 意见反馈页面 
    1 只能够通过真机调试来打开 -->
<button open-type="contact">contact</button>
<button open-type="share">share</button>
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber</button>
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>
<button open-type="launchApp">launchApp</button>
<button open-type="openSetting">openSetting</button>
<button open-type="feedback">feedback</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

size合法值

type的合法值

form-type的合法值

open-type的合法值

open-type 的 contact的实现流程

1. 将⼩程序 的 appid 由测试号改为 ⾃⼰的 appid

2. 登录微信⼩程序官⽹，添加 客服客服 – 微信微信

3. 为了⽅便演⽰，⽼师⾃⼰准备了两个账号

   1. 普通⽤⼾ A

   2. 客服-微信 B

4. 就是⼲

3.8 icon

<!--pages/demo14/demo14.wxml-->

<!-- 
    字体图标 icon
    1.type 类型：string icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search,clear
    2.size 类型：number/string 默认值：23 
    3.color 类型string icon的颜色，同css的color
-->

<icon  type="success" size="60" color="#0094ff">
    
</icon>

1
2
3
4
5
6
7
8
9
10
11
12
13

3.9 radio

可以通过 color属性来修改颜色

需要搭配 radio-group ⼀起使⽤

<!-- pages/demo15/demo15.wxml -->
<!-- <text>pages/demo15/demo15.wxml</text> -->
<radio-group bindchange="checked">
    <radio color="aqua" value="male">男</radio>
    <radio color="aqua" value="female">女</radio>
</radio-group>
<view>选中了：{{res}}</view>
1
2
3
4
5
6
7

3.10 checkbox

可以通过 color属性来修改颜色

需要搭配 checkbox-group ⼀起使⽤

<!--pages/demo16/demo16.wxml-->
<!-- <text>pages/demo16/demo16.wxml</text> -->

<checkbox-group bindchange="checked">
    <checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="{{item.id}}">
        {{item.name}}
    </checkbox>
</checkbox-group>
<view>
    勾选了：{{fruit}}
</view>
  

// pages/demo16/demo16.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list:[
      {
        id:0,
        name:'
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/274975?site