微信小程序--原生

news2024/12/23 16:46:47

1：数据绑定

1：数据绑定的基本原则

2：在data中定义页面的数据

3：Mustache语法

4：Mustache的应用场景

1：常见的几种场景

2：动态绑定内容

3：动态绑定属性

4：三元运算

4：算数运算

2：事件绑定

1：什么是事件

2：小程序中常用的事件

3：事件对象的属性列表

4：target和currentTarget的区别

5：bindtap的语法格式

6：在数据处理函数中为data中的数据赋值

7：事件传参

8：bindinput的语法格式

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

1：定义数据

2：渲染结构

3：美化样式

4：绑定input事件处理函数

3：条件渲染

1：wx:if与wx:elif和wx:else

2：结合<biock>标签使用wx:if

3：hidden

3：wx:if与hidden的对比

1：运行方式不同

2：使用场景

4：列表渲染

1：wx:for

2：手动指定索引和当前项的变量名（了解就行）

3：wx:key的使用

5：模板样式

1：什么是wxss

2：wxss和css之间的关系（wxss扩展的特性）

1：rpx尺寸单位

1：什么是rpx尺寸单位

2：rpx的实现原理

3：rpx与px之间的单位换算（了解就行）

2：@import的语法格式

6：全局样式和局部样式

1：全局样式

2：局部样式

7：全局配置

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

1：window

2：了解window节点常用配置项

3：设置导航栏的标题

4：设置导航栏的背景色（只支持16进制的颜色--#ccc）

5：设置导航栏的标题颜色

6：全局开启下拉刷新的功能

7：设置下拉刷新时窗口的背景色（只支持16进制的颜色--#ccc）

8：设置下拉刷新时 loading的样式

9：设置上拉触底的距离

10：什么是tabBar

11：tabBar的六个组成部分

11：tabBar节点的配置项

12：每个tab项的配置选项

2：实例配置tabBar

1：需求描述

2：实现步骤

3：步骤1-拷贝图标资源

4：步骤2-新建几个对应的tab页面

5：步骤3-配置tabbar选项

6：tabBar 页面展示效果

8：页面配置

1：页面配置文件的作用

2：页面配置和全局配置的关系

3：页面配置中常用的配置项

9：网络数据请求

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

2：配置request合法域名

3：发起get请求

4：发起post请求

5：在页面刚加载时请求数据

6：调过request合法域名校验

7：关于跨域和Ajax的说明

10：实现案例--本地生活的首页

1：效果以及实现步骤

1：新建项目并梳理项目解构

2：配置导航栏效果

3：配置tabBar效果

4：实现轮播图效果

1：js部分

2：html部分

5：实现九宫格效果

1：js部分

2：html部分

6：实现底部两个链接

1：html部分

<!-- 图片区域链接 -->
<view class="flexE colorW marginTB20">
  <view class="bgred W45 lineH200 flexCenter borderRa">
    商家推荐
  </view>
  <view class="bgblue W45 lineH200 flexCenter borderRa">
    交友论坛
  </view>
</view>

2：css部分


.flexE{
  display: flex;
  justify-content: space-evenly;
}
.colorW{
  color: white;
}
.bgred{
  background-color: rgb(255, 128, 128);
}
.bgblue{
  background-color: rgb(133, 133, 255);
}
.W45{
  width: 45%;
}
.lineH200{
  height: 200rpx;
}
.marginTB20{
  margin-top: 20rpx;
}
.flexCenter{
  display: flex;
  justify-content: center;
  align-items: center;
}
.borderRa{
  border-radius: 8rpx;
}