0%

微信小程序 开发笔记

目录、文件解析

概览

一个 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:elifwx: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

参考: