【微信小程序系列01】微信小程序（一）第一章、第二章、第三章

第一章：微信小程序结构目录

小程序框架的⽬标是通过尽可能简单、⾼效的⽅式让开发者可以在微信中开发具有原⽣APP体验的服 务。

小程序框架提供了⾃⼰的视图层描述语⾔ WXML 和 WXSS ，以及 JavaScript ，并在视图层与逻 辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

1.1 小程序文件结构和传统web对比

	传统web	微信小程序
结构	HTML	WXML
样式	CSS	WXSS
逻辑	Javascript	Javascript
配置	无	json

5.2 基本的项目目录

第二章：小程序配置文件

⼀个小程序应⽤程序会包括最基本的两种配置⽂件。⼀种是全局的 app.json 和 ⻚⾯⾃⼰的 page.json **注意：**配置文件中不能出现注释

2.1 全局配置文件app.json

app.json 是当前⼩程序的全局配置，包括了小程序的所有⻚⾯路径、界⾯表现、⽹络超时时间、底部 tab 等。普通快速启动项⽬⾥边的 app.json 配置

{
  "pages": [
    "pages/index/index",
    "pages/getOpenId/index",
    "pages/getMiniProgramCode/index",
    "pages/deployService/index",
    "pages/createCollection/index",
    "pages/uploadFile/index",
    "pages/selectRecord/index",
    "pages/updateRecord/index",
    "pages/updateRecordResult/index",
    "pages/updateRecordSuccess/index",
    "pages/sumRecord/index",
    "pages/sumRecordResult/index"
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "云开发 QuickStart",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json",
  "style": "v2"
}

字段的含义

1. pages 字段⸺⽤于描述当前⼩程序所有⻚⾯路径，这是为了让微信客⼾端知道当前你的⼩程序 ⻚⾯定义在哪个⽬录。

2. window 字段⸺定义⼩程序所有⻚⾯的顶部背景颜⾊，⽂字颜⾊定义等。

   1. navigationBarBackgroundColor：定义导航栏背景颜色

   2. navigationBarTitleText：定义导航栏标题

   3. navigationBarTextStyle：定义导航栏文字颜色

   4. enablePullDownRefresh：下拉刷新，默认关闭

   5. backgroundTextStyle：下拉刷新时，小圆点的字体颜色 light：透明 dark：灰色

   6. backgroundColor：下拉框背景颜色

      "window": {
          "backgroundColor": "#F6F6F6",
          "backgroundTextStyle": "dark",
          "navigationBarBackgroundColor": "#0094ff",
          "navigationBarTitleText": "我的应用",
          "navigationBarTextStyle": "white",
          "enablePullDownRefresh":true 
        }
      

3. 完整的配置信息请参考 app.json配置https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

Tabbar属性

1. list：tab 的列表，最少 2 个、最多 5 个 tab
   1. pagePath：路径
   2. text：文字
   3. iconPath：未被选中的图片
   4. selectedIconPath：被选中时的图片
2. **color：**tab 上的文字默认颜色，仅支持十六进制颜色
3. **selectedColor：**tab 上的文字选中时的颜色，仅支持十六进制颜色
4. **backgroundColor：**tab 的背景色，仅支持十六进制颜色
5. **borderStyle：**tabbar 上边框的颜色， 仅支持 black / white，默认为black
6. **position：**tabBar 的位置，仅支持 bottom / top，默认为bottom
7. **custom：**自定义 tabBar

 "tabBar": {
    "color": "0094ff",
    "selectedColor": "ff9400",
    "backgroundColor": "ff5533",
    "borderStyle": "white",
    "position": "top",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "icon/_home.png",
      "selectedIconPath": "icon/home.png"
    },
      {
        "pagePath": "pages/img/img",
        "text": "图片",
        "iconPath": "icon/_img.png",
        "selectedIconPath": "icon/img.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "icon/_my.png",
        "selectedIconPath": "icon/my.png"
      },
      {
        "pagePath": "pages/search/search",
        "text": "搜索",
        "iconPath": "icon/_search.png",
        "selectedIconPath": "icon/search.png"
      }
  ]
  }

2.2 页面配置文件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	是否全局开启下拉刷新。
onReachBottomDistance	Number	50	⻚⾯上拉触底事件触发时距⻚⾯底部距离，单位为px
disableScroll	Boolean	false	设置为 true 则⻚⾯整体不能上下滚动；只在⻚⾯配置中有 效，⽆法在 app.json 中设置该项

