快速搭建微信小程序：模板和配置详细介绍

1、小程序 – 模板与配置

1.1 WXML模板语法

数据绑定

• 在data中定义数据

Page({
    data:{
        //字符串类型数据
        info:'init data',
        //数组类型数据
        msgList:[{msg:'hello'},{nsf:'world'}]
    }
})

• 在WXML中使用数据

<view>{{ 要绑定的数据名称 }}</view>
//Mustache语法(双大括号)
//应用场景：绑定内容,绑定属性,运算（三元运算、算术运算等)

事件绑定

• 事件是渲染层到逻辑层的通讯方式

• 小程序中常用事件

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

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

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

• 事件绑定语法格式：

//wxml
<button type="primary" bindtap="btnTapHandler">按钮</button>

//js
Page({
  btnTapHandler(e){
    console.log(e)
  },  
})

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

Page({
  data:{
    count:0
  },
  changeCount(){
    this.setData({
      count:this.data.count + 1//修改
    })
  }
})

• 事件传参

//wxml
<button bindtap = "btnHandler" data-info="{{2}}">事件传参</button>
//通过data-*自定义属性传参

//js
btnHandler(event){
    console.log(event.target.dataset.info)
}
//通过event.target.dataset.参数名获取到具体参数的值

• bindinput语法格式
  • 通过input事件来响应文本框的输入事件

//wxml
<input bindinput="inputHandler"></input>

//js
Page({
  inputHandler(e){
    console.log(e.detail.value)
  }
})

数据同步

• 步骤

1. 定义数据(data数据)
2. 渲染结构(wxml)
3. 美化样式(wxss)
4. 绑定input事件处理函数(js函数)

条件渲染

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

//要一次性控制多个组件的展示与隐藏，可以使用一个<block> </block>标签将多个组件包装起来，<block>并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染。
<block wx: if="{{true}}">
    <view> view1 </view>
	<view> view2 </view>
</block>

//hidden也能控制元素的显示与隐藏
<view hidden="{{condition}}">条件为true隐藏，条件为 false显示</view>

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

列表渲染

<view wx:for="{{arr}}">
  索引是：{{index}}, item项：{{item}}
</view>
//默认情况下，当前循环项的索引用index表示;当前循环项用item表示
//也可以手动指定索引和当前项的变量名 wx:for-index="" wx:for-item=""

//小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的key值，从而提高渲染的效率
//wxml
<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>
//js
Page({
  data:{
    userList:[
      {id:1,name:'小红'},
      {id:2,name:'小黄'},
      {id:3,name:'小白'}
    ]
  },
})

1.2 WXSS模板样式

rpx

• rpx (responsive pixel）是微信小程序独有的，用来解决屏适配的尺寸单位

• rpx的实现原理：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕，在宽度上等分为750份(即:当前屏幕的总宽度为750rpx)

  • 在较小的设备上,1rpx所代表的宽度较小

  • 在较大的设备上， 1rpx所代表的宽度较大

• 小程序在不同设备上运行的时候，会自动把rpx的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配

设备	rpx换算px (屏幕宽度750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

• 开发中建议采用iPhone 6作为视觉设计稿

样式导入

• 使用WXSS提供的import语法。可以导入外联的样式表

@import "demo.wxss"

全局样式

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

局部样式

• 在页面的.wxss文件中定义的样式为局部样式，只作用于当前页面

• 注意:

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

1.3 全局配置

• 小程序根目录下的 app.json文件是小程序的全局配置文件。常用的配置项如下:
  • pages：记录当前小程序所有页面的存放路径
  • window：全局设置小程序窗口的外观
  • tabBar：设置小程序底部的tabBar效果
  • style：是否启用新版的组件样式

window

• 常用配置项

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

tabBar

• tabBar是移动端应用常见的页面效果,用于实现多页面的快速切换，分为底部和顶部两类
• 只能配置最少2个，最多5个tab页签；渲染顶部tabBar时并不显示icon

• 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

1.4 页面配置

• 小程序中，每个页面都有自己的.json配置文件，用来对当前页面的窗口外观、页面效果等进行配置
• 当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准
• 常用配置项：(同全局配置项)

属性	类型	默认值	描述
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

1.5 网络数据请求

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

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

• 注意：

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

• 发起GET请求

wx.request({
      url: 'https://www.escook.cn/api/get', //请求的接口地址，必须是基于https协议
      method:'GET',  //请求的方式
      data:{         //发送到服务器的数据
        name:'xyk',
        age:21
      },
      success:(res=>{  //请求成功之后的回调函数  
        console.log(res)
      })
    })

• 发起POST请求

wx.request({
      url: 'https://www.escook.cn/api/post', //请求的接口地址，必须是基于https协议
      method:'POST',  //请求的方式
      data:{         //发送到服务器的数据
        name:'xyk',
        age:21
      },
      success:(res)=>{  //请求成功之后的回调函数  
        console.log(res)
      }
    })

• 页面加载时请求数据

//生命周期函数
onLoad(options) {
  this.getInfo()
  this.postInfo()
},

• 跳过合法域名检验
  • 我们可以在微信开发者工具中，临时开启「开发环境不校验请求域名、TLS版本及 HTTPS证书」选项，跳过request 合法域名的校验
  • 仅限在开发与调试阶段使用

• 关于跨域和Ajax
  • 跨域问题只存在于基于浏览器的Web开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序中不存在跨域的问题
  • Ajax技术的核心是依赖于浏览器中的XMLHttpRequest这个对象，由于小程序的宿主环境是微信客户端，所以小程序中不能叫做“发起Ajax请求”，而是叫做“发起网络数据请求”