微信小程序

小程序基础文档

基础

结构

app.json

tabBar

page.json

这⾥的 page.json 其实⽤来表⽰⻚⾯⽬录下的 page.json 这类和⼩程序⻚⾯相关的配置。
开发者可以独⽴定义每个⻚⾯的⼀些属性,如顶部颜⾊、是否允许下拉刷新等等。
⻚⾯的配置只能设置 app.json 中部分 window 配置项的内容,⻚⾯中配置项会覆盖 app.json
的 window 中相同的配置项

属性 类型 默认值 描述
navigationBarBackgroundColor HexColor #000000 导航栏背景颜⾊,如 #000000
navigationBarTextStyle String white 导航栏标题颜⾊,仅⽀持 black / white
navigationBarTitleText String 导航栏标题⽂字内容
backgroundColor HexColor #ffffff 窗⼝的背景⾊
backgroundTextStyle String dark 下拉 loading 的样式,仅⽀持 dark / light
enablePullDownRefresh Boolean false 是否全局开启下拉刷新。 详⻅ Page.onPullDownRefresh
onReachBottomDistance Number 50 ⻚⾯上拉触底事件触发时距⻚⾯底部距离,单位为px。 详⻅Page.onReachBottom
disableScroll Boolean false 设置为 true 则⻚⾯整体不能上下滚动;只在⻚⾯配置中有效,⽆法在 app.json 中设置该项

模板语法

数据绑定

  • text标签:相当于web中的 span标签 行内元素 不会换行
  • view标签:相当于web中的 div标签 块元素 会换行
  • block标签:相当于占位符标签,写代码时存在,页面渲染时会移除掉
1
<view>{{msg}}</view>
1
2
3
4
5
Page({
data: {
msg:"数据绑定"
}
});

列表渲染

  • wx:for=”“,wx:for-item=”循环项的名称/对象的value”,wx:for-index=”循环项的索引/对象的key名”
  • wx:for-item="循环项的名称",wx:for-index="循环项的索引":默认名称叫 item和index,如果只有一层循环可以不写,直接使用
  • wx:key=”唯一的值”:提高列表渲染的性能,wx:key=”*this” 表示数组是一个普通数组,数组中不是对象
1
2
3
4
5
6
7
8
9
<view>
<view wx:for="{{list}}"
wx:for-item="item"
wx:for-index="index"
wx:key="id">
索引:{{index}}
值:{{item.msg}}
</view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Page({
data: {
list:[
{
id:1,
msg:"数据1"
},
{
id:2,
msg:"数据2"
}
]
}
});

条件渲染

当标签频繁切换使用 hidden,不频繁使用 wx:if

1
2
3
4
5
6
7
<view wx:if="{{false}}">不显示</view>
<view wx:elif="{{true}}">显示</view>
<view wx:else>不显示出来</view>

<view hidden>不显示</view>
<view hidden="{{true}}">不显示</view>
<view hidden="{{false}}">显示</view>

事件绑定

1
2
3
4
<input type="text" bindinput="inputFunc" />

<!--传递参数,自定义属性传递参数 data-xxx -->
<input type="text" bindinput="inputFunc2" data-operation="{{1}}">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Page({
data: {
info:1
},
// 绑定input事件
inputFunc(e) {
// 赋值给info
this.setData({
info : e.detail.value
}
)
},
inputFunc2(e){
// 取到值 1
cnost {operation} = e.currentTarget.dataset;
}
});

常用组件

引入自定义样式:@import,只支持相对路径

1
@import ../../styles/common.wxss

⼩程序中使⽤less

view

代替 原来的 div 标签

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

swiper

微信内置轮播图组件

属性名 类型 默认值 描述
indicator-dots Boolean false 是否显⽰⾯板指⽰点
indicator-color Color rgba(0, 0, 0, .3) 指⽰点颜⾊
indicator-active-color Color #000000 当前选中的指⽰点颜⾊
autoplay Boolean false 是否⾃动切换
interval Number 5000 ⾃动切换时间间隔
circular Boolean false s是否循环轮播

swiper-item:滑块,默认宽度和⾼度都是100%

导航组件 类似超链接标签

属性名 类型 默认值 描述
target String self 在哪个⽬标上发⽣跳转,默认当前⼩程序,可选值self/miniProgram
url String 当前⼩程序内的跳转链接
opentype String navigate 跳转⽅式

open-type 有效值

