微信小程序学习小结_学习微信小程序的结论

最近在家学习了微信小程序的开发，写这篇博客对学习进行一个部分小结，以加深对微信小程序的理解。

WXML语法参考

1.数据绑定
WXML 中的动态数据均来自对应 Page 中的 data。

1.1 简单绑定（类似于vue中的Mustache 语法）
数据绑定使用 Mustache 语法（双大括号）将变量包起来，例如：

<view> {{ message }} </view>
1

Page({
  data: {
    message: 'Hello MINA!'
  }
})
1
2
3
4
5

1.2 组件属性(需要在双引号之内)

<view id="item-{{id}}"> </view>
1

Page({
  data: {
    id: 0
  }
})
1
2
3
4
5

1.3 控制属性(需要在双引号之内)

<view wx:if="{{flag}}"> 条件为真我就显示 </view>
1

Page({
  data: {
    flag: true
  }
})
1
2
3
4
5

1.4 boolean以及number数据类型
如果数据类型是booblean 或者number类型的数据，需要使用{{}}包裹

<checkbox checked="{{false}}"> </checkbox>
<view data-num = "{{100}}"></view>
1
2

1.5 表达式运算
可以在 {{}} 内进行简单的运算，支持三元运算、算数运算、逻辑判断、字符串运算等

<view test="{{flag ? true : false}}"> 属性 </view>
<view> {{a + b}} + {{c}} + d </view>
<view wx:if="{{len > 5}}"> </view>
<view>{{"hello" + name}}</view>
1
2
3
4

2.列表渲染
wx:for（vue中使用v-for）

1. 在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
2. 默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。
3. 列表渲染必须添加 wx:key指令，来指定列表中项目的唯一的标识符。
4. key值可以设置为索引值。

示例：

Page({
  data: {
    teachers: [
      {
        name: '张三',
        city: '北京'
      },
      {
        name: '李四',
        city: '上海'
      },
      {
        name: '王五',
        city: '深圳'
      },
    ]
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<view wx:for="{{teachers}}" wx:key="index">
  <text>{{index}}</text>
  -
  <text>{{item.city}}</text>
  -
  <text>{{item.name}}</text>
</view>
1
2
3
4
5
6
7

3.条件渲染
wx:if 在框架中，使用 wx:if="" 来判断是否需要渲染该代码块

<view wx:if="{{flag}}"> True </view>
1

也可以用 wx:elif 和 wx:else 来添加一个 else 块

<view wx:if="{{len > 5}}"> 1 </view>
<view wx:elif="{{len > 2}}"> 2 </view>
<view wx:else> 3 </view>
1
2
3

因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 标签将多个组件包装起来，并在上边使用 wx:if 控制属性

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>
1
2
3
4

注意： 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

wx:if vs hidden — (对比vue中的 v-if 与 v-show)

• 因为 wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。
• 同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。
• 相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。
• 一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好

自定义组件

创建自定义组件，接收一个 Object 类型的参数
小技巧：点击 “+”选择目录，输入components
右键点击components目录，选择目录， 输入prolist
右键点击prolist目录，选择 新建Component ，输入prolist 即可

在首页的pages/home/home.json文件中注册组件：
在首页的pages/home/home.wxml中使用该组件，就像正常的标签一样使用

自定义组件的布局

 <view class="prolist">
  <view class="proitem">
    <view class="itemimg">
      <image class="img" src=""></image>
    </view>
    <view class="iteminfo">
      <view class="title">
        产品名称
      </view>
      <view class="price">
        ￥199
      </view>
    </view>
  </view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

首页请求数据，并且传递给子组件
pages/home/home.js

import { request } from './../../utils/index.js'
Page({
  /**
   * 页面的初始数据
   */
  data: {
    prolist: []
  },
  /*
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    request('/api/pro').then(data => {
      console.log(data)
      // 微信小程序修改数据的方式
      this.setData({
        prolist: data.data
      })
    })
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

pages/home/home.wxml

<prolist prolist="{{prolist}}"></prolist>
1

子组件接收数据
components/prolist/prolist.js

Component({
  /*
   * 组件的属性列表
   */
  properties: {
    prolist: Array
  },
})
1
2
3
4
5
6
7
8

子组件渲染数据
components/prolist/prolist.wxml

<view class="prolist">
  <view class="proitem" wx:for="{{prolist}}" wx:key="item.proid">
    <view class="itemimg">
      <image class="img" src="{{item.proimg}}"></image>
    </view>
    <view class="iteminfo">
      <view class="title">
        {{item.proname}}
      </view>
      <view class="price">
        ￥{{item.price}}
      </view>
    </view>
  </view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

模块化

建议使用es6的模块化方法，api中提供的是基于commonjs规范的exports以及require语法
1. 定义工具模块

const baseUrl = 'http://daxun.kuboy.top'
/**
 * 数据请求模块
 * 先显示加载框，然后请求结束加载框消失
 */
export function request (url, data) {
  // 显示加载中
  // 参考https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showLoading.html
  wx.showLoading({
    title: '加载中',
  })
  // 使用promise 解决异步操作问题，此处还可以使用 async + await
  return new Promise((resolve, reject) => {
    // 微信小程序的数据请求方法
    // 必须配置小程序的安全域名，
    // 在开发阶段可以在“详情” - “本地设置” - 勾选中 不校验请求域名、web-view(业务域名)、TLS版本及HTTPS证书
    wx.request({
      url: baseUrl + url,
      data: data || {},
      success: (res) => {
        // 隐藏加载中
        wx.hideLoading();
        // 后续处理
        resolve(res.data)
      }
    })
  })
}

/**
 * 可消失的提示框 - 默认只显示文字
 * str 提示内容
 * icon 是否需要图标，none 、 success(默认值) 、 loading
 */
export function Toast (str, icon) {
  // 微信提供的API接口
  // 参照 https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html
  wx.showToast({
    title: str,
    icon: icon || 'none'
  })
}
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

2.测试
在首页 pages/home/home.js中测试，先引入模块

我们无法控制生命的长度，但我们可以掌握生命的宽度，睁开眼睛，拥抱这世间万物，温暖的阳光，凌烈的寒风，珍惜身边的人，滚烫的过好每一天。武汉加油！中国加油！