微信小程序Day2学习笔记

学习目标

此笔记参考b站 黑马程序员微信小程序开发视频

D盘有文件写入权限问题，，今天换成了C盘，希望要撑住。。

1.WXML 模板语法

1.数据绑定 的基本原则

1. 在 data 中定义数据
2. 在 WXML中使用数据

2. 在 data 中定义数据

3. Mustache 语法的格式（差值表达式）

在 index.js 中 的data数据填写

Page({
  /**页面的初始数据 */
  data: {
    info:'hello world'
  },

在 index.wxml 中使用 <view> {{info}} </view>

4. Mustache 语法的应用场景

{{ }}

1. 绑定内容
2. 绑定属性
3. 运算（三元运算，算术运算等）

1. 动态绑定内容

2. 动态绑定属性

3. 三元运算

4. 算术运算

2. 事件绑定

1. 什么是事件

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

2. 什么是事件

3. 事件对象 的 属性列表

4. target 和 currentTarget 的区别

5. bindtap 的语法格式

在 index.wxml 中

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

在 index.js 中
与 data 同级，

 // 定义按钮的事件处理函数
  btnTapHandler(e){
    console.log(e)
  },

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

在 index.wxml 中

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

在 index.js 中
与 data 同级，

 //+1 按钮的点击事件处理函数
  CountChange(e){
    this.setData({
      count: this.data.count + 1
    })
    console.log('ok')
  },

7. 事件传参

在 index.wxml 中

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

在 index.js 中
与 data 同级，

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

8. bindinput 的语法格式

在 index.wxml 中

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

在 index.js 中
与 data 同级，

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

9. 实现 文本框 和 data 之间的数据同步

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

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

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

3. 条件渲染

1. wx:if

对应区域的 显示 和 隐藏

2. 结合 <block> 使用 wx:if

一次性控制多个组件的 显示 与 隐藏

shift + alt + ↓ 快速复制到下一行

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

block：避免在页面上渲出一些 不必要的节点

3. hidden

wx:if / hidden 都可以 控制组件的 显示 与 隐藏

4. wx:if 和 hidden的对比

wx:if ：创建、移出元素
hidden： 加样式

5. wx:for

index.json

data

array1:['苹果','华为','小米']

<!--列表渲染-->
<view wx:for="{{array1}}">
  索引是：{{index}}, item项是：{{item}}
</view>

6. 手动指定索引，和当前项的变量名*

不经常用，了解即可

7. wx:key 的使用

wx:for 提高渲染效率

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

2. WXSS 模板样式

1. 什么是 WXSS

wxss美化小程序中 组件样式

1. 什么是 rpx 尺寸单位

responsive pixel，解决屏适配的尺寸单位

2. rpx 与 px 之间的单位换算*

建议iPhone 6 做设计稿

2. 样式导入

1. 什么是样式导入

@import

wxml 加 class属性

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

wxss 点 . 代表 class

.username{
  color: red;
}

2. 全局样式

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

view{
  padding: 10rpx;
  margin: 10rpx;
  background-color: lightblue;
}

3. 局部样式

只在当前页面下的wxss进行修改

/* pages/test/test.wxss */
view{
  color: white;
}

权重：selector specificity
局部权重 = 全局权重，局部会覆盖全局

view:nth-child(1){
选择第一个view
}

3. 全局配置

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

2. 小程序窗口的组成部分

Window主要是配置 navigationBar的（）

3. 了解 window 节点常用的配置项

4. 设置导航栏的 标题

1. 设置导航栏的 背景色

2. 设置导航栏的 标题颜色

可选值只有：黑、白

5. 全局开启下拉刷新功能

1. 下拉刷新时 窗口的背景色

只有 light、dark

2. 设置 上拉触底 的距离

6. 什么是 tabBar

4. tabBar 的 6个组成部分

5. tabBar 节点的配置项

"tabBar": {
    "list": [
      {
      "pagePath": "pages/index/index",
      "text": "index"
      },
      {
        "pagePath": "pages/test/test",
        "text": "test"
      }
  ]},

6. 案例：配置 tabBar

tabBar的页面必须写在 pages前，不然不生效



与 data 同级

 "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"
    }
  ]},

