02小程序教程

# 小程序教程

# 小程序平台

1、公众平台开发文档（项目本身是小程序、发微信公众、文档、微信小游戏）

公众平台 (opens new window)

2、开放平台开发文档（项目本身不是小程序，但是需要用到小程序的功能）

开放平台 (opens new window)

3、开放社区 社区功能类似百度贴吧（微信发布新的版本会在这里进行通知、提问问题）

开放社区 (opens new window)

# 底部菜单栏

{
  "tabBar": {
    "custom": false,
    "color": "#fff",
    "selectedColor": "#e3e3e3",
    "backgroundColor": "#00b26a",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "./pages/img/b1.png",
        "selectedIconPath": "./pages/img/b1.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "./pages/img/b2.png",
        "selectedIconPath": "./pages/img/b2.png"
      }
    ]
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 路由和配置`app.js`

//app.js
{
    "pages": [
        "pages/index/index",
        "pages/logs/logs",
        "pages/test/test"
    ],
    "tabBar": {
        "custom": false,
        "color": "#fff",
        "selectedColor": "#e3e3e3",
        "backgroundColor": "#00b26a",
        "list": [
            {
                "pagePath": "pages/index/index",
                "text": "首页",
                "iconPath": "./pages/img/b1.png",
                "selectedIconPath": "./pages/img/b1.png"
            },
            {
                "pagePath": "pages/logs/logs",
                "text": "日志",
                "iconPath": "./pages/img/b2.png",
                "selectedIconPath": "./pages/img/b2.png"
            }
        ]
    },
    "usingComponents": {},
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#009056",
        "navigationBarTitleText": "微信测试",
        "navigationBarTextStyle": "white"
    },
    "style": "v2",
    "sitemapLocation": "sitemap.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
36
37

# 渲染数据

# 数据列表

<!--pages/index/index.html-->
<view>{{msg}}</view>

1
2

//pages/index/index.js
Page({
  data: {
    msg: "hello 小程序",
  },
});

1
2
3
4
5
6

# 数组列表

<!--pages/index/index.html-->
<view wx:for="{{arr}}">{{item}}</view>
<view wx:for="{{arr}}" wx:key="idx" wx:for-index="idx" wx:for-item="xxx">{{idx}}{{xxx}}</view>

1
2
3

//pages/index/index.js
Page({
  data: {
    arr: ["张三", "李四", "老王"],
  },
});

1
2
3
4
5
6

# 事件传参

案例1

<!--pages/index/index.html-->
<view bind:tap="handler">点击</view>

1
2

//pages/index/index.js
Page({
  data: {},
  handler() {
    console.log(123);
  },
});

1
2
3
4
5
6
7

案例2

<!--pages/index/index.html-->
<view bind:tap="handler" data-value="这里是点击传数据">点击</view>

1
2

//pages/index/index.js
Page({
  data: {},
  handler(event) {
    // console.log(event);
    console.log(event.target.dataset.value);
  },
});

1
2
3
4
5
6
7
8

# 修改数据

案例1

<!--pages/index/index.html-->
<view>{{num}}</view>
<button bind:tap="add">添加数据</button>

1
2
3

//pages/index/index.js
Page({
  data: {
    num: 1,
  },
  add() {
    this.setData({
      num: this.data.num + 1,
    });
  },
});

1
2
3
4
5
6
7
8
9
10
11

案例2

<!--pages/index/index.html-->
<view wx:for="{{arr}}" wx:key="index">{{item.num}}</view>
<button bind:tap="add">多行添加数据</button>

1
2
3

