模板与配置

一、WXML 模板语法

1. 数据绑定

1.1 在 data 中定义页面的数据

• 在页面对应的 .js 文件中，把数据定义到 data 对象中。

1.2 Mustache 语法的格式

• 把 data 中的数据绑定到页面中渲染，使用 Mustache 语法（双大括号）将变量包起来即可。语法格式为：
  • <view>{{要绑定的数据名称}}</view>

2. 事件绑定

2.1 事件的定义

• 事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。

2.2 常用的事件

• 类型	绑定方式	事件描述
  tap	bindtap 或 bind:tap	手指触摸后马上离开，类似于 HTML 中的 click 事件
  input	bindinput 或 bind:input	文本框的输入事件
  change	bindchange 或 bind:change	状态改变时触发

2.3 事件对象的属性列表

• 当事件回调触发的时候，会收到一个事件对象 event，它的详细属性如下：

  • 属性	类型	说明
    type	String	事件类型
    timeStamp	Integer	页面打开到触发事件所经过的毫秒数
    target	Object	触发事件的组件的一些属性值集合
    currentTargett	Object	当前组件的一些属性值集合
    detail	Object	额外的信息
    touches	Array	触摸事件，当前停留在屏幕中的触摸点信息的数组
    changedTouches	Array	触摸事件，当前变化的触摸点信息的数组

2.4 target 和 currentTtarget 的区别

• target 是触发该事件的源头组件，而 currentTarget 则是当前事件所绑定的组件。

2.5 bindtap 的语法格式

• 语法：<button type="primary" bindtap="btnTapHandler（函数名字）">按钮</button>

2.6 在事件处理函数中为 data 中的数据赋值

• 通过调查 this.setData(dataObject) 的方法，可以给页面 data 中的数据重新赋值。

2.7 事件传参

• 小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数

• 可以为组件提供 data-* 自定义属性传参，其中 * 代表的是参数的名字，如：

  • <button bindtap="btnHandler" data-info={{2}}>事件传参</button>
  • info 会解析为参数的名字
  • 数值 2 会被解析为参数的值

• 在事件处理函数中，通过 event.target.dataset.参数名 即可获取到具体参数的值，如：

  • btnHandler(event){
        //dataset 是一个对象，包含了所有通过 data-* 传递过来的参数项
        console.log(event.target.dataset)
        //通过 dataset 可以访问到具体参数的值
        console.log(event.target.dataset.info)
    }
    

2.8 bindinput 的语法格式

• 语法：<input bindinput="inputHandler"></input>

3.条件渲染

3.1 wx:if

• 在小程序中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块，如：

  • <view wx:if="{{condition}}">True </view>

• 也可以使用 wx:elif 和 wx:else 来添加 else 判断：

  • <view wx:if="{{type==1}}">男</view>
    <view wx:elif="{{type==2}}">女</view>
    <view wx:else">保密</view>
    

3.2 结合<block> 使用 wx:if

• 如果要一次性控制多个组件的展示与隐藏，可以使用一个<block></block>标签将多个组件包装起来，并在<block>标签上使用wx:if 控制属性，如下：

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

  • 注意：<block>并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染。

3.3 hidden

• 在小程序中，直接使用 hidden=“{{condition}}” 也能控制元素的显示与隐藏，如：
  • <view hidden="{{condition}}">条件为 true 隐藏，条件为 false 显示 </view>

3.4 wx:if 与 hidden 的对比

• 运行方式不同
  • wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏
  • hidden 以切换样式的方式 （display:none/block;），控制元素的显示与隐藏
• 使用建议：
  • 频繁切换时，建议使用 hidden
  • 控制条件复杂时，建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换

4. 列表渲染

4.1 wx:for

• 通过 wx:for 可以根据指定的数组，循环渲染重复的组件结构，语法如下：

  • <view wx:for="{{array}}">
    索引是：{{index}} 当前项是：{{item}}
    </view>
    

  • 默认情况下，当前循环项的索引用 index 表示；当前循环项用 item 表示。

4.2 手动指定索引和当前项的变量名*

• 使用 wx:for-index 可以指定当前循环项的索引的变量名

• 使用 wx:for-item 可以指定当前项的变量名

• 示例：

  • <view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
    索引是：{{idx}} 当前项是：{{itemName}}
    </view>
    

4.3 wx:key 的使用

• 类似于 Vue 列表渲染中的 :key ，小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的 key 值，从而提高渲染的效率，如下：

  • data: {
     userList:[
      {id:1,name:'小红'},
       {id:2,name:'小狗'},
        {id:3,name:'小猫'}
     ]
    }
    
    <view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>
    

二、WXSS 模板样式

2.1 定义

• WXSS （WeiXin Style Sheets）是一套样式语言，用于美化 WXML 的组件样式，类似于网页开发中的 CSS

2.2 WXSS 与 CSS 的关系

• 与 css 相比，WXSS 扩展的特性有：
  • rpx 尺寸单位
  • @import 样式导入

2.3 rpx

• 定义：
  • rpx (responsive pixel) 是微信小程序独有的，用来解决屏幕适配的尺寸单位
• 实现原理：
  • 鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx 把所有设备的屏幕，在宽度上等分为 750 份（即：当前屏幕的总宽度为750rpx）
    • 在较小的设备上，1rpx 所代表的宽度较小
    • 在较大的设备上，1rpx 所代表的宽度较大
• rpx 与 px 之间的单位换算
  • 在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，等分为750rpx。则：
    • 750rpx = 375px = 750 物理像素
    • 1 rpx = 0.5 px = 1 物理像素
  • 官方建议：开发微信小程序时，设计师可以用 iPhone6 作为视觉稿的标准

2.4 样式导入