7. 页面配置

1. 页面配置 和 全局配置 的关系

页面的特殊配置，以页面为准

2. 页面配置中 常用的配置项

一般不建议全局配置 enablePullDownRefresh = true
在需要使用的页面，配置即可

8. 网络数据请求

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

https，信任列表

2. 配置 request 合法域名

小程序管理后台：开发->开发设置->服务器域名 配置
确认填写无误，再提交。（有限制）

注意事项：

3. 发起 GET 请求

4. 发起 POST 请求

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

6. 跳过request 合法域名校验

只能在开发，调试阶段使用！

7. 跨域 和 Ajax 的说明

9. 案例 - 本地生活

1. 首页效果 以及 实现步骤

关闭当前项目 - 创建新的小程序项目，不使用云服务，语言JavaScript
project.config.json: setting： “checkSiteMap”: false （取消console中的警告）

在app.json中的pages 设置新页面，删除不需要的页面。

2. 配置导航栏效果

在app.json中的window 配置导航栏的背景颜色，文字大小，文字内容，文本颜色等等。。

3. 配置tabBar效果

4. 实现轮播图效果

通过接口获取

在 home.js 中设置存放轮播图数据的列表

创建一个获取轮播图数据的方法
调用 wx.request ，发起 get 请求，请求地址 url。
拿到数据之后，success 中，调用 this.setData({重新为data中的数据重新赋值})

页面一加载，就调用的函数

可以查看 appData中有没有数据

将图片放在项目中，直接使用

5. 实现九宫格效果

wxml

<!-- 九宫格区域 -->
<view class="grid-list">
  <view class="grid-item" wx:for="{{gridList}}" wx:key="id">
    <image src="{{item.icon}}"></image>
    <text>{{item.name}}</text>
  </view>
</view>

wxss

.grid-list{
  display: flex;  //flex 布局
  flex-wrap: wrap;  // 允许换行
  border-left: 1rpx solid #eee;  //左侧的边框
  border-top: 1rpx solid #eee;  // 上册的边框
}

.grid-item{
  width: 33.33%;  // 三个一行
  height: 200rpx; // 100px
  display: flex;   
  flex-direction: column;  // 图片文本纵向布局
  align-items: center;   // 纵向居中
  justify-content: center;   // 横向居中
  border-right: 1rpx solid #eee;    // 右侧的边框
  border-bottom: 1rpx solid #eee;	// 下边的边框
  box-sizing: border-box;  //   有边框线，盛不下了（内容框content-box）换
  										//  成border-box  
  // 当盒子因为内容区的变化而变化时，为了固定其大小，一般使用border-box使其固定
}

.grid-item image{
  width: 60rpx;  // 30px =>  iPhone6 60rpx
  height: 60rpx;
}

.grid-item text{
  font-size: 24rpx;   // 字体大小12px
  margin-top: 10rpx;  // 文本 和 图片 之间的间距
}

display: flex; 讲解博客

6. 底部图片布局

wxml

<!-- 图片区域 -->
<view class="img-box">
  <image src="/images/link-01.png" mode="widthFix"></image>  
  // mode="widthFix" 宽度不变的情况下，高度自适应
  <image src="/images/link-02.png" mode="widthFix"></image>
</view>

wxss

.img-box {
  display: flex;     
  padding: 20rpx 10rpx;   //上下  左右
  justify-content: space-around;  // 横向 每个项目两侧的间隔相等。所以，项目之间的间隔 = 2*项目与边框的间隔 
}

.img-box image{
  width: 45%;  // 图片变小一些
}

10.总结