//pages/index/index.js
Page({
  data: {
    num: 1,
    arr: [{ num: 1 }, { num: 1 }, { num: 1 }],
  },
  add() {
    this.data.arr.forEach((item, idx) => {
      this.setData({
        [`arr[${idx}].num`]: item.num + 1,
      });
    });
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 增删改查

增

<view wx:for="{{arr}}" wx:key="index">{{item.num}}</view>
<button bind:tap="add">添加按钮</button>

1
2

Page({
  data: {
    num: 1,
    arr: [{ num: 1 }, { num: 1 }, { num: 1 }],
  },
  add() {
    this.data.arr.forEach((item, idx) => {
      this.setData({
        [`arr[${idx}].num`]: item.num + 1,
      });
    });
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13

删

<view wx:for="{{arr}}" wx:key="index">
    {{item.num}}
	<button bind:tap="remove" data-idx="{{index}}">删除</button>
</view>

1
2
3
4

Page({
  data: {
    num: 1,
    arr: [{ num: "张三" }, { num: "李四" }, { num: "老王" }],
  },
  remove(event) {
    let idx = event.target.dataset.idx;
    let newArr = this.data.arr;
    newArr.splice(idx, 1);
    this.setData({
      arr: newArr,
    });
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14

改

<view wx:for="{{arr}}" wx:key="index">
    {{item.num}}
    <button bind:tap="update" data-idx="{{index}}">修改</button>
</view>

1
2
3
4

Page({
  data: {
    num: 1,
    arr: [{ num: "张三" }, { num: "李四" }, { num: "老王" }],
  },
  update(event) {
    let idx = event.target.dataset.idx;
    this.setData({
      [`arr[${idx}]`]: { name: "修改" },
    });
  },
});

1
2
3
4
5
6
7
8
9
10
11
12

# 小程序页面传参数

# 第一种

在地址栏【父组件】

<!--pages/index/index.html-->
<navigator url="/pages/test/test?name=张三&age=李四" open-type="navigate">跳转测试页</navigator>

1
2

js文件【子组件】

//pages/test/test.js
Page({
  onLoad(options) {
    console.log(options);
  },
});

1
2
3
4
5
6

# 第二种

父组件

<!--pages/index/index.html-->
<button bind:tap="toTest">跳到测试页</button>

1
2

//pages/index/index.js
Page({
  toTest() {
    wx.navigateTo({
      url: "/pages/test/test?name=张三&age=18",
    });
  },
});

1
2
3
4
5
6
7
8

子组件

//pages/test/test.js
Page({
  onLoad(options) {
    console.log(options);
  },
});

1
2
3
4
5
6

# 第三种

父组件

<!--pages/index/index.html-->
<button bind:tap="toTest">跳到测试页</button>

1
2

//pages/index/index.js
Page({
  toTest() {
    wx.navigateTo({
      url: "/pages/test/test",
      events: {
        xxx: function (data) {
          console.log(data);
        },
      },
      success(res) {
        res.eventChannel.emit("xxx", { data: "test" });
      },
    });
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

子组件

//pages/test/test.js
Page({
  onLoad() {
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.on("xxx", function (data) {
      console.log(data);
    });
  },
});

1
2
3
4
5
6
7
8
9

# 组件数据传输

自动轮播

<swiper autoplay="{{true}}" interval="{{2000}}">
    <swiper-item>
        <cover-image src="https://qiv2.ashun01.eu.org/img/0.jpg"></cover-image>
    </swiper-item>
    <swiper-item>
        <cover-image src="https://qiv2.ashun01.eu.org/img/146.jpg"></cover-image>
    </swiper-item>
    <swiper-item>
        <cover-image src="https://qiv2.ashun01.eu.org/img/849.jpg"></cover-image>
    </swiper-item>
</swiper>

1
2
3
4
5
6
7
8
9
10
11

# 1、使用组件和自定义组件

//1、设置组件为true
//components/acom.json
{
    "component": true,
    "usingComponents": {}
}

//2、在使用的地方配置路径
//pages/index/index.js
{
  "usingComponents": {
    "acom": "/components/acom"
  }
}

//3、在你用在使用即可
//pages/index/index.wxml
<acom></acom>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

//然后在components/acom.wxml
<text>测试组件</text>

1
2

# 2、插槽

作用域插槽没有

//components/acom.wxml
<text>
    <slot name="a"></slot>
        我是自定义组件
    <slot name="b"></slot>
</text>

1
2
3
4
5
6

//components/acom.js
Component({
  options: {
    multipleSlots: true, // 在组件定义时的选项中启用多slot支持
  },
})

1
2
3
4
5
6

//pages/index/index.wxml
<acom>
    <text slot="a">组件的自定义a</text>
    <text slot="b">组件的自定义b</text>
</acom>

1
2
3
4
5

# 3、父传子

父

//pages/index/index.wxml
<acom msg="{{msg}}"></acom>

//pages/index/index.js
Page({
  data: {
    msg: "我是父组件传给——>",
  },
});

1
2
3
4
5
6
7
8
9

子

//components/acom.wxml
<text>{{msg}}我是子组件</text>

//components/acom.js
Component({
properties: {
    msg: {
      type: String,
    },
  },
})

1
2
3
4
5
6
7
8
9
10
11

# 4、子传父

父

//pages/index/index.wxml
<acom bindchildevent="fn"></acom>

//pages/index/index.js
Page({
  fn(event) {
    console.log(event.detail);
  },
});

1
2
3
4
5
6
7
8
9

子

//components/acom.wxml
<text>我是子组件</text>
<button bind:tap="handler">按钮</button>

//components/acom.js
Component({
 methods: {
    handler() {
      this.triggerEvent("childevent", "这是子传父");
    },
 })

1
2
3
4
5
6
7
8
9
10
11

# 5、非父子eventBus*

//pages/index/index.json
{
  "usingComponents": {
    "acom": "/components/acom/acom",
    "bcom": "/components/bcom/bcom"
  }
}

//pages/index/index.wxml
<acom></acom>
<bcom></bcom>

1
2
3
4
5
6
7
8
9
10
11

//utils/eventBus.js
class EventBus {
  constructor() {
    this.list = [];
  }
  //发布
  $emit(eventName, options) {
    setTimeout(() => {
      this.list.forEach((item) => {
        if (item.eventName === eventName) {
          item.callBack(options);
        }
      });
    }, 0);
  }
  //订阅
  $on(eventName, callBack) {
    this.list.push({ eventName, callBack });
    console.log(this.list);
  }
}
export default new EventBus();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 6、非父子globalData*

//app.js
App({
  globalData: "hello world",
})

//pages/test/test.wxml
<bcom></bcom>

//componentns/acom/acom.wxml
<button bind:tap="totest">去测试页</button>

1
2
3
4
5
6
7
8
9
10

//componentns/acom/acom.js
const ctx = getApp();
Component({
  methods: {
    totest() {
      wx.switchTab({
        url: "/pages/test/test",
        success() {
          ctx.globalData = "hi world";
        },
      });
    },
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14

  //componentns/bcom/bcom.js
Component({
  lifetimes: {
    attached() {
      $eventBus.$on("myevent", (res) => {
        console.log(res);
      });
    },
  },
});

1
2
3
4
5
6
7
8
9
10

# 7、请求

//components/acom/acom.js
Component({
  lifetimes: {
    attached() {
      wx.request({
        url: "http://vt.oosjk.com/goods/getIndexInfo",
        success: (res) => {
          console.log(res);
        },
      });
    },
  },
 })

1
2
3
4
5
6
7
8
9
10
11
12
13

# 8、数据缓存

同步

//components/acom/acom.js
Component({
  lifetimes: {
    attached() {
      wx.setStorageSync("name", 123);
    },
  },
 })

1
2
3
4
5
6
7
8

异步

//components/acom/acom.js
Component({
  lifetimes: {
    attached() {
      wx.setStorage({
        // key: "msg",
        // data: "hello world",
        key: "arr",
        data: [{ name: "张三", age: 18 }],
      });
    },
  },
 })

1
2
3
4
5
6
7
8
9
10
11
12
13

# 9、微信登陆

Page({
	onShow() {
		// 登入
		wx.login({
			success(res) {
				// 后端给的接口
				wx.request({
					url: "http://xxx接口",
					data: {
						param: {
							code: res.code,
						}
					},
					// 然后就可以
					success(res) {
						console.log(res)
					}
				})
			}
		})
	}
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

编辑

上次更新: 2023/08/06, 00:38:41

← 01微信小程序 03UniApp框架教程→

02小程序教程

# 小程序教程

# 小程序平台

# 底部菜单栏

# 路由和配置app.js

# 渲染数据

# 数据列表

# 数组列表

# 事件传参

# 修改数据

# 增删改查

# 小程序页面传参数

# 第一种

# 第二种

# 第三种

# 组件数据传输

# 1、使用组件和自定义组件

# 2、插槽

# 3、父传子

# 4、子传父

# 5、非父子eventBus*

# 6、非父子globalData*

# 7、请求

# 8、数据缓存

# 9、微信登陆

# 路由和配置`app.js`