2.3 sitemap配置-了解

⼩程序根⽬录下的 sitemap.json ⽂件

sitemap 配置 | 微信开放文档 (qq.com)

用于配置⼩程序及其⻚⾯是否允许被微信索引

微信现已开放小程序内搜索，开发者可以通过 sitemap.json 配置，或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中。 爬虫访问小程序内页面时，会携带特定的 user-agent：mpcrawler 及场景值：1129。需要注意的是，若小程序爬虫发现的页面数据和真实用户的呈现不一致，那么该页面将不会进入索引中

第三章：模板语法

WXML（WeiXin Markup Language）是框架设计的⼀套标签语⾔，结合基础组件、事件系统，可以构 建出⻚⾯的结构。

<!--
    1、text相当于以前web中的span标签 行内元素 不会换行
    2、view标签相当于以前的div标签 块级元素 会换行
-->
<text>1</text>
<text>2</text>
<view>1</view>
<view>2</view>

3.1 数据绑定

<!--pages/demo03/demo03.wxml-->
<!--
    1、text相当于以前web中的span标签 行内元素 不会换行
    2、view标签相当于以前的div标签 块级元素 会换行
    3、checkbox就是以前的复选框标签
-->
<text>1</text>
<text>2</text>
<view>1</view>
<view>2</view>

<!-- 1、字符串-->
<view>{{msg}}</view>
<!--2、数字类型-->
<view>{{num}}</view>
<!--3、boolean类型-->
<view>是否是伪娘：{{isGirl}}</view>
<!--4、object类型-->
<view>{{person.age}}</view>
<view>{{person.height}}</view>
<view>{{person.weight}}</view>
<view>{{person.name}}</view>
<!--5、在标签的属性中使用-->
<view data-num="{{num}}">自定义属性</view>

<!--
    6、使用boolean类型充当属性
       字符串和花括号之间一定不要存在空格，否则会导致识别失败
       以下写法就是错误的：
       <checkbox checked=" {{isChecked}}"></checkbox>
-->
<view>
    <checkbox checked="{{isChecked}}"></checkbox>
</view>

3.1.1 普通写法

.wxml

<view> {{ message }} </view>

.javascript

Page({
  data: {
    message: 'Hello MINA!'
 }
})

3.1.2 组件属性

.wxml

<view id="item-{{id}}"> </view>

.javascript

Page({
  data: {
    id: 0
 }
})

3.1.3 boolean类型

不要直接写 checked=“false”，其计算结果是一个字符串

.wxml

<checkbox checked="{{false}}"> </checkbox>

实例：

.wxml

<!-- 1、字符串-->
<view>{{msg}}</view>
<!--数字类型-->
<view>{{num}}</view>
<!--boolean类型-->
<view>是否是伪娘：{{isGirl}}</view>
<!--object类型-->
<view>{{person.age}}</view>
<view>{{person.height}}</view>
<view>{{person.weight}}</view>
<view>{{person.name}}</view>
<!--在标签的属性中使用-->
<view data-num="{{num}}">自定义属性</view>

.javascript

