微信小程序开发日记

https://zhuanlan.zhihu.com/p/183551698

WeUI

index.wxml

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
<page-meta root-font-size="system"></page-meta> 
<!-- 设置页面根字体大小为系统默认值 -->
<view class="page" data-weui-theme="{{theme}}" data-weui-mode="{{mode}}"> 
<!-- 设置页面的类名为page，并绑定主题和模式数据 -->
    <view class="page__hd"> 
		<!-- 设置页面头部的类名为page__hd -->
        <view aria-role="heading" aria-level="1" class="page__title">WeUI</view> 
		<!-- 设置页面标题为WeUI，并设置其语义角色为heading -->
        <view class="page__desc">WeUI 是一套同微信原生视觉体验一致的基础样式库。</view> 
		<!-- 设置页面描述为WeUI是一套同微信原生视觉体验一致的基础样式库，并设置其类名为page__desc -->
    </view>
    <view class="page__bd page__bd_spacing"> 
	<!-- 设置页面主体的类名为page__bd，并添加间距样式 -->
        <view class="kind-list"> 
        <!-- 设置列表的类名为kind-list -->
            <block wx:for="{{list}}" wx:key="id"> 
            <!-- 使用block标签进行列表渲染，遍历list数组，并使用id作为唯一标识符 -->
                <view class="kind-list__item"> 
                <!-- 设置列表项的类名为kind-list__item -->
                    <view id="{{item.id}}" class="weui-flex kind-list__item-hd {{item.open ? 'kind-list__item-hd_show' : ''}}" bindtap="kindToggle"> 
                    <!-- 设置列表项头部的类名为weui-flex kind-list__item-hd，并根据item.open的值动态添加或移除kind-list__item-hd_show类名，绑定点击事件为kindToggle函数，并设置id属性为item.id -->
                        <view class="weui-flex__item">{{item.name}}</view> 
                        <!-- 设置列表项名称为item.name，并设置其类名为weui-flex__item -->
                        <image aria-role="button" aria-label="{{item.open ? ' 收起' : ' 展开'}}" class="kind-list__img" src="images/icon_nav_{{item.id}}.png"></image> 
                        <!-- 设置列表项图标为images/icon_nav_{{item.id}}.png，并设置其类名为kind-list__img，设置其语义角色为button，并根据item.open的值动态设置其aria-label属性 -->
                    </view>
                    <view aria-hidden="{{item.open ? 'false' : 'true'}}" class="kind-list__item-bd {{item.open ? 'kind-list__item-bd_show' : ''}}"> 
                    <!-- 设置列表项主体的类名为kind-list__item-bd，并根据item.open的值动态添加或移除kind-list__item-bd_show类名，同时设置其aria-hidden属性 -->
                        <view class="weui-cells {{item.open ? 'weui-cells_show' : ''}}"> 
                        <!-- 设置列表项内容的类名为weui-cells，并根据item.open的值动态添加或移除weui-cells_show类名 -->
                            <block wx:for="{{item.pages}}" wx:for-item="page" wx:key="*this"> 
                            <!-- 使用block标签进行列表渲染，遍历item.pages数组，并使用当前项作为唯一标识符 -->
                                <navigator aria-role="menuitem" url="{{page}}/{{page}}" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
                                <!-- 使用navigator标签进行页面跳转，设置跳转地址为{{page}}/{{page}}，并设置其类名为weui-cell weui-cell_access，设置其悬停样式为weui-cell_active，设置其语义角色为menuitem -->
                                    <view class="weui-cell__bd">{{page}}</view> 
                                    <!-- 设置导航项名称为{{page}}，并设置其类名为weui-cell__bd -->
                                    <view class="weui-cell__ft weui-cell__ft_in-access"></view> 
                                    <!-- 设置导航项右侧箭头图标，并设置其类名为weui-cell__ft weui-cell__ft_in-access -->
                                </navigator>
                            </block>
                        </view>
                    </view>
                </view>
            </block>
        </view>
    </view>
    <view class="page__ft" bindtap="changeTheme"> <!-- 设置页面底部的类名为page__ft，并绑定点击事件为changeTheme函数 -->
        <image aria-label="weui logo" src="images/icon_footer.png" style="width: 84px; height: 19px;"></image> <!-- 设置页面底部logo图片，并设置其aria-label属性和样式 -->
    </view>
</view>

遍历list

在这个代码中，用到了在index.js中定义的一些数据，比如双括号{{list}}就是调用data中的list

在绘制5个可以点击的列表的时候，用了类似于for循环？<block wx:for="{{list}}" wx:key="id">