属性名 类型
navigate 保留当前⻚⾯,跳转到应⽤内的某个⻚⾯,但是不能跳到tabbar ⻚⾯
redirect 关闭当前⻚⾯,跳转到应⽤内的某个⻚⾯,但是不允许跳转到tabbar ⻚⾯
switchTab 跳转到 tabBar ⻚⾯,并关闭其他所有⾮ tabBar ⻚⾯
reLaunch 关闭所有⻚⾯,打开到应⽤内的某个⻚⾯
navigateBack 关闭当前⻚⾯,返回上⼀⻚⾯或多级⻚⾯。可通过 getCurrentPages() 获取当前的⻚⾯栈,决定需要返回⼏层
exit 退出⼩程序,target=miniProgram时⽣效

rich-text

富文本标签

可以将字符串解析成 对应标签,类似 vue中 v–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
// 1   index.wxml 加载 节点数组
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
// 2 加载 字符串
<rich-text nodes='<img
src="https://developers.weixin.qq.com/miniprogram/assets/images/head_global_z_@all.p
ng" alt="">'></rich-text>
```

```js
Page({
data: {
nodes: [{
name: 'div',
attrs: {
class: 'div_class',
style: 'line-height: 60px; color: red;'
},
children: [{
type: 'text',
text: 'Hello&nbsp;World!'
}]
}]
},
tap() {
console.log('tap')
}
})

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

属性名 说明 类型 必填 备注
name 标签名 string ⽀持部分受信任的 HTML 节点
attrs 属性 object ⽀持部分受信任的属性,遵循 Pascal 命名法
children ⼦节点列表 array 结构和 nodes ⼀致

⽂本节点:type = text

属性名 说明 类型 必填 备注
text ⽂本 string ⽀持entities

button

1
2
3
4
5
6
7
8
<button
type="default"
size="{{defaultSize}}"
loading="{{loading}}"
plain="{{plain}}"
>
default
</button>
属性名 类型 默认值 必填 说明
size string default 按钮的⼤⼩
type string default 按钮的样式类型
plain boolean false 按钮是否镂空,背景⾊透明
disabled boolean false 是否禁⽤
loading boolean false 名称前是否带 loading 图标
formtype string ⽤于 组件,点击分别会触发 组件的submit/reset 事件
open-type string 微信开放能⼒

size 的合法值

说明
default 默认⼤⼩
mini ⼩尺⼨

type 的合法值

说明
primary 绿⾊
default ⽩⾊
warn 红⾊

form-type 的合法值

说明
submit 提交表单
reset 重置表单

open-type 的合法值

说明
contact 打开客服会话,如果⽤⼾在会话中点击消息卡⽚后返回⼩程序,可以从bindcontact
share 触发⽤⼾转发,使⽤前建议先阅读使⽤指引
getPhoneNumber 获取⽤⼾⼿机号,可以从bindgetphonenumber回调中获取到⽤⼾信息,具体说明
getUserInfo 获取⽤⼾信息,可以从bindgetuserinfo回调中获取到⽤⼾信息
launchApp 打开APP,可以通过app-parameter属性设定向APP传的参数具体说明
openSetting 打开授权设置⻚
feedback 打开“意⻅反馈”⻚⾯,⽤⼾可提交反馈内容并上传⽇志,开发者可以登录⼩程序管理后台后进⼊左侧菜单“客服反馈”⻚⾯获取到反馈内容

icon

属性名 类型 默认值 必填 说明
type string icon的类型,有效值:success, success_no_circle,info, warn, waiting, cancel, download, search,clear
size number/string 23 icon的⼤⼩
color string icon的颜⾊,同css的color
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<view class="group">
<block wx:for="{{iconSize}}">
<icon type="success" size="{{item}}"/>
</block>
</view>
<view class="group">
<block wx:for="{{iconType}}">
<icon type="{{item}}" size="40"/>
</block>
</view>
<view class="group">
<block wx:for="{{iconColor}}">
<icon type="success" size="40" color="{{item}}"/>
</block>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
Page({
data: {
iconSize: [20, 30, 40, 50, 60, 70],
iconType: [
'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel',
'download', 'search', 'clear'
],
iconColor: [
'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
],
}
})

自定义组件

pages同级新建一个components文件夹

右键新建Component

组件结构

组件

1
2
3
4
5
6
7
8
9
10
11
<view class="tabs">
<view class="tabs_title">
<view wx:for="{{tabs}}" wx:key="id" class="title_item {{item.isActive?'active':''}}" bindtap="handleItemTap" data-index="{{index}}">
{{item.name}}
</view>
</view>
<view class="" hover-class="none" hover-stop-propagation="false">
<!-- 父组件传入内容 -->
<slot></slot>
</view>
</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
// components/Tabs/Tabs.js
Component({
/**
* 组件的属性列表
*/
properties: {
// 组件属性
tabs:{
// 组件类型
type:Array,
// 值
value:[]
}
},

/**
* 组件的初始数据
*/
data: {

},

/**
* 组件的方法列表
*/
methods: {
handleItemTap(e){
const {index} = e.currentTarget.dataset;
// 触发父组件方法
this.triggerEvent("itemChange",{index})
}
}
});

