【微信小程序】理论学习笔记

来源：慕课视频《微信小程序开发》&黑马课程

小程序基础了解

微信小程序框架

• 逻辑层–JavaScript、处理业务逻辑
• 视图层-视图样式WXSS、视图层描述语言WXML、渲染页面
• json配置文件

app.js 定义全局函数&函数使用
指定生命周期函数:wx小程序自己定义的函数
项目的入口文件

app.json
配置页面路径，窗口表现，标签导航，网络超时，debug模式
全局配置文件

使用：
机型改为ip6

快速新建页面：
app.json>pages下面增加新页面的存放路径。
pages(文件夹）/目录/同名页面

WXML和HTML的区别：
1.标签名称不同（div/span/img/aVSview/text/image/navigator)
2.属性节点不同（a）
3.WXML中提供了类似Vue中的模板语法（数据绑定、列表渲染、条件渲染）

WXSS和CSS的区别
1.新增了rpx尺寸单位（像素单位不需进行手动换算）
2.提供全局样式和局部样式
3.WXSS仅支持部分CSS选择器

js
1.app.js，整个小程序项目的入口文件，通过调用App(）函数来启动整个小程序
2.页面的.js文件，是页面的入口文件，Page（）
3.普通的.js文件，是普通的功能模块文件，用来封装公共的函数或属性供页面使用。

宿主环境

host environment:程序运行所必须的依赖环境。
小程序的宿主环境：手机微信
提供：通信模型、运行机制、组件、API

通信模型：
1.主体：渲染层（WXML、WXSS）&逻辑层（JS脚本）
2.通信模型：
①渲染层和逻辑层之间的通信 ②逻辑层和第三方服务器之间的通信
由微信客户端进行转发

运行机制
小程序的启动过程

页面渲染的过程

组件
常用的组件：视图容器、基础内容、表单组件、导航组件
常用的视图容器：①view(实现页面布局效果）②scroll-view(滚动列表效果）③swiper和swiper-item（轮播图容器和Item）

视频P8：介绍了view.scroll-view的简单使用。

轮播图使用

text组件：文本内容长按选中效果实现方法


（这个其实不太懂= =)相当于做HTML与WXML转换的桥梁吧

其他常用组件
button 常用属性：
①type，指定类型（黑字灰底、白字绿底之类）
②size="mini"小尺寸按钮（不知道还有没middle size）
③plain 镂空样式（透明/白底）

image相关：
①空图片也有默认宽高
②mode属性：裁剪缩放

API

协同工作

项目组织结构

小程序的版本

模板与配置

WXML模板语法

- 数据绑定：

• 在data（.js文件中的data对象）里定义数据，在WXML里使用数据（mustache语法{{数据名}}-VUE里叫插值表达式 ）——（类似VUE组件）
  • 定义方式 key:value
• Mustache语法主要应用场景：
  • 绑定内容
  • 绑定属性（此时绑定方法与VUE（：绑定）有所区别）
  • 运算（三元、算术运算等）

- 事件绑定：

• 事件定义：渲染层到逻辑层的通讯方式。

• 常用事件：
  change 使用场景：复选框

• 事件对象(event)的属性列表：

• target和currentTarget的区别
  

• bindtap语法：
  ①bindtap=“名称” 为组件绑定tap触摸事件
  ②.js文件中对应事件处理函数，参数用形参event（简写e)接收。

• 通过调用this.setData(dataObejct)方法，可以给data中的数据重新赋值。

• 事件传参：不能再绑定事件的同时为事件处理函数传递参数（VUE是可以的）

  • 因为小程序把Bindtap的属性值当作事件名称。
  • 使用属性 data-*传参；

  • *可以表示  参数名=“{{参数值}}”  ；没有{{}}，表示传递一个字符串
    

  • 通过 event.target.dataset.参数名，可获取到参数具体的值。

Tips：这里的参数名和参数值应该是属于局部变量，所以没有在.js的data里给咯。给的参数值就是初始定义的参数。

• Bindinput语法格式：

  • bindinput=“名称”
  • e.detail.value,最新输入

• 文本框和data之间的数据同步：视频P21
  
  - 条件渲染 视频P22

• wx:if

  • 使用wx:if="{{condition}}"来判断是否需要渲染该代码块。（展示与隐藏）
  • 可以加else判断：wx:elif;wx:else（可以做用户性别显示模块）
  • 可以用包裹多个组件的展示与隐藏。与用View包裹相比，它不会再页面中做任何渲染。使用避免渲染一些不必要的节点？or组件

• hidden 也可控制。hidden=“{{condition}}”,true是隐藏，false显示。

• 两者区别：①运行方式不同。wx:if，动态创建和移除元素；hidden，切换样式（display:none/block）。

• 使用建议：①频繁切换用hidden(提高渲染效率) ②控制条件复杂时用wx:if.

-列表渲染 视频P23

• wx:for基本使用
  

• 手动指定索引和当前项的变量名（少用）

  • 使用wx:for-index/vx:for-item。
    TIPS:相当于对索引变量重命名，好像也没生啥用= =

• wx:key的使用（类似于VUE列表渲染中的：key)，补一个Key,提高列表渲染时的效率，key引用时不用加{{}}
  
  TIPS：用Key更有针对性-，更规范 -

WXSS模板样式

1.wxss是一套样式语言。用于美化组件样式。
2.wxss和css的关系

3.rpx实现原理：把所有设备的屏幕，宽度上等分为750份。在小屏上，1rpx代表的宽度较小。
TIPS：画原型图时用的单位是px（一般以IP6为标准），在小程序开发中它会自动换算成rpx,后续就可以适配了。开发时×2就行了
4.样式导入：@import “相对路径”；
TIPS：注意是相对路径
5.全局样式和局部样式
注意：①样式遵循就近原则，冲突时，局部样式会覆盖全局样式。
②当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式。
TIPS：这部分规则跟CSS一致，不过wx小程序会把权重计算直接浮动展示出来？好像更方便一些

全局配置

1.常用配置：
2. window中可以配置navigationBar和background（下拉可见的背景）的性质
- 导航栏背景色：只支持16进制的颜色值
- 开启全局下拉刷新（展示背景）：enablePullDownRefresh：true（这个下拉刷新后不会自动回弹，还需要后续设置，真机测试不可少）（一般只对需要下拉刷新的页面*（比如搜索、刷新之类的页面）*单独打开这一项。）
- 上拉触底的距离设置：onReachBottomDistance,默认是50px，没有特殊需求，可以不改。
~~TIPS：
一些下拉刷新Loading,或者具体backgroundcolor调整的细节不多赘述，感觉还是比较简单的。
~~
3.tabBar
- tabBar的6个组成部分

- 节点配置项

- 每个tab项的配置选项

-实际操作：
①图标命名：-active后缀表示选中时
②tabBar页面要放在pages路径的前面。不然不能正确显示。

页面配置

• 可以页面特殊配置，就近原则
• 常用配置项

网络数据请求

1.限制：

2.配置request合法域名的步骤

• 在开发阶段与调试阶段：通过开启详情-本地设置-不校验……项，可以跳过合法域名校验。
  3.发起GET请求
  4.发起POST请求
  
  5.在页面刚加载时请求数据
• 在onLoad里调用请求的函数（例如获得轮播图数据）

6.关于跨域&Ajax(阿贾克斯）的说明（微信小程序里都不存在）