小程序学习笔记整理_usingcomponents作用

1
2
3
4
5
6
7
8
9

{
  "pages": ["pages/index/index", "pages/logs/logs"],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  }
}

1
2
3

{
  "pages": ["pages/index/index", "pages/logs/logs"]
}

1
2
3
4
5
6
7
8
9

{
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
}

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

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black",
  },
  "debug": true,
  "tabBar": {
    "color": "#444",
    "backgroundColor": "#e0e0e0",
    "SelectedColor": "#219be3",
    "boderStyle": "black",
    "position": "bottom",
    "list": [
      {
        "text": "Home",
        "PagePath": "pages/index/index",
        "iconPath": "icons/grid-01.png"
      },
      {
        "text": "logs",
        "PagePath": "pages/logs/logs",
        "iconPath": "icons/grid-02.png"
      }
    ]
  }
}

1
2
3
4

{
  "pages": ["pages/index/index"],
  "requiredBackgroundModes": ["audio"]
}

1
2
3
4
5
6
7
8

{
  "pages": ["pages/index/index"],
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  }
}

1
2
3
4
5
6
7

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

1
2
3
4
5

person: [
      { name: 'zhangsan', age: 18, adult: true },
      { name: 'wangwu', age: 20, adult: true },
      { name: 'zhaoliu', age: 16, adult: false }
    ]

1
2
3
4

<view wx:for="{{ person }}">
   <checkbox checked='{{ item.adult }}'></checkbox>
   <text>{{ item.name }}</text>
</view>

1
2
3
4

<view wx:for="{{ person }}" wx:for-item="wx">
      <checkbox checked='{{ wx.adult }}'></checkbox>
      <text>{{ wx.name }}</text>
</view>

1
2
3
4
5

<view wx:for="{{ person }}" wx:for-item="wx" wx:for-index="i">
      <text>{{ i }}</text>
      <checkbox checked='{{ wx.adult }}'></checkbox>
      <text>{{ wx.name }}</text>
</view>

1
2
3
4
5
6

<view wx:for="{{ person }}" wx:for-item="wx" wx:for-index="i">
      <text>{{ i }}</text>
      <checkbox checked='{{ wx.adult }}'></checkbox>
      <text>{{ wx.name }}</text>
      <text>{{ person.length }}</text>
</view>

1
2
3
4
5

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">{{i}} * {{j}} = {{i * j}}</view>
  </view>
</view>

1
2
3
4

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

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

Page({
  data: {
    objectArray: [
      {id: 5, unique: 'unique_5'},
      {id: 4, unique: 'unique_4'},
      {id: 3, unique: 'unique_3'},
      {id: 2, unique: 'unique_2'},
      {id: 1, unique: 'unique_1'},
      {id: 0, unique: 'unique_0'},
    ],
    numberArray: [1, 2, 3, 4]
  },
  switch(e) {
    const length = this.data.objectArray.length
    for (let i = 0; i < length; ++i) {
      const x = Math.floor(Math.random() * length)
      const y = Math.floor(Math.random() * length)
      const temp = this.data.objectArray[x]
      this.data.objectArray[x] = this.data.objectArray[y]
      this.data.objectArray[y] = temp
    }
    this.setData({
      objectArray: this.data.objectArray
    })
  },
  addToFront(e) {
    const length = this.data.objectArray.length
    this.data.objectArray = [{id: length, unique: 'unique_' + length}].concat(this.data.objectArray)
    this.setData({
      objectArray: this.data.objectArray
    })
  },
  addNumberToFront(e) {
    this.data.numberArray = [this.data.numberArray.length + 1].concat(this.data.numberArray)
    this.setData({
      numberArray: this.data.numberArray
    })
  }
})

1
2
3
4
5
6
7
8
9
10

<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;">
  {{item.id}}
</switch>
<button bindtap="switch">Switch</button>
<button bindtap="addToFront">Add to the front</button>
 
<switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;">
  {{item}}
</switch>
<button bindtap="addNumberToFront">Add to the front</button>

