yiyun's Blog

The stupid one is me

0%

微信小程序 开发笔记

发表于 更新于
本文字数： 7.2k 阅读时长 ≈ 7 分钟
微信小程序开发笔记

目录、文件解析

概览

一个 index文件夹 一个页面

index.wxml 相当于 html 页面

index.wxss 相当于 css 文件

index.json 全局配置

app.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

pages 的第一项指向的页面为 首页

pages 中申明的页面 将被注册到 app中

window 整个小程序的窗口（全局应用）

tabBar

app.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
{
  "pages": [
    "pages/song/song",
    "pages/index/index",
    "pages/logs/logs",
    "pages/play/play"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#FFC1C1",
    "navigationBarTitleText": "网易云小程序",
    "navigationBarTextStyle": "white",
    "enablePullDownRefresh": true,
    "backgroundColor": "#FFC1C1"
  },
  "tabBar": {
    "list": [
      {
        "text": "发现音乐",
        "pagePath": "pages/song/song",
        "iconPath": "images/music.png",
        "selectedIconPath": "images/music-active.png"
      },
      {
        "text": "发现音乐",
        "pagePath": "pages/song/song",
        "iconPath": "images/my.png",
        "selectedIconPath": "images/my-active.png"
      }
    ],
    "selectedColor": "#FF6A6A"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

注意：

tabBar.list[0].pagePath 不应该以 '/' 开头

只有在 tabBar.list.pagePath 中出现的路径才会 显示 tabBar

组件

view 标签 等同 div 标签

小程序有自己的标签 - 组件

每一个组件都有属性值

1
<image src=""></image>
1
2
3
4
5
<!-- 滑块标签 -->
<!-- 可以应用于轮播图，或者页面切换 -->
<swiper>
    <swiper-item></swiper-item>
</swiper>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- 轮播图模块 -->
<view class="banner-container">
    <swiper class="banner-list"
            indicator-dots="true"
            indicator-color="red"
            autoplay="true"
            interval="2000"
            circular="true">
        <swiper-item><image src="/images/swiper-1.jpg"></image></swiper-item>
        <swiper-item><image src="/images/swiper-2.jpg"></image></swiper-item>
        <swiper-item><image src="/images/swiper-3.jpg"></image></swiper-item>
        <swiper-item><image src="/images/swiper-4.jpg"></image></swiper-item>
    </swiper>
</view>

页面生命周期

页面 Page 实例的生命周期

Page

参考：https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

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
//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // Do some initialize when page load.
  },
  onShow: function() {
    // Do something when page show.
  },
  onReady: function() {
    // Do something when page ready.
  },
  onHide: function() {
    // Do something when page hide.
  },
  onUnload: function() {
    // Do something when page close.
  },
  onPullDownRefresh: function() {
    // Do something when pull down.
  },
  onReachBottom: function() {
    // Do something when page reach bottom.
  },
  onShareAppMessage: function () {
    // return custom share data when user share.
  },
  onPageScroll: function() {
    // Do something when page scroll
  },
  onResize: function() {
    // Do something when page resize
  },
  onTabItemTap(item) {
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // Event handler.
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  customData: {
    hi: 'MINA'
  }
})

WXML 语法

参考：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/

数据绑定

1
2
<!--wxml-->
<view> {{message}} </view>
1
2
3
4
5
6
// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})
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
/**
* 页面的初始数据
* 小程序中没有 DOM 操作
*/
data: {
    // 轮播图图片地址
    bannerUrls: [
      '/images/swiper-1.jpg',
      '/images/swiper-2.jpg',
      '/images/swiper-3.jpg',
      '/images/swiper-4.jpg'
    ],
    // 轮播图属性
    indicatorDotsVar: "true",
    indicatorColorVar: "red",
    autoplayVar: "true",
    intervalVar:"2000",
    circularVar: "true",
    // 歌曲列表信息
    songs: []
},


/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
    // 向服务器发送请求
    wx.request({
      url: 'http://localhost:8080/tbMusic/musicList',
      method: 'GET',
      success: (res) => {
        console.log(res.data.data);
        // 给全局变量赋值
        this.setData({
          songs: res.data.data
        });
      }
    })
  },

注意：和 Vue 区别，

微信小程序中 在 data 中申明数据变量后，通过 this.setData() 的方式给变量赋值，而不是 Vue 中的数据data直接属于当前component，直接 this.songs， 无论赋值还是获取都是 this.songs

1
2
3
this.setData({
    songs: res.data.data
});

微信小程序中每个 page ，这里的 this 指向 当前 page

这个 data 也仅仅属于当前 page ，

注意：setData() 不是 保存到 storage，而仅仅是 page.data

微信小程序中获取 data 中数据，this.data.songs

列表渲染

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

1
2
3
<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>
1
2
3
4
5
6
7
8
9
Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名：

1
2
3
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

微信小程序中有 <block></block 自身不会生成任何标签，仅仅是容器，可以在它之上添加判断，

相当于 Vue 中的 <template></template>

不过注意到 微信小程序中 也有 <template></template>

可以发现 微信的关键词 wx:

而 Vue 为 v:，部分指令可以简写，例如 #slotName @eventName

block wx:for

类似 block wx:if，也可以将 wx:for 用在<block/>标签上，以渲染一个包含多节点的结构块。例如：

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

条件渲染

wx:if

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

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

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

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

block wx:if

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

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

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

微信开发者工具 配置

关闭本地验证（开发测试用）

补充

单位rpx

1rpx = 2rpx

rpx 有适配作用

input

1
<input class="search-input" type="text" bindinput="getKeyword" />

input 具有预定义的事件 bindinput，

bindinput 类似于 vue 中对于 input 的 v-model 双向数据绑定

v-model 实际上是 @eventHander 与 this.emit("eventName", pars) 联合的语法糖

CSS3 transform

参考：