• @import 的语法格式：
  • @import 后跟需要导入的外联样式表的相对路径，用；表示语句结束。

2.5 全局样式

• 定义在 app.wxss 中的样式为全局样式，作用于每一个页面

2.6 局部样式

• 在页面的 .wxss 文件中定义的样式为局部样式，只作用于当前页面。
• 注意：
  • 当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式
  • 当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局样式

三、全局配置

1. 全局配置文件及常用的配置项

1.1 全局配置文件

• 小程序根目录下的 app.json 文件是小程序的全局配置文件

1.2 常用的配置项

• pages
  • 记录当前小程序所有页面的存放路径
• window
  • 全局设置小程序窗口的外观
• tabBar
  • 设置小程序底部的 tabBar 效果
• style
  • 是否启用最新版本的组件样式

2.window

2.1 常用配置项

• 属性名	类型	默认值	说明
  navigationBarTitleText	String	字符串	导航栏标题文字内容
  navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色
  navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 black / white
  backgroudColor	HexColor	#ffffff	窗口的背景色
  backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 dark / light
  enablePullDownRefresh	Boolean	false	是否全局开启下拉刷新
  onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位为px

2.2 设置导航栏标题

• 设置步骤：app.json -> window-> navigationBarTitleText

2.3 设置导航栏的背景色

• 设置步骤：app.json -> window-> navigationBarBackgroundColor

2.4 设置导航栏的标题颜色

• 设置步骤：app.json -> window-> navigationBarTextStyle

2.5 全局开启下拉刷新功能

• 设置步骤：app.json -> window-> 把 enablePullDownRefresh 的值设置为 true

2.6 设置下拉刷新时窗口的背景色

• 设置步骤：app.json -> window->backgroudColor

2.7 设置下拉刷新时 loading 的样式

• 设置步骤：app.json -> window->backgroundTextStyle

2.8 设置上拉触底的距离

• 设置步骤：app.json -> window->onReachBottomDistance
  • 默认距离为 50 px

3. tabBar

• 定义：tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序中通常将其分为：
  • 底部 tabBar
  • 顶部 tabBar
    • 注意：
      • tabBar 中只能配置最少2个、最多5个tab标签
      • 当渲染顶部 tabBar 时，不显示 icon，只显示文本

3.1 tabBar 的 6 个组成部分

1. backgroundColor ：tabBar 的背景色
2. selectedIcoPath：选中时的图片路径
3. borderStyle：tabBar 上边框的颜色
4. iconPath：未选中时的图片路径
5. selectedColor：tab 上的文字选中时的颜色
6. color：tab 上文字的默认（未选中）颜色

3.2 tabBar 节点的配置项

• 属性	类型	必填	默认值	描述
  position	String	否	bottom	tabBar 的位置，仅支持 bottom / top
  borderStyle	String	否	black	tabBar 上边框的颜色，仅支持 black / white
  color	HexColor	否		tab 上文字的默认（未选中）颜色
  selectedColor	HexColor	否		tab 上的文字选中时的颜色
  backgroundColor	HexColor	否		tabBar 的背景色
  list	Array	是		tab 页签的列表，最少2个、最多5个 tab

3.3 每个 tab 项的配置选项

• 属性	类型	必填	描述
  pagePath	String	是	页面路径，页面必须在 pages 中预先定义
  text	String	是	tab 上显示的文字
  iconPath	String	否	未选中时的图标路径；当 position 为 top 时，不显示 icon
  selectedIconPath	String	否	选中时的图标路径；当 position 为 top 时，不显示 icon

四、页面配置

常用的配置项

• 属性名	类型	默认值	说明
  navigationBarTitleText	String		当前页面导航栏标题文字内容
  navigationBarBackgroundColor	HexColor	#000000	当前页面导航栏背景颜色
  navigationBarTextStyle	String	white	当前页面导航栏标题颜色，仅支持 black / white
  backgroudColor	HexColor	#ffffff	当前页面窗口的背景色
  backgroundTextStyle	String	dark	当前页面下拉 loading 的样式，仅支持 dark / light
  enablePullDownRefresh	Boolean	false	是否为当前页面开启下拉刷新
  onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位为px

五、网络数据请求

1.小程序中网络数据请求的限制

• 出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下两个限制：
  • 只能请求 HTTPS 类型的接口
  • 必须将接口的域名添加到信任列表中

2.配置 request 合法域名

• 配置步骤：登录微信小程序管理后台 -> 开发 -> 开发设置 -> 服务器域名 -> 修改 request 合法域名

3.发起 GET 请求

• 调用微信小程序提供的 wx.request() 方法，可以发起 GET 数据请求，示例代码如下：

  • wx.request({
        url:'https://www.escook.cn/api/get',   //请求的接口地址必须基于 https 协议
        method:'GET',   //请求方式
        data:{
            name:'pg',
            age:20
        },
        success:(res)=>{   //请求成功后的回调函数
            
        }
    })
    

4.发起 POST 请求

• 调用微信小程序提供的 wx.request() 方法，可以发起 POST 数据请求，示例代码如下：

  • wx.request({
        url:'https://www.escook.cn/api/get',   //请求的接口地址必须基于 https 协议
        method:'POST',   //请求方式
        data:{
            name:'pg',
            age:20
        },
        success:(res)=>{   //请求成功后的回调函数
            
        }
    })
    

5.在页面刚加载时请求数据

• 在很多情况下，我们需要在页面刚加载的时候，自动请求一些初始化的数据。此时需要在页面的 onLoad 事件中调取获取数据的函数，示例代码如下：

  • onLoad:function(options){
        this.getSwiperList()
        this.getGridList()
    }
    

6.跳过 request 合法域名校验

• 操作步骤：项目中的详情-> 本地设置 -> 不校验合法域名