1
2
3

<view wx:for="hello">{{item}}</view>
// 等同于
<view wx:for="{{ ['h', 'e', 'l', 'l', 'o'] }}">{{item}}</view>

1
2
3

<view wx:for="{{[1,2,3]}} ">{{item}}</view>
// 等同于
<view wx:for="{{[1,2,3] + ' '}}">{{item}}</view>

1
2
3

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

1
2
3
4

<block wx:if="{{true}}">
  <view>view1</view>
  <view>view2</view>
</block

1
2
3
4
5
6
7
8
9
10
11

<!--
  index: int
  msg: string
  time: string
-->
<template name="msgItem">
  <view>
    <text>{{index}}: {{msg}}</text>
    <text>Time: {{time}}</text>
  </view>
</template>

1

<template is="msgItem" data="{{...item}}" />

1
2
3
4
5
6
7
8
9

Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

1
2
3
4
5
6
7
8
9
10

<template name="odd">
  <view>odd</view>
</template>
<template name="even">
  <view>even</view>
</template>
 
<block wx:for="{{[1, 2, 3, 4, 5]}}">
  <template is="{{item % 2 == 0 ? 'even' : 'odd'}}" />
</block>

1
2
3

<view class="container">
  <button bindtap='buttonTap'>点击我哦</button>
</view>

1
2
3
4
5
6
7

Page({
    ...
    buttonTap() {
    console.log('123')
  },
    ...
})

1

<button bindtap='buttonTap' data-hello='事件传参'>点击我哦</button>

1
2
3
4
5
6
7
8

Page({
    ...
    buttonTap(e) {
    console.log(e)
    console.log(e.target)
  },
    ...
})

1
2
3
4
5
6
7

<view id="outer" style='width: 200px; height: 200px; background-color:red'  bindtap="handleTap1">
  我是他爷爷
  <view id="middle" style='width: 100px; height: 100px; background-color:yellow'  bindtap="handleTap2">
    我是他爸爸
    <view id="inner" style='width: 50px; height: 50px; background-color:blue'  bindtap="handleTap3">我是他儿子</view>
  </view>
</view>

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

Page({
    ...
    handleTap1() {
    console.log('我是他爷爷')
    },
    handleTap2() {
      console.log('我是他爸爸')
    },
    handleTap3() {
      console.log('我是他儿子')
    },
    ...
})

1
2
3
4
5
6
7

<view id="outer" style='width: 200px; height: 200px; background-color:red'  bindtap="handleTap1">
  我是他爷爷
  <view id="middle" style='width: 100px; height: 100px; background-color:yellow'  catchtap="handleTap2">
    我是他爸爸
    <view id="inner" style='width: 50px; height: 50px; background-color:blue'  bindtap="handleTap3">我是他儿子</view>
  </view>
</view>

1
2
3
4

<view id="outer" style='width: 200px; height: 200px; background-color:red'  bind:tap="handleTap1" capture-bind:tap="handleTap2">
    我是他爸爸
    <view id="middle" style='width: 100px; height: 100px; background-color:yellow' bind:tap="handleTap3" capture-bind:tap="handleTap4"> 我是我自己</view>
  </view>

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

Page({
    ...
    handleTap1() {
    console.log('我是handleTap1')
    },
    handleTap2() {
      console.log('我是handleTap2')
    },
    handleTap3() {
      console.log('我是handleTap3')
    },
    handleTap4() {
      console.log('我是handleTap4')
    },
    ...
})

1
2
3

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap">
  DataSet Test
</view>

1
2
3
4
5
6

Page({
  bindViewTap(event) {
    event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法
    event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写
  }
})

1
2
3
4

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

1
2

<import src="item.wxml" />
<template is="item" data="{{text: 'forbar'}}" />

1
2
3
4

<!-- A.wxml -->
<template name="A">
  <text>A template</text>
</template>

1
2
3
4
5

<!-- B.wxml -->
<import src="a.wxml" />
<template name="B">
  <text>B template</text>