Page({
    data: {
        msg:"hello mina",
        num:10000,
        isGirl:false,
        person:{
            age:18,
            height:180,
            weight:200,
            name:"富婆"
        }
    },
}

3.2 运算

<!--
    运算=》表达式
        1.可以在花括号中加入表达式--“语句”
        2、表达式   指的是一些简单 运算 数字运算 字符串拼接 逻辑运算。。
            1.数字的加减
            2.字符串的拼接
            3.三元表达式
         3、语句
            1.复杂代码段
                1.if else
                2.switch
                3.do while
                4.for...
-->
<view>{{1+1}}</view>
<view>{{'1'+'22'}}</view>
<view>{{10%2===0?'偶数':'奇数'}}</view>

3.2.1 三元运算

.wxml

<view hidden="{{flag ? true : false}}"> Hidden </view>

3.2.2 算术运算

<view hidden="{{flag ? true : false}}"> Hidden </view>

Page({
  data: {
    a: 1,
    b: 2,
    c: 3
 }
})

3.2.3 逻辑判断

<view wx:if="{{length > 5}}"> </view>

3.2.4 字符串运算

<view>{{"hello" + name}}</view>

Page({
  data:{
    name: 'MINA'
 }
})

3.2.5 注意

花括号和引号之间如果有空格，将最终被解析成为字符串

3.3 列表渲染

3.3.1 wx:for

<!--8、列表循环
        1. wx:for="{{数组或者对象}}}"
        2. wx:for-item="循环项的名称"
        3. wx:for-index="循环项的索引"
        4. wx:key="唯一的值" 用来提高列表渲染的性能
            1.wx:key 绑定一个普通的字符串的时候，那么这个字符串名称肯定是循环数组对象中的唯一属性
            2.wx:key="*.this"  表示你的数组是一个普通的数组  *this表示是循环项
                [1,2,3,4,5]
                ["11","ss"]
             3.当出现数组的嵌套循环的时候，尤其要注意以下绑定的名称不要重名 wx:for-item="item" wx:for-index="index"
             4.默认情况下我们不写wx:for-item="item" wx:for-index="index"小程序也会把循环项的名称和索引项的名称写为item和index，只有一层循环的话，wx:for-item="item" wx:for-index="index"可以省略

-->
<view>
    <view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="id">
        索引：{{index}}
        --
        值：{{item.name}}
    </view>
</view>

<!--9、对象循环
        1.wx:for="{{对象}}" wx:for-item="{{对象的值}}" wx:for-index="{{对象的属性}}"
        2.循环对象的时候，最好把item和index的名称都修改一下
-->
<view>
    <view>对象循环</view>
    <view wx:for="{{person}}" wx:for-item="value" wx:for-index="key" wx:key="name">
        属性：{{key}}
        --
        值：{{value}}
    </view>
</view>

list:[
    {
        id:0,
        name: "猪八戒"
    },
    {
        id:1,
        name: "天蓬元帅"
    },
    {
        id:2,
        name:"悟能"
    }
]

项的变量名默认为 item

wx:for--item 可以指定数组当前元素的变量名

下标变量名默认为 index

wx:for--index 可以指定数组当前下标的变量名

wx:key ⽤来提⾼数组渲染的性能

wx:key 绑定的值 有如下选择

1. string 类型，表⽰ 循环项中的唯⼀属性 如

   list:[{id:0,name:"炒饭"},{id:1,name:"炒面"}]
   wx:key="id"
   

2. 保留字 *this ，它的意思是 item 本⾝ ，*this 代表的必须是 唯⼀的字符串和数组。

   list:[1,2,3,4,5]
   wx:key="*this"
   

代码：

<view wx:for="{{array}}" wx:key="id">
 {{index}}: {{item.message}}
</view>

Page({
  data: {
    array: [{
      id:0,
      message: 'foo',
   }, {
      id:1,
      message: 'bar'
   }]
 }
})

3.3.2 block

<!--10、block
        1.占位符的标签
        2.写代码的时候可以看到这个标签存在
        3.页面渲染 小程序会把它移除掉
        4.使用场景：当你要循环某些数据，或者要渲染某些内容时，如果不想额外的加一层外边的标签，此时就会用上block标签来占位
-->
<view>
    <block wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="id" class="my_list">
        索引：{{index}}
        --
        值：{{item.name}}
    </block>
</view>

渲染⼀个包含多节点的结构块 block最终不会变成真正的dom元素

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

3.4 条件渲染

<!--
    11、条件渲染
        1.wx:if="{{true/false}}"
        2. if,else if,else
            wx:if
            wx:elif
            wx:else
         3. hidden
            1. 在标签上直接加入属性hidden
            2. hidden={{true/false}}
         4. 什么场景下用哪个
            1. 当标签不是频繁的切换显示 优先使用 wx:if
                直接把标签从页面结构中移除
            2. 当标签是频繁地切换显示 优先使用 hidden
                通过添加样式的方式来切换显示
                hidden属性不要和样式display一起使用
-->
<view>
    <view>条件渲染</view>
    <view wx:if="{{true}}">显示</view>
    <view wx:if="{{false}}">隐藏</view>

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

    <view>------------</view>
    <view hidden>hidden</view>
    <view hidden="{{true}}">hidden</view>
</view>

3.4.1 wx:if

在框架中，使⽤ wx:if="{{condition}}" 来判断是否需要渲染该代码块：

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

3.4.2 hidden

<view hidden="{{condition}}"> True </view>

类似 wx:if

频繁切换 ⽤ hidden

不常使⽤ ⽤ wx:if