微信小程序

微信小程序开发环境

文件介绍

主要由两个部分组成和html不同的是

微信小程序四层结构

分别为:

  • .js 逻辑
  • .json 布局
  • .wxml 内容
  • .wxss 主题

app.json文件

page

[1] 设置页面顺序

[2] 创建页面

windows

[1] 设置页面的主题

[2] 页面颜色

[3] 页面名字

[4] 是否可以下拉,下拉背景色

tabBar

[1] 设置下选项框的主题

[2] 通过选择不同的tabBar选择不同的页面

W[3] 设置选项框颜色

参考模板

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": [
"pages/demo01/demo01",
"pages/index/index",
"pages/logs/logs"

],

"window": {
"backgroundTextStyle": "dark",
"navigationBarBackgroundColor": "#0094ff",
"navigationBarTitleText": "恋爱助手",
"navigationBarTextStyle": "white",
"enablePullDownRefresh":true,
"backgroundColor":"#0094ff"
},
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "我要投递",
"iconPath": "icon/bbox.png",
"selectedIconPath": "icon/gbox.png"

},
{
"pagePath": "pages/demo01/demo01",
"text": "我要标签",
"iconPath": "icon/bbox.png",
"selectedIconPath": "icon/gbox.png"
}
],
"color":"#0094ff",
"selectedColor": "#ff9400",
"position": "bottom"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}

js

参考模板

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
Page({

/**
* 页面的初始数据
*/
data: {
massage:"hello world",
num:1000,
Isgirl:true,
person:{
age:23,
hight:180,
weight:150,
name:"kunpeng"

},
list:[
{
id : 0,
name:'girl'
},
{
id : 1,
name:'boy'
}
]


},

})

wxml

设置页面的显示内容,类似xml

  1. text不换行,view换行
  2. 标签属性使用
  3. bool类型充当属性 checked属性 字符串和花括号之间不要存在空格

运算 ==》表达式

  1. 在花括号加入表达式
  2. 表达式 简单的运算
    1. 数字的加减
    2. 字符串的拼接
    3. 三元表达式
  3. 语句
    1. 复杂的代码段
    2. if else
    3. switch
    4. do while
    5. for

列表循环

  1. wx:for=”“ wx:for-item=”循环项名称” wx:for-index=”循环项索引”
  2. wx:key=”唯一的值”用于提高列表渲染性能
    1. wx:key 绑定一个普通的字符串的时候 这个字符串的名称肯定是选好数组中的对象的唯一属性
    2. wx:key = “this” 就表示你的数组是一个普通数组 this 表示是循环项
      [1,2,3,44,5]
      [“1”,”222”,”adfdf”]
    3. 当出现数组嵌套循环的时候,注意绑定的名称不要重名
      wx:for-item=”循环项名称” wx:for-index=”循环项索引”
    4. 默认情况下不写代码
      wx:for-item=”循环项名称” wx:for-index=”循环项索引”
      小程序也会把 循环和索引设置为item和index
      只有一层循环可以直接写 wx:for=”“

      对象循环

  3. wx:for=”“ wx:for-item=”对象名称” wx:for-index=”对象索引”

block

  1. 占位的标签
  2. 写代码的时候 可以看到这个标签存在
  3. 页面渲染 小程序会把它移除掉

条件渲染

  1. 隐藏
  2. if嵌套条件

    wx if

    wx elif

    wx else

  3. hidden
    1.hidden

    标签频繁切换用hidden,不频繁选择if

    参考模板

    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
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    <!--pages/demo01/demo01.wxml-->
    <!--1.text不换行,view换行 -->
    <view>{{massage}}</view>
    <view>{{num}}</view>
    <view>是否为男人{{Isgirl}}</view>
    <view>{{person.age}}</view>

    <!--2.标签属性使用 -->
    <view data-num="{{num}}">自定义</view>

    <!--3. bool类型充当属性 checked属性
    字符串和花括号之间不要存在空格
    -->
    <view>
    <checkbox checked="{{Isgirl}}"></checkbox>
    </view>

    <!--
    7 运算 ==》表达式
    1. 在花括号加入表达式
    2. 表达式 简单的运算
    1. 数字的加减
    2. 字符串的拼接
    3. 三元表达式
    3. 语句
    1.复杂的代码段
    1. if else
    2. switch
    3. do while
    4. for
    -->
    <view>{{1+1}}</view>
    <view>{{'1'+'1'}}</view>
    <view>{{10%2==0 ? '偶数' : '奇怪数'}}</view>


    <!--
    8. 列表循环
    1. wx:for="{{数组或对象}}" wx:for-item="循环项名称" wx:for-index="循环项索引"
    2. wx:key="唯一的值"用于提高列表渲染性能
    1. wx:key 绑定一个普通的字符串的时候 这个字符串的名称肯定是选好数组中的对象的唯一属性
    2. wx:key = "*this" 就表示你的数组是一个普通数组 *this 表示是循环项
    [1,2,3,44,5]
    ["1","222","adfdf"]
    3. 当出现数组嵌套循环的时候,注意绑定的名称不要重名
    wx:for-item="循环项名称" wx:for-index="循环项索引"
    4. 默认情况下不写代码
    wx:for-item="循环项名称" wx:for-index="循环项索引"
    小程序也会把 循环和索引设置为item和index
    只有一层循环可以直接写 wx:for="{{数组或对象}}"
    -->
    <view>
    <view
    wx:for="{{list}}"
    wx:for-item="item"
    wx:for-index="index"
    wx:key="id"
    >
    索引:{{index}}
    --
    数值:{{item.name}}
    </view>
    </view>
    <view>
    <view
    wx:for="{{list}}"
    wx:key="id"
    >
    索引:{{index}}
    --
    数值:{{item.name}}
    </view>
    </view>

    <!--
    对象循环
    1. wx:for="{{对象}}" wx:for-item="对象名称" wx:for-index="对象索引"
    -->
    <view>
    <view>对象循环</view>
    <view wx:for="{{person}}"
    wx:for-item="value"
    wx:for-index="key"
    wx:key="age"
    >
    属性:{{key}}
    --
    值:{{value}}
    </view>
    </view>


    <!-- 10 block
    1. 占位的标签
    2. 写代码的时候 可以看到这个标签存在
    3. 页面渲染 小程序会把它移除掉
    -->
    <view>
    <block
    wx:for="{{list}}"
    wx:for-item="item"
    wx:for-index="index"
    wx:key="id"
    class="my_list"
    >
    索引:{{index}}
    --
    数值:{{item.name}}
    </block>
    </view>
    <!-- 条件渲染
    1. <view wx:if="{{true}}">隐藏</view>
    2. if嵌套条件
    wx if
    wx elif
    wx else
    2. hidden
    1.hidden
    -->
    <view>
    <view>条件渲染</view>
    <view wx:if="{{true}}">隐藏</view>
    <view wx:if="{{flase}}">隐藏</view>

    <view wx:if="{{flase}}">1</view>
    <view wx:elif="{{flase}}">2</view>
    <view wx:else>3</view>

    <view>-------------</view>
    <view hidden> hidden</view>
    </view>