</template>

1
2
3
4
5

<!-- C.wxml -->
<import src="b.wxml" />
<template is="A" />
<!-- Error! Can not use tempalte when not import A. -->
<template is="B" />

1
2
3
4
5
6
7
8

<!-- index.wxml -->
<include src="header.wxml" />
<view>body</view>
<include src="footer.wxml" />
<!-- header.wxml -->
<view>header</view>
<!-- footer.wxml -->
<view>footer</view>

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

Page({
    ...
    inputHandle(e) {
    // console.log(e.detail.value)
    // console.log(this.data.message)
    // this.data.message = e.detail.value 
    this.setData({
      message: e.detail.value
    }) 
  },
  ...
})

1
2

<input value='{{ message }}' bindinput='inputHandle'></input>
<text>{{ message }}</text>

1
2
3
4
5
6
7
8
9

Page({
    ...
    inputHandle(e) {
    // console.log(e.detail.value)
    // console.log(this.data.message)
    this.data.message = e.detail.value    
  },
  ...
})

1
2
3
4
5

<view></view>				视图容器，相当于    <div></div>
<text></text>				相当于    <span></span>  
<image></image>				相当于    <img />
<navigator></navigator>		相当于    <a></a>
<block></block>				区块标签，不会渲染到页面

1

<navigator url="想去到达页面的相对路径"></navigator>

1
2
3

{
  "usingComponents": {}
}

1
2
3

// demo1.wxml
<navigator url="../demo2/demo2?name=小明&age=18">小明</navigator>
<navigator url="../demo2/demo2?name=小红">小红</navigator>

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

// pages/demo2/demo2.js
Page({
  data:{},
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    console.log(options)
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

1
2

// demo1.wxml
<navigator url="../demo2/demo2" redirect>跳转过去（不回来了）</navigator>

1
2
3

// demo1.wxml
<navigator hover-class="my-hover">点我点我</navigator>
<navigator hover-class="none">点我点我</navigator>

1
2
3
4

// demo1.wxss
.my-hover {
    color: red;
}

1
2

// demo1.wxml
<image class="hover-demo" src="../../images/poster.jpg"></image>

1
2
3
4

// demo1.wxss
.hover-demo {
    cursor: pointer;
}

1
2

// demo1.wxml
<button type="primary" bindtap="tapHandle">跳转过去</button>

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

// demo1.js
Page({
    tapHandle: function () {
        // 当我们点击按钮 系统会自动执行这里的代码
        // console.log(1111)
        wx.navigateTo({
          url: '../demo2/demo2?id=123'
        })
 
        // 相当于加上redirect的 navigator
        // wx.redirectTo({
        //   url: '../demo2/demo2'
        // })
    }
})

1

<icon type="success"></icon>

1

<icon type="success" size="60"></icon>

1

<icon type="success" size="60" color="red"></icon>

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

<view class="page-body">
  <view class="page-section">
    <view class="page-section-title">传入html字符串</view>
    <view class="rich-text-wrp">
      <rich-text nodes="{{html}}" bindtap="tap"></rich-text>
    </view>
  </view>
 
  <view class="page-section">
    <view class="page-section-title">传入节点列表</view>
    <view class="rich-text-wrp">
      <rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
    </view>
  </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

rich-text {
  width: 700rpx;
  padding: 25rpx 0;
}
 
.rich-text-wrp {
  padding: 0 25rpx;
  background-color: #fff;
}
 
.page-section{
  width: 100%;
  margin-bottom: 60rpx;
}
 
.page-section:last-child{
  margin-bottom: 0;
}
 
.page-section-title{
  font-size: 28rpx;
  color: #999999;
  margin-bottom: 10rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;
}

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

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

1
2
3
4

<button></button>
<input type="text" />				
<checkbox />
<radio/>

1
2
3

<button type='warn'>这是一个红色按钮</button>
<button type='primary'>这是一个绿色按钮</button>
<button type='default'>这是一个白色按钮</button>