微信小程序--原生

1:数据绑定

1:数据绑定的基本原则

微信小程序--原生_第1张图片

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

微信小程序--原生_第2张图片

3:Mustache语法

微信小程序--原生_第3张图片

4:Mustache的应用场景

1:常见的几种场景

微信小程序--原生_第4张图片

2:动态绑定内容

微信小程序--原生_第5张图片

3:动态绑定属性

微信小程序--原生_第6张图片

4:三元运算

微信小程序--原生_第7张图片

4:算数运算

微信小程序--原生_第8张图片

2:事件绑定

1:什么是事件

微信小程序--原生_第9张图片

2:小程序中常用的事件

微信小程序--原生_第10张图片

3:事件对象的属性列表

微信小程序--原生_第11张图片

4:target和currentTarget的区别

微信小程序--原生_第12张图片

5:bindtap的语法格式

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

微信小程序--原生_第13张图片

7:事件传参

微信小程序--原生_第14张图片

微信小程序--原生_第15张图片

微信小程序--原生_第16张图片

8:bindinput的语法格式

微信小程序--原生_第17张图片

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

微信小程序--原生_第18张图片

1:定义数据

微信小程序--原生_第19张图片

2:渲染结构

微信小程序--原生_第20张图片

3:美化样式

微信小程序--原生_第21张图片

4:绑定input事件处理函数

微信小程序--原生_第22张图片

3:条件渲染

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

微信小程序--原生_第23张图片

2:结合标签使用wx:if

微信小程序--原生_第24张图片

3:hidden

微信小程序--原生_第25张图片

3:wx:if与hidden的对比

1:运行方式不同

微信小程序--原生_第26张图片

2:使用场景

微信小程序--原生_第27张图片

4:列表渲染

1:wx:for

微信小程序--原生_第28张图片

2:手动指定索引和当前项的变量名*(*了解就行)

微信小程序--原生_第29张图片

3:wx:key的使用

微信小程序--原生_第30张图片

5:模板样式

1:什么是wxss

微信小程序--原生_第31张图片

2:wxss和css之间的关系(wxss扩展的特性)

微信小程序--原生_第32张图片

1:rpx尺寸单位

1:什么是rpx尺寸单位

微信小程序--原生_第33张图片

2:rpx的实现原理

微信小程序--原生_第34张图片

3:rpx与px之间的单位换算*(*了解就行)

微信小程序--原生_第35张图片

2:@import的语法格式

微信小程序--原生_第36张图片

6:全局样式和局部样式

1:全局样式

微信小程序--原生_第37张图片

2:局部样式

微信小程序--原生_第38张图片

7:全局配置

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

微信小程序--原生_第39张图片

1:window

微信小程序--原生_第40张图片

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

微信小程序--原生_第41张图片

3:设置导航栏的标题

微信小程序--原生_第42张图片

4:设置导航栏的背景色(只支持16进制的颜色--#ccc)

微信小程序--原生_第43张图片

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

微信小程序--原生_第44张图片

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

微信小程序--原生_第45张图片

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

微信小程序--原生_第46张图片

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

微信小程序--原生_第47张图片

9:设置上拉触底的距离

微信小程序--原生_第48张图片

10:什么是tabBar

微信小程序--原生_第49张图片

11:tabBar的六个组成部分

微信小程序--原生_第50张图片

11:tabBar节点的配置项

微信小程序--原生_第51张图片

12:每个tab项的配置选项

微信小程序--原生_第52张图片

2:实例配置tabBar

1:需求描述

微信小程序--原生_第53张图片

2:实现步骤

微信小程序--原生_第54张图片

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

微信小程序--原生_第55张图片

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

微信小程序--原生_第56张图片

5:步骤3-配置tabbar选项

微信小程序--原生_第57张图片

6:tabBar 页面展示效果

微信小程序--原生_第58张图片

微信小程序--原生_第59张图片

8:页面配置

1:页面配置文件的作用

微信小程序--原生_第60张图片

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

微信小程序--原生_第61张图片

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

微信小程序--原生_第62张图片

9:网络数据请求

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

微信小程序--原生_第63张图片

2:配置request合法域名

微信小程序--原生_第64张图片

微信小程序--原生_第65张图片

微信小程序--原生_第66张图片

微信小程序--原生_第67张图片

微信小程序--原生_第68张图片

微信小程序--原生_第69张图片

微信小程序--原生_第70张图片

微信小程序--原生_第71张图片

3:发起get请求

微信小程序--原生_第72张图片

微信小程序--原生_第73张图片

微信小程序--原生_第74张图片

微信小程序--原生_第75张图片

4:发起post请求

微信小程序--原生_第76张图片

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

微信小程序--原生_第77张图片

6:调过request合法域名校验

微信小程序--原生_第78张图片

7:关于跨域和Ajax的说明

微信小程序--原生_第79张图片

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

1:效果以及实现步骤

微信小程序--原生_第80张图片

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

微信小程序--原生_第81张图片

微信小程序--原生_第82张图片

微信小程序--原生_第83张图片

微信小程序--原生_第84张图片

微信小程序--原生_第85张图片

2:配置导航栏效果

微信小程序--原生_第86张图片

3:配置tabBar效果

微信小程序--原生_第87张图片

4:实现轮播图效果

1:js部分

微信小程序--原生_第88张图片

微信小程序--原生_第89张图片

微信小程序--原生_第90张图片

2:html部分

微信小程序--原生_第91张图片

5:实现九宫格效果

1:js部分

微信小程序--原生_第92张图片

微信小程序--原生_第93张图片

微信小程序--原生_第94张图片

微信小程序--原生_第95张图片

2:html部分

微信小程序--原生_第96张图片

微信小程序--原生_第97张图片

微信小程序--原生_第98张图片

6:实现底部两个链接

1:html部分



  
    商家推荐
  
  
    交友论坛
  

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;
}

