2 模板与配置

数据绑定

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

在 WXML 中使用数据，把data中的数据绑定到页面中渲染，使用 Mustache 语法（双大括号）将变量包起来

事件绑定

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

事件对象的属性列表

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

bindtap

<view class="container">
    <button type="primary" bind:tap="btnTapHandler">按钮</button>
    <button type="primary" bind:tap="changeCount">+1</button>
    <button type="primary" bind:tap="setCount" data-info="{{10}}">设置值</button>  
</view>

Page({
  data: {
    count: 0
  },
  changeCount() {
    this.setData({
      count: this.data.count + 1
    })
  },
  setCount(e) {
    this.setData({
      count: e.target.dataset.info
    })
  },
  btnTapHandler(e) {
    console.log(e)
  }
})

bindinput

<input value="{{msg}}" bind:input="inputHandler" type="text"/>

inputHandler(e) {
  console.log(e.detail.value);
  this.setData({
    msg: e.detail.value
  })
}

条件渲染

区别：是否渲染和渲染后是否展示

<view wx:if="{{type == 1}}">男</view>
<view wx:elif="{{type == 2}}">女</view>
<view wx:else>其他</view>
 
<block wx:if="{{true}}">
  <view>view1</view>
  <view>view2</view>
</block>
 
<view hidden="{{false}}">是否隐藏</view>

列表渲染

<swiper class="swiper_container" indicator-dots autoplay interval="2000">
  <swiper-item wx:for="{{imgUrlArr}}">
    <image src="{{item}}"/>
  </swiper-item>
</swiper>

使用 wx:for-index 可以指定当前循环项的索引的变量名
使用 wx:for-item 可以指定当前项的变量名
使用 wx:key 可以指定唯一的 key 值，提高渲染效率（默认为index）

模板样式

rpx 尺寸单位

屏幕总宽度为750rpx

@import 样式导入

@import 'common.wxss'

全局样式和局部样式

当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式
当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式

配置文件

全局配置文件 app.json

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

小程序窗口组成部分

navigationBar 导航栏
Background 下拉显示背景
主体部分

window配置项

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

tabBar配置项

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

每个 tab 项的配置选项

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

页面配置文件

对某些页面有特殊的窗口表现，使用页面级别的.json 配置文件。

当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准。

网络数据请求

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

要求：

域名只支持 https 协议
域名不能使用 IP 地址或 localhost
域名必须经过 ICP 备案
服务器域名一个月内最多可申请 5 次修改发送 GET

wx.request({
  url: 'url',
  method: 'GET',
  data: {
    'name': 'ls',
    'gender': '男'
  },
  success: (res) => {
    console.log(res);
  }
})

Quartz

探索