使用组件

1
2
3
4
5
6
7
<!--binditemChange是绑定子组件的方法,tabs是子组件自定义的属性-->
<Tabs tabs="{{tabs}}" binditemChange="handerItemChange">
<block wx:if="{{tabs[0].isActive}}">1</block>
<block wx:if="{{tabs[1].isActive}}">2</block>
<block wx:if="{{tabs[2].isActive}}">3</block>
<block wx:if="{{tabs[3].isActive}}">4</block>
</Tabs>
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
// pages/tabs/tabs.js
Page({
/**
* 页面的初始数据
*/
data: {
tabs: [
{
id: 0,
name: '首页',
isActive: true
},
{
id: 1,
name: '原创',
isActive: false
},
{
id: 3,
name: '分类',
isActive: false
},
{
id: 4,
name: '关于',
isActive: false
}
]
},
// 子组件调用方法
handerItemChange(e) {
const { index } = e.detail
const { tabs } = this.data;
tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false)
this.setData({
tabs
})
}
})

页面分享代码

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
58
59
60
61
62
63
64
65
66
// 分享好友
onShareAppMessage() {
var that = this;
// 设置菜单中的转发按钮触发转发事件时的转发内容
var shareObj = {
title: "简洁而便利的记账小工具", // 默认是小程序的名称(可以写slogan等)
path: '/pages/index/index?id=123', // 分享的页面路径
imageUrl: '****.png' //这个是分享的图片
success: function (res) {
// 转发成功之后的回调
if (res.errMsg == 'shareAppMessage:ok') {
}
},
fail: function () {
// 转发失败之后的回调
if (res.errMsg == 'shareAppMessage:fail cancel') {
// 用户取消转发
} else if (res.errMsg == 'shareAppMessage:fail') {
// 转发失败,其中 detail message 为详细失败信息
}
},
complete() {
// 转发结束之后的回调(转发成不成功都会执行)
}
}
// 来自页面内的按钮的转发
if (options.from == 'button') {
var eData = options.target.dataset;
// 此处可以修改 shareObj 中的内容
shareObj.path = '/pages/btnname/btnname?btn_name=' + eData.name;
}
// 返回shareObj
return shareObj;
},
// 分享朋友圈
onShareTimeline() {
var that = this;
// 设置菜单中的转发按钮触发转发事件时的转发内容
var shareObj = {
title: "简洁而便利的记账小工具", // 默认是小程序的名称(可以写slogan等)
success: function (res) {
// 转发成功之后的回调
if (res.errMsg == 'shareAppMessage:ok') {
}
},
fail: function () {
// 转发失败之后的回调
if (res.errMsg == 'shareAppMessage:fail cancel') {
// 用户取消转发
} else if (res.errMsg == 'shareAppMessage:fail') {
// 转发失败,其中 detail message 为详细失败信息
}
},
complete() {
// 转发结束之后的回调(转发成不成功都会执行)
}
}
// 来自页面内的按钮的转发
if (options.from == 'button') {
var eData = options.target.dataset;
// 此处可以修改 shareObj 中的内容
shareObj.path = '/pages/btnname/btnname?btn_name=' + eData.name;
}
// 返回shareObj
return shareObj;
}

应用生命周期 app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// app.js
App({
// 1 应用程序第一次启动就触发
onLaunch() {

},
// 2 应用被用户看到之后触发
onShow() {

},
// 3 应用被隐藏的时候触发
onHide() {

},
// 4 应用代码发生了报错的时候 触发
onError(err) {

},
// 5 页面找不到的时候触发,应用第一次启动的时候,如果找不到第一个入口页面才会触发
onPageNotFount() {

}
})

页面生命周期

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
Page({

/**
* 页面的初始数据
*/
data: {

},

/**
* 生命周期函数--监听页面加载
* 页面加载完毕触发
*/
onLoad: function (options) {

},

/**
* 生命周期函数--监听页面显示
*/
onShow: function () {

},

/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {

},

/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {

},

/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {

},

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {

},

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {

},

/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {

},

/**
* 页面滚动就触发
*/
onPageScroll: function () {

},

/**
* 页面尺寸发生改变触发
*/
onResize: function () {

},

/**
* 当前是tap页,点击当前自己tab时触发
*/
onTabItemTap: function () {

}

相关文章

JavaScript基础

JavaScript高级

Jquery基础

Jquery高级

Bootstrap

Ajax和Json

DataTables

Sweetalert2

zTree使用

Vue