2:总结

微信小程序--原生_第99张图片

11:页面导航

什么是页面导航

微信小程序--原生_第100张图片

1:小程序中实现页面导航的两种方式

微信小程序--原生_第101张图片

1:声明式导航

1:声明式导航跳转到tabBar页

微信小程序--原生_第102张图片

2:声明式导航跳转到非tabBar页

微信小程序--原生_第103张图片

3:声明式导航--后退

微信小程序--原生_第104张图片

2:编程式导航

1:编程式导航跳转到tabBar页

微信小程序--原生_第105张图片

微信小程序--原生_第106张图片

2:编程式导航跳转到非tabBar页

微信小程序--原生_第107张图片

微信小程序--原生_第108张图片

3:编程式导航--后退

微信小程序--原生_第109张图片

微信小程序--原生_第110张图片

微信小程序--原生_第111张图片

2:导航传参

1:声明式导航传参

微信小程序--原生_第112张图片

2:编程式导航传参

微信小程序--原生_第113张图片

3:在onLoad中接收导航参数

微信小程序--原生_第114张图片

微信小程序--原生_第115张图片

微信小程序--原生_第116张图片

微信小程序--原生_第117张图片

12:页面事件

1:下拉刷新

1:什么是下拉刷新

微信小程序--原生_第118张图片

2:启用下拉刷新

微信小程序--原生_第119张图片

3:配置下拉刷新窗口的样式

微信小程序--原生_第120张图片

4:监听页面的下拉刷新事件

微信小程序--原生_第121张图片

微信小程序--原生_第122张图片

5:停止下拉刷新的效果(下拉后不会自己恢复,需要手动恢复)

微信小程序--原生_第123张图片

2:上拉触底

1:什么是上拉触底

微信小程序--原生_第124张图片

2:监听页面的上拉触底事件

微信小程序--原生_第125张图片

3:配置上拉触底的距离

微信小程序--原生_第126张图片

4:上拉触底的案例

1:案例效果展示

微信小程序--原生_第127张图片

2:案例的实现步骤

微信小程序--原生_第128张图片

3:步骤1-定义获取随机颜色的方法

微信小程序--原生_第129张图片

4:步骤2-在页面加载时获取初始数据

微信小程序--原生_第130张图片

5:步骤3-渲染ui解构并美化页面效果

微信小程序--原生_第131张图片

6:步骤4-上拉触底时获取随机颜色

微信小程序--原生_第132张图片

7:步骤5-添加上拉加载的样式效果

微信小程序--原生_第133张图片

8:步骤6-对上拉触底进行节流处理

微信小程序--原生_第134张图片

3:自定义编译模式

微信小程序--原生_第135张图片

13:生命周期

1:什么是生命周期

微信小程序--原生_第136张图片

2:生命周期的分类

微信小程序--原生_第137张图片

3:什么是生命周期函数

微信小程序--原生_第138张图片

4:生命周期函数的分类

微信小程序--原生_第139张图片

5:小程序中的应用生命周期函数

微信小程序--原生_第140张图片

6:小程序中页面上的生命周期函数

微信小程序--原生_第141张图片

14:wxs脚本

1:什么是wxs

微信小程序--原生_第142张图片

2:wxs的应用场景

微信小程序--原生_第143张图片

15:实现案例--本地生活列表页

你可能感兴趣的:(微信小程序,小程序)