微信小程序（WXML模板语法、WXSS模板样式、全局和局部配置、网络数据请求）

简介

黑马程序员，学习记录
视频链接：黑马程序员前端微信小程序开发教程，微信小程序从基础到发布全流程_企业级商城实战

---

---------- WXML模板语法 ----------

1. 数据绑定

• 数据绑定的基本原则
• 在data中第一数据
• 在WXML中使用数据、
• Mustache语法格式 {{}}

<text>{{info}}</text>
<image src="{{imgSrc}}" alt="" mode="widthFix"></image>

  data: {
      info:'hello wechat',
      imgSrc: '/images/1.jpg'
  }

• 三元运算

  data: {
      info:'hello wechat',
      imgSrc: '/images/1.jpg',
      randomNum1: Math.random() * 10
  },

<view>
  {{randomNum1 >=5?'数字大于或等于5':'数字小于5'}}
</view>

• 算数运算

<view>
  {{randomNum2*100}}
</view>

  data: {
      info:'hello wechat',
      imgSrc: '/images/1.jpg',
      randomNum1: Math.random() * 10,
      randomNum2: Math.random().toFixed(2)
  },

2. 事件绑定

2.1 常用事件

2.2 属性列表

2.3 target 和 currenttarger的区别

2.4 bindtap的语法格式

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

  btnTapHandler(e){
    console.log(e);
  },

2.5 事件处理函数中给data赋值

• 事件处理函数

• this.setData({
    ...
  })
  

<button type="primary" bindtap="CountChange">+1</button>

  // +1按钮得到点击事件处理函数
  CountChange(e){
    this.setData({
      count: this.data.count + 1
    })
  },

2.6 事件传参

• 不能在绑定事件的同时为事件处理函数传递对象
• 使用 data-* ( *是参数名)
• 在获取时使用固定语法 e.target.dataset.* ( *是参数名)

<button type="primary" bindtap="btnTap2" data-info="{{3}}">+2</button>

  btnTap2(e){
    // console.log(e);
    this.setData({
      count: this.data.count + e.target.dataset.info
    })
  },

2.7 bindinput 语法格式

• 用来响应文本框的输入事件
• e.detail.value 用来获取文本框最新的值

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

 // input 输入框的事件处理函数
  inputHandler(e){
    console.log(e.detail.value);
  },

2.8 文本框和data之间数据同步

  data: {
      msg:'你好'
  },

<input value="{{msg}}" bindinput="inputHandler"></input>

  // input 输入框的事件处理函数
  inputHandler(e){
    // console.log(e.detail.value);
    this.setData({
      msg: e.detail.value
    })
  },

input{
  border: 1px solid #eee;
  margin: 5px;
  padding: 5px;
  border-radius: 3px;
}

3. 条件渲染

3.1 wx:if

  data: {
      type:1
  },

<!-- 条件渲染 -->
<view wx:if="{{type === 1}}">男</view>
<view wx:elif="{{type === 2}}">女</view>
<view wx:else>保密</view>

3.2 结合<block>使用ws:if

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

3.3 hidden

  data: {
      flag:true
  },

<view hidden="{{flag}}">
  条件为true时 隐藏 元素 否则显示
</view>

• wx:if 和 hidden对比

4. 列表渲染

4.1 wx:for

• 它的索引和内容 默认 用 index 和 item 表示

  data: {
      arr1:['苹果','华为','小米']
  },

<view wx:for="{{arr1}}">
  索引是：{{index}}，内容是: {{item}}
</view>

• 手动指定索引和当前项的变量*
• wx:for-index 指定索引名
• wx:for-item 指定内容名

<view wx:for="{{arr1}}" wx:for-index='idx' wx:for-item='itemName'>
  索引是：{{idx}}，内容是: {{itemName}}
</view>

4.2 wx:key

• 绑定key值时直接写 不用mustache语法

    userList: [
      { id: 1, name: '小红' },
      { id: 2, name: '小黄' },
      { id: 3, name: '小白' }
    ]

<view wx:for="{{userList}}" wx:key="id">
  {{item.name}}
</view>

---------- WXSS模板样式 ----------

1. wxss 和 css的关系

2. rpx

• rpx 和 px 之间的单位换算*

  1rpx = 0.5px = 1物理像素

  建议用iphone6设计

3. 样式

• 样式导入

@import "/common/common.wxss";

• 全局样式 和 局部样式

  app.wxss 为全局样式

  遵循 就近原则 （局部样式权重 >= 全局样式权重 时才会覆盖）！！！

---------- 全局配置 ----------

1. window节点常用配置项

• app.json 中

  "window":{
    "backgroundTextStyle":"light", // 加载时小圆点的样式   只有 light  和 dark ！！！！！
    "navigationBarBackgroundColor": "#2b4b6b",// 导航栏背景色
    "navigationBarTitleText": "ZKY",// 导航栏标题
    "navigationBarTextStyle":"white", // 导航栏标题颜色		这个只有 black 和 white！！！！
    "enablePullDownRefresh": true, // 全局开启下拉刷新  每个页面都有
    "backgroundColor": "#efefef",// 设置背景颜色
    "onReachBottomDistance": 50,// 设置上拉触底距离 px
  },

2. tabbar

• app.json 中 pagePath 和 text 必填

"tabBar": {
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "/images/tabs/home.png",
      "selectedIconPath": "/images/tabs/home-active.png"
    },
    {
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "/images/tabs/message.png",
      "selectedIconPath": "/images/tabs/message-active.png"
    },
    {
      "pagePath": "pages/contact/contact",
      "text": "联系我们",
      "iconPath": "/images/tabs/contact.png",
      "selectedIconPath": "/images/tabs/contact-active.png"
    }
  ]
  },

• 组成部分

• 节点的配置项

• 每个tab项的配置选项

3. 页面（局部）配置

• 常用配置项

---------- 网络数据请求 ----------

• 只能请求 HTTPS 类型的接口
• 必须将接口的域名添加到信任列表中
• 域名不能使用 IP 和 localhost
• 必须经过ICP认证
• 一个月最多改5次

1. 发送get请求 和 post请求

• wx.request()

<button bindtap="getInfo">发起get请求</button>

<button bindtap="postInfo">发起post请求</button>

  getInfo(e) {
    wx.request({
      url: 'https://www.escook.cn/api/get',
      method: 'GET',
      data: {
        name: 'zs',
        age: 20
      },
      success: (res) => {
        console.log(res.data);
      }
    })
  },
  postInfo(e) {
    wx.request({
      url: 'https://www.escook.cn/api/post',
      method: 'POST',
      data: {
        name: 'lisi',
        age: 33
      },
      success: (res) => {
        console.log(res.data);
      }
    })
  },

2. 页面刚加载时获取数据

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getInfo()
    this.postInfo()
  },

3. 跳过request合法域名校验

• 勾上就行 只能在开发和调试中使用！！！！！！

4. 关于跨域和Ajax的说明

----------- 总结 -------------