【微信小程序 事件绑定】

事件绑定

条件渲染
1. block包裹性容器：条件成立渲染

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

2. wx:if：动态创建移除元素控制展示与隐藏

wx:if 搭配 wx:elif || wx:else

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

	值：data:   type:2
	

3. hidden：控制展示与隐藏

<view hidden="{
   {flag}}">true隐藏，false显示</view>

4. wx:if 和 hidden对比

a. wx:if 动态创建和移除元素，控制元素展示 / 隐藏 场景：控制条件复杂时使用
b. hidden 切换样式控制展示与隐藏，节点一直存在场景：频繁切换

列表渲染

1. wx:for 指定数组，进行循环渲染
2. wx:for-index 手动指定索引名
3. wx:for-item 手动指定当前项名
4. wx:key="id" 提高渲染效率

data: {
     arr1: ['苹果','华为','小米']  }
<view wx:for="{
   { arr1 }}"  wx:key="id">
      索引是 {
   {
    index }} 当前项是： {
   {
    item }}
</view>
 
<view wx:for="{
   {arr}}" wx:for-index="i" wx:for-item="m">
      索引是 {
   {
    i }} 当前项是： {
   {
    m }}
</view>

模板样式：rpx

• 布局使用 flex 布局，尺寸单位使用 rpx
  ( responsive pixel )是微信小程序独有的，用来解决屏适配的尺寸单位。

• 实现原理：不同设备屏幕的大小不同，实现屏幕的自动适配， rpx 把所有设备的屏幕，在宽度上等分为 750 份, 1份就是1 rpx 。较小(大)的设备上，1 rpx 所代表的宽度较小(大)。

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

名称	作用
pages	当前小程序所有页面存放路径，如: “pages/index/index”
window	窗口外观

导航栏、背景区、页面主体区：
style：是否启用新版组件样式
局部样式：当前页面配置json文件，会覆盖全局的配置

属性	作用
“navigationBarTitleText”:“微信小程序”	导航栏显示的标题
“navigationBarBackgroundColor”: “#fff”	导航栏背景色:一定要使用16进制颜色表示法
“backgroundTextStyle”:“light”	下拉loading的样式 dark/light
“navigationBarTextStyle”:“black”	导航栏标题颜色: black/white (只有黑白两种颜色)
“backgroundColor”: “#efefef”	下拉窗口的背景色
“enablePullDownRefresh”: true	开启下拉刷新
“onReachBottomDistance”: 50	上拉触底的距离,获取下页数据

tabBar：底部效果

1. backgroundColor ： tabBar背景色
2. borderStyle：上边框的颜色
3. selectedColor：选中时文字的颜色
4. color：未选中颜色

"tabBar":{
     // 与window同级
  "list":[{
   
     "pagePath":"页面路径",
     "text":"底部文字",
     "iconPath":"未激活图标地址",
     "selectedIconPath":"激活图标地址"
},{
   },....]},

网络数据请求

• 配置request合法域名(只支持https;不能ip或本地;必须ICP备案)
  小程序管理后台 -> 开发管理 -> 开发设置 -> 服务器域名 -> 修改 request 域名

1. 发起GET请求：wx.request()

2. 发起POST请求 ：wx.request() ------------ method: 'POST ',

onTapGet () {
   
  wx.request({
   
     url: 'https://... .../api/get',   // 在request合法域名已配置
     method: 'GET',
     data: {
     name: 'zs', age: 22  },  // 请求参数
  success: (res) => {
                     // 请求成功的回调
     console.log(res)
}})

页面刚加载时请求数据：onLoad

// 生命周期函数-->监听页面加载-->初始化页面的数据
	onLoad: function (options) {
   
	    this.onTapGet()  // 通过 this 调用上述方法
	    this.onTapPost()
	},

跨域 和 Ajax 的说明

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

页面导航

声明式导航:

1. 导航tabBar页面：switchTab
2. 非 tabBar 页面：navigate

	导航tabBar页面：
	<navigator url="/页面路径" open-type="switchTab">链接文字</navigator>
	
	非 tabBar 页面：
	<navigator url="/页面路径" (open-type="navigate")>链接文字</navigator>

后退导航：navigateBack

<navigator open-type="navigateBack" (delta="1")>返回上一页</navigator>

编程式导航

• wx.switchTab() 方法：跳转到 tabBar 的页面
• wx.navigateTo() 方法：跳转到非 tabBar 的页面
• wx.navigateBack() 方法：返回上一页面或多级页面

 <button bindtap="goto"