微信小程序

小程序基础文档

基础

结构

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

2021
#前端知识