这个就是遍历list 中的5个元素。在循环体内部有多次用到**ietem**这个变量，这是默认的变量名，表示在list中遍历到的当前元素，并不需要声明。同样的还有**index 表示元素下标。**当然也可以自己用别的名字来命名

1
2
3
<block wx:for="{{list}}" wx:for-item="obj" wx:for-index="idx">
<view>{{idx}}: {{[obj.name](http://obj.name/)}}</view>
</block>

展示列表组件

1
<view aria-hidden="{{item.open ? 'false' : 'true'}}" class="kind-list__item-bd {{item.open ? 'kind-list__item-bd_show' : ''}}">

aria-hidden是一个用来提高无障碍访问性的属性，表示当前组件是否可见。在open等于0或1的时候，aria-hidden分别等于true和false，表示组件是否隐藏。class分别等于kind-list__item-bd和kind-listitem-bd kind-listitem-bd_show，表示组件是否有显示的样式。

1
2
<view aria-hidden="true" class="kind-list__item-bd">Hidden</view>
<view aria-hidden="false" class="kind-list__item-bd kind-list__item-bd_show">Shown</view>

链接转跳

aria-role表示组件的角色，比如button, img等等，当读屏模式下聚焦到该组件时，系统会朗读出相应的角色。（我不是根理解这句话）

url="{{page}}/{{page}}" 这里就是转跳到同级目录下page文件夹下的page.wxml对应界面

hover-class属性表示按下去的样式类，可以用来实现点击态效果

index.js

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
Page({
mixins: [require('../mixin/common')], // 引入common.js文件作为页面的混入，可以复用common.js文件中定义的数据、方法等
  data: {
    list: [
      {
        id: 'form',
        name: '表单',
        open: false,
        pages: ['button', 'input', 'form', 'list', 'slideview', 'slider', 'uploader'],
      },
      {
        id: 'layout',
        name: '基础组件',
        open: false,
        pages: ['article', 'badge', 'flex', 'footer', 'gallery', 'grid', 'icons', 'loading', 'loadmore', 'panel', 'preview', 'progress', 'steps'],
      },
      {
        id: 'feedback',
        name: '操作反馈',
        open: false,
        pages: ['actionsheet', 'dialog', 'half-screen-dialog', 'msg', 'picker', 'toast', 'top-tips'],
      },
      {
        id: 'nav',
        name: '导航相关',
        open: false,
        pages: ['navigation-bar', 'tabbar'],
      },
      {
        id: 'search',
        name: '搜索相关',
        open: false,
        pages: ['searchbar'],
      },
    ],
  },

  changeTheme() { // 定义一个事件处理函数，用于点击页面底部时切换主题
    console.log(this.data); // 打印当前页面数据到控制台，方便调试
    getApp().themeChanged(this.data.theme === 'light' ? 'dark' : 'light'); // 调用全局函数themeChanged，传入一个参数，根据当前页面数据中的theme属性的值判断是切换为dark还是light主题
  },
});

事件回调函数（我这样称呼它）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
kindToggle(e) { // 定义一个事件处理函数，用于点击列表项时切换其展开或收起状态
    const { id } = e.currentTarget; // 获取当前点击的列表项的id
    const { list } = this.data; // 获取页面数据中的list数组
    for (let i = 0, len = list.length; i < len; ++i) { // 遍历list数组
      if (list[i].id == id) { // 如果当前元素的id和点击的id相同
        list[i].open = !list[i].open; // 则切换其open属性的值，实现展开或收起效果
      } else { // 否则
        list[i].open = false; // 将其open属性设为false，实现收起效果
      }
    }
    this.setData({ // 调用setData方法更新页面数据
      list, // 将修改后的list数组传入
    });
  },

在之前的代码中可以得知这个是在点击之后触发的事件。

1
<view class="item" bindtap="kindToggle" data-id="{{[item.id](http://item.id/)}}">{{[item.name](http://item.name/)}}</view>

函数形参e是一个事件对象，它包含了事件的相关信息，比如触发事件的源组件、事件类型、时间戳等。e是一个形参，可以用任何合法的变量名来代替它，只要在函数体内保持一致即可。e是由wxml文件中的bindtap属性传递给kindToggle函数的，当点击某个组件时，就会触发bindtap绑定的函数，并将事件对象作为参数传入。

这里面的this 指向包含该函数的Page对象，它可以访问Page对象中定义的数据和方法。例如：

1
2
3
4
5
6
7
8
Page({
  data: {
    content: 'Hello World',
  },
  test: function () {
    console.log(this.data.content); // Hello World
  },
});