【微信小程序】基础语法（上）

1.小程序中组件的分类

视图容器

view

scroll-view 可以滚动的视图区域（滚动列表）

swiper和swiper-item  轮播图和轮播图item组件

基础内容

text  类似于span 元素 是行内元素

rich-text  富文本组件，将HTML字符串渲染胃WXML

其他常用组件

button

image  默认宽度300px，高度240px

navigator  类似于a 超链接

表单组件

导航组件

媒体组件

map地图组件

canvas画布组件

开放能力

无障碍访问、

2.小程序api的三大分类

事件监听API

同步API

异步API

3.小程序中常用的事件

tap   bindtap 或 bind:tap    类似于click

input   bindinput 或  bind:input   文本框的输入事件

change   bindchange 或 bind:change   状态改变时触发

当事件回调触发时，会收到一个事件对象event

target 和 currentTarget 的 区别是

4.事件处理函数

为data中的数据赋值

事件传参

在事件传参时，不能在绑定事件的同事为事件出来函数传递参数，小程序会自动把bindtap的属性值统一当作事件名称来处理 

 为组件提供“ data- A”  自定义属性传参  A代表参数的名称

bindinput的语法格式

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

5.模板语法

条件渲染

wx:if 

hidden也可以对控制元素的显示和隐藏

wx:if 与 hidden的对比

运行方式不同： wx:if 动态创建和移除元素，控制元素的显示与隐藏

hidden 以切换样式的方式（display: none/block）,控制元素的显示与隐藏

列表渲染  wx:for

使用wx:for-index 指定当前循环项的索引的变量名

使用wx:for-item  指定当前项的变量名

wx:key

wxss  和  css  的关系

rpx  的实现原理

鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx 把所有设备的屏幕在宽度上等分为 750 份(即:当前屏幕的总宽度为750rpx)。

在较小的设备上，1rpx所代表的宽度较小
在较大的设备上，1rpx所代表的宽度较大

小程序在不同设备上运行的时候，会自动把rpx的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配

rpx  和  px 之间的单位换算

@import 引入

语法格式   @import "/common.wxss";

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

全局配置  window

 全局下拉刷新

通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为。

在app.json中设置的刷新  会作用于每个页面

设置下拉时窗口的背景颜色

改变下拉默认窗口的loading颜色

下拉刷新

通过手指在屏幕上的上拉滑动操作，加载更多数据的行为    默认距离为50px

tabBar

tabBar的六个组成部分

tabBar 的配置项

页面配置

网络数据请求

配置request 合法域名

发起get请求

调用小程序提供的wx.request（）方法，发起get数据请求

在页面刚加载时请求数据

在onLoad函数中请求

跳过 request 合法域名校验

如果后端程序员仅仅提供了http协议的接口，暂时没有提供https协议的接口（在开发环境/测试环境中，接口以后端本地ip开头）

勾选下列选项（只有在开发/测试环境中开启，发布线上要取消勾选）

跨域和Ajax的说明

跨域问题只存在于基于浏览器的 Web 开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序中不存在跨域的问题。