小程序基础

小程序开发--逆向生长

一,小程序基础

(一)代码构成

1、项目的基本组成结构

pages：用于存放所有小程序的页面
utils：用来存放工具函数模块的
app.js：小程序项目的入口文件
app.wxss：小程序项目的全局样式文件
app.json：小程序的全局配置文件
project.config.json：项目的配置文件
sitemap.json：用来配置小程序页面是否允许被微信索引

2、页面的四个基本文件构成

.js：存放数据以及函数逻辑事件函数等

.wxss：存放页面的样式表文件

.wxml：页面的模板结构文件

.json：当前页面的配置文件，如配置窗口样式外观等

（1）app.js

他是小程序的全局配置文件，包括了所有页面的路径，窗口的外观，界面的表现，底部tab的配置等。

其中的几项基本的配置：

pages：页面存放的路径
window：全局定义小程序的窗口、背景色、标题样式以及内容等
style：全局定义小程序的样式版本 v2为新版本 不设置默认为旧版本
sitemapLocation：用来指明sitemap.json文件的位置

（2）project.config.js

他是小程序的项目的配置文件，用来记录开发者对微信开发者工具做出的个性化配置

项目的配置

projectname：项目的名字

appid：小程序的账号id

（3）sitemap.json

效果类似于PC网页的SEO，该配置文件用来配置小程序的页面是否允许被微信索引

注意：sitemap.json是默认开启的

如果想要关闭，则需要在project.config.json中设置checkSiteMap为false

（4）页面的.json文件

对本页面的窗口界面、背景色等配置项进行设置

与app.json的区别就是只对当前页面生效并且如果全局与当前的json配置文件冲突，全局的配置会被覆盖

（5）WXML文件

专为小程序设置的标签语言，用来构建小程序的页面结构，类似于网页开发中的HTML

（6）WXSS文件

为小程序设计的一套样式语言，用来描述WXML样式，类似与网页开发中的CSS

（7）js文件

提供页面的交互逻辑，响应用户的操作

一般小程序项目中有三类.js文件

app.js 项目的入口文件 通过App()函数来启动整个小程序
页面的.js文件 是页面的入口文件，通过Page()函数来创建并运行这个界面
普通.js文件 一般是用来封装公共函数或属性供页面使用的

3、组件

小程序中的组件是由宿主环境提供的，开发者可以利用其组件快速开发出美观的页面

分为9类:

类别	代码
视图容器	view、scroll-view、swiper、swiper-item
基础内容	text、rich-text(node属性)、image
表单组件
导航组件	navigator
媒体组件
map地图组件
canvas画布组件
开放能力
无障碍访问

4、API

小程序中的API是由宿主环境提供的

1.事件监听API

特点：以on开头,用来监听某些事件的触发

举例：wx.onWindowResize 监听窗口发生变化

2.同步API

特点1：以Sync结尾的API都是同步API

特点2：同步的API结果，可以直接通过函数获取，如果执行错误会抛出异常

举例：wx.setStorage(‘key’,‘value’)向本地存储中写入内容

3.异步API

特点:类似于Jquery中的$.ajax,需要通过success，fail，complete接收调用结果

举例：wx.request

以上为概念知识,了解结构即可,下面演示代码如何写

(二)WXML的模版语法

1.数据绑定

在data中(页面的.js文件)定义数据

page({
    data:{
        num:1,
        num2:2,
        str:'demo',
    	imgSrc:'http://www.demo.com/1.png'    
	}
})

在WXML中使用数据(MustAche语法)

<view>{{num1}}</view>
<iamge src= "{{imgSrc}}" />
<view>{{num2>3?num2:num2+3}}</view>

MustAche的主要应用场景:

    绑定内容
    属性绑定
    运算（三元、算术运算）

2.事件绑定

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

（1）常用的事件

类型	绑定方式	事件描述
tap	bindtap、bind:tap	类似于click
input	bindinput、bind:input	文本框输入事件
change	bindchange、bind:change	状态改变时触发

（2）事件对象的属性列表

当事件回调触发的时候，会接收到一个Event对象，他的详细属性如下：

属性	类型	说明
type	String	事件类型
timeStamp	Integer	页面打开到触发事件所经过的毫秒数
target	Object	触发事件的组件的一些属性值集合
currentTarget	Object	当前组件的一些属性值集合
detail	Object	额外的信息
touches	Array	触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches	Array	触摸事件，当前变化的触摸点信息的数组

重要区别：

• e.target 指向的是触发事件的源头组件，因此，e.target 是内部的按钮组件
• e.currentTarget 指向的是当前正在触发事件的那个组件，因此，e.currentTarget 是当前的 view 组件

3.条件渲染

通过wx:if判断该元素是否显示

<image src="./1.png" wx:if="{{flag}}" />

多条件组合 wx:elif 、wx:else

<image src="./1.png" wx:if="{{flag===1}}" />
<image src="./1.png" wx:elif="{{flag===2}}" />
<image src="./1.png" wx:else />

结合block使用wx:if

block可以一次控制多个元素的隐藏和显示、他不是一个组件，而是一个包裹用途的容器，类似于template，不会在页面上做任何渲染

<block wx:if="{{flag}}">
    <view>1</view>
    <view>2</view>
    <view>3</view>
</block>

hidden控制元素的显示和隐藏

<view hidden="{{flag}}">2</view>

4.列表渲染

（1）wx:for

使用wx:for指定数组进行渲染, 默认情况下index为循环的索引,item为当前的循环项

（2）更改索引和修改当前项名称

wx:for-index
wx:for-item

（3）wx:key的使用

类似于 Vue 列表渲染中的 :key，小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的 key 值，

(三)WXSS模版样式

1、与CSS的关系

wxss具有css的大部分特性，并且做出了一些扩充，以适应小程序的开发

wxss扩展的特性：

rpx单位

@import样式导入

2、全局wxss与局部wxss

（1）全局WXSS

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

（2）局部WXSS样式

作用于当前页面

注意：

• 当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式
• 当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式

(四)全局配置

全局配置文件app.json

• pages
• window

• tabBar
• style

页面配置.json:

类似于全局配置app.json

当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准

(五)网络数据请求

1、小程序中的网络请求限制

出于安全性的考虑，小程序对数据的接口做了如下两个限制

• 只能请求HTTPS类型的接口
• 需要将目标域名设置到域名信任列表当中

2、发起请求

（1）GET请求

wx.request({
    url:'http://www.demo.cn/api/get',//请求的地址 也就是API接口
    method:'GET', //请求的方式
    data:{ name:'zs' }, //发送到服务器的数据
    success:(res)=>{}, //请求成功后的回调函数
    fail:(error)=>{}, //请求失败的回调函数
    complete:()=>{}
})

（2）POST请求

wx.request({
    url:'http://www.demo.cn/api/get',//请求的地址 也就是API接口
    method:'POST', //请求的方式
    data:{ name:'zs' }, //发送到服务器的数据
    success:(res)=>{}, //请求成功后的回调函数
    fail:(error)=>{}, //请求失败的回调函数
    complete:()=>{}
})

• 能够使用 WXML 模板语法渲染页面结构
• 能够使用 WXSS 样式美化页面结构
• 能够使用 app.json 对小程序进行全局性配置
• 能够使用 page.json 对小程序页面进行个性化配置
• 能够知道如何发起网络数据请求

(六)视图与逻辑

1.页面导航

（1）导航到tabBar页面

使用navigator标签

• url：设置导航的路径 需要以 / 开头
• open-type：设置跳转的方式 跳转到tabBar页面必须为：switchTab

<navigator url="/pages/contact/contact" open-type="switchTab">联系</navigator>

（2）导航到非tabBar页面

使用navigator标签

• url：设置导航的路径 需要以 / 开头
• open-type：设置跳转的方式 跳转到tabBar页面必须为：navigate 这一项通常是可以忽略的

<navigator url="/pages/contact/contact" open-type="navigate">联系</navigator>

（3）后退导航

使用navigator标签

• delta：必须为数字，表示需要后退的层级 默认为1
• open-type：设置跳转的方式 跳转到tabBar页面必须为：navigateBack

<navigator url="/pages/contact/contact" open-type="navigate">联系</navigator>

2.页面事件

略

3.WXS脚本

　wxml 中无法调用在页面的 .js 中定义的函数，但是，wxml 中可以调用 wxs 中定义的函数。因此，小程序中

wxs 的典型应用场景就是“过滤器”。类似与javascript 但又有区别

• wxs有自己的数据类型

number 数值类型、string 字符串类型、boolean 布尔类型、object 对象类型、

function 函数类型、array 数组类型、 date 日期类型、

regexp 正则

• wxs不支持es6及以上的语法形式

不支持：let、const、解构赋值、展开运算符、箭头函数、对象属性简写、etc…

支持：var 定义变量、普通 function 函数等类似于 ES5 的语法

• wxs遵循这个commJS规范

module 对象

require() 函数

module.exports 对象

基本语法：

<!-- 内嵌wxs脚本  -->
<view>{{m1.add()}}</view>

<wxs module='m1'> 
module.exports.add=function(){
    return 1
    }
</wxs>

<!-- 外联式wxs脚本  -->
<!-- 书写外联的wxs index.wxs：  -->
function add(){
    return 1
}

module.exports={
    add:add
}

在页面导入 index.wxml:

<view>{{m2.add()}}</view>

<wxs module='m2' src="../../utils/index.wxs"></wxs>

• WXS的特点

与JS不相同，为了降低学习成本，大量借鉴了js，但是本质上是不同的

不能作为事件回调

具有隔离性 ，wxs 不能调用 js 中定义的函数、wxs 不能调用小程序提供的 API

性能好，在 iOS 设备上，小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍

二，小程序标签基础

(一)基础标签

1.1 小程序组件(html)

(1) 区域布局组件

view 定义块级区域，相当于网页中的 div 标签
text 定义行内区域，相当于网页中的 span标签

(2) 链接跳转组件

navigator 组件相当于网页中的 a 标签，用来实现页面之间的跳转。

url 属性支持相对和绝对路径，路径为空时会报错

hover-class 属性定义点击态的样式，none 值表示禁用点击效果

open-type 属性定义跳转方式，tabBar 类型的页面时值为 switchTab，默认值为 navigate

注意: 如果跳转的页面是在app.json的tabBar中注册过的, 必须要添加open-type="switchTab"才可以, 否则跳转不起作用

(3) 图片组件

image 组件用来在页面中显示图片相当于网页中的 img （注意单词不同）

image 默认具有宽高尺寸**（320 * 240px）** 占位容器
当占位容器与图片实际尺寸宽高比不一致时，图片无法正常显示
mode 属性控制图片的显示方式
    scaleToFill 图片提伸铺满占位容器
    aspectFit 图片同比例缩放显示，长边完整显示出来（占位容器可能会留白）
    aspectFill 图片同比例缩放显示，短边完整显示出来（图片可能被裁切）
    widthFix 宽度固定, 高度自适应
    heightFix 高度固定, 宽度自适应

(4) 滑动组件(轮播图)

swiper 组件在页面中创建可以滑动的区块，常常用来实现轮播图的交互效果。

1.组件的结构
    swiper 滑块容器，内部只能嵌套 swiper-item，默认高度为 150px
    swiper-item 滑块单元，内部嵌套任意内容，如 image 组件
<swiper>
  <swiper-item>1</swiper-item>
  <swiper-item>2</swiper-item>
  <swiper-item>3</swiper-item>
</swiper>
  
 2.组件属性
	indicator-dots 是否显示小圆点,小圆点的颜色可以改变

    indicator-color 未选中时的颜色设置

    indicator-active-color 选中时的颜色设置

    autoplay 是否自动播放

    interval 自动切换的时间间隔(单位: ms)

    circular 是否衔接滑动

(5) 表单组件

１． button组件

size 指定按钮的大小
    default 默认大小
    mini 小尺寸
    
type 颜色样式
    primary 绿色
    default 白色
    warn 红色
    
plain 按钮是否镂空，背景色透明

用户头像
    button 组件的 open-type 属性设置为 chooseAvatar
    监听 button 组件的 chooseavatar 事件（没有大写字母）
    事件回调中通过事件对象 ev.detail.avatarUrl
    
２．input输入框组件与网页中 input 标签的作用一致
type属性指定表单的类型
    text 文本输入键盘
    number 数字输入键盘
    idcard 身份证输入键盘
    digit 带小数点的数字输入键盘
    nickname 昵称输入键盘
value 输入框的初始内容
placeholder 属性指定输入框为空时的占位文字
password 是否是密码类型
focus 是否获取焦点

３．radio-group 和 radio 单选框组件, 相当于网页中的 <input type="radio" />
value 定义该表单的数据内容 , checkbox 选中时触发checkbox-group的 change 事件，并携带 checkbox 的 value
checked 定义选中的状态, 可用来设置默认选中
disabled 是否禁用
color checkbox 的 颜色

４．checkbox-group 和 check 复选框组件, 相当于网页中的 <input type="checkbox" />
value 定义该表单的数据内容 , checkbox 选中时触发checkbox-group的 change 事件，并携带 checkbox 的 value
checked 定义选中的状态, 可用来设置默认选中
disabled 是否禁用
color checkbox 的 颜色

５．picker 选择框组件 相当于网页中的 select 标签
mode 属性定义选择框的类型
    selector 普通选择器
    multiSelector 所列选择器
    time 时间选择器
    date 日期选择器
    region 省市区选择器
６．switch 开关选择器
checked 选中状态
type 样式 有效值：switch(默认) checkbox


７．区域滚动组件
scroll-view 在页面中指定一个可以滚动的区域，并且这个可滚动的区域能够实现一些高级的交互，比如下拉刷新等。
scroll-view 中嵌套任意需要滚动的内容，要求必须有溢出，垂直滚动时 scroll-view 必须要指定高度。

    scroll-x 属性是否允许水平方面滚动
    scroll-y 属性是否允许垂直方向滚动
    refresher-enable 属性是否开启下拉刷新的交互
    refresher-triggered 设置下拉刷新状态，true 下拉刷新已经被触发，false 表示下拉刷新未被触发
８．rich-text
微信小程序中不支持网页的标签结构, 只有用rich-text 转化, 才能是使网页标签起作用
    nodes HTML 字符串或数组
    user-select 文本是否可选，该属性会使节点显示为 block
    

1.2小程序样式(css)

小程序中的样式和网页中的样式基本一致 , 其中, 写在页面的 wxss 中的样式是局部样式 , 只对当前的页面起作用 , 写在app.wxss中的样式为全局样式 , 对所有的页面都起作用

局部样式的优先级 > 全局样式的优先级

注：page 在每个页面中都有，它是由小程序自动添加上的，相当于网页中的 body 标签。

(1)样式导入

通过导入样式, 可以复用其他页面中的样式

语法: @import '样式文件地址'

(2)资源使用

小程序中 .wxss 文件中不支持使用本地路径的资源，比如背景图片是不允许使用本地图片路径的，必须使用网络路径（https:// 或 http:// 开头）或者转换成 base64 编码。

(3)字体图标

小程序中字体图片的使用与网页中基本上是一致的，唯一的区别是小程序的 .wxss 文件中不支持使用本地字体文件，我们使用 iconfont 平台提供的服务生成字体文件后，直接使用其线上的字体文件地址

@font-face {
  font-family: "iconfont"; /* Project id 3632516 */
  src: 
       url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAATYAAsAAAAACVwAAASMAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDIgqFfIUjATYCJAMUCwwABCAFhGcHRxs0CFGU7k2N7Mdg204e4YSRdMLR9eNemN8PCiyrdGcE0VpZPQtPxIpIv8IQqHchGxsFLsrGxhhAx0bc/7WZn5C0kYUVY0mFNZOTCiVD4qRkau43dTv25XLOxDa2INyuQk54Qj83jTax/7Y8D8SS8H/u9+pPS9C6v8Itu+yBfdEPtOgA2YB35nOfim6k2DXM5CkCtZYVUBxV1DUCfc1jB7CUtOUgbI9rs5EHteyQl7SHaqGse2QO8QZUpFeKq8Br9+fjv5RQg6TIQDvP6eNyA5x8P+b9Q3K8m4PsG3tJwNYJBTLMz8wV98sDN5F+YR6pNk9SaRko5frUa8ztxsXcVzBTOWd/LsM/L0rQDPXA7+nz3VKafIJf9xV5xgewyWB8iKKE82mlFnUXxXkCGmHcHZJMLg35UwFUjBflFd1vxEL6xJ9OSP90CjR+KLzpuzGbFThHUktQW+ZlIdsrWv7QI/S8whctg46TLcOWVYTXrKYrK1xsOrytY0NuNKqWpbXYGi9ajMIGr0se0MwjabII6NAkMH6x5AUWJYTNdDSzTAk4/vv/2azv84s17vqzNoNPi6QR56SANi9l7TMve37qijdO4vQth3ab81kSDQaB8UvYqAktbBAFb6/n6YnltktVYnQe8t51ouQN5okt2t28tNJCpcl06pIWPh9i8XZo9iNTz2bOXC/FsWPr4keXGVJbkhoak5tTLjWnOuzJjSktl1KarY1J0TMbSj/siz52bPqA4Wbtm5eNlTHlUVHl0ZXbDSlJA29l9HaSp1AxuJjvFgPu5wzQM/qh9n5U1PSp7DSousf+up18OnRA8gDCL7Fpwo64weSRwr4xu5mm2otUCDWO9tF70+OoYHB8JIjpXxExR31Y/bT6iFpn6p6Gd51DTPsKfOAc4baukuywEr2PvjgsOrRa8/l/6RdCKw6/BcQLZ3A/ImRBUHnQgnJhnbjz6p1qSb1Lvc7USeH7wMZbCx2iD6EphvXewFQwG7xZJoL7J3EMHcKG0EyAW40AumKtmPC2nhmaYP2MOUuc9/ChN0aXxUTWxJ32CGaDqdM72UY+LxeGA1TOk4fJUJH6glxPcvT35AqSDa0ig76uv7H57l9qj2feP3WdEuDnrSsk4pXzSmjvUn2hA8G3ZOysiZgzGRnzvFnTJzCn80iNhFo9TQW0SKvn/ZjaaucI1TGlBEmVPshUG0Xn+Fko1FmFUrVtqDWn/Pg6bZxIkWuASZM4CM12QNLoPWSaXUDn+AdQ6PQBSs3+Q62zoM5WZzKEUhnxGBm4QSM4syA5RMOM3VXrkXGIjZezss1IdpmR5pITkpLlSuRAchf7uIYaUzAWOVGW7FyFeD1ks0mcU5YsSMAJJoydOYmJYt6nJAiSHUrJEB6GGHAGGYFjJpA4iDYyjv++eojREDY8uSa62Sdz8XJanZMsQVINdKXBUWvuTNZ3GcooBYaJ/HYimcSOU8F8iE0vSDjO/M0sEAGWwNQi55QjkZDEuoaE8U32C6z8kRdqZy9CQZCEklARfaB8gnhZMCmRwYxV7kZIsKpcJl5GAA==') format('woff2'),
       url('//at.alicdn.com/t/c/font_3632516_qjs869axt0h.woff?t=1672223363723') format('woff'),
       url('//at.alicdn.com/t/c/font_3632516_qjs869axt0h.ttf?t=1672223363723') format('truetype');
}
.iconfont {
  font-family: "iconfont" !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-search:before {
  content: "\e67d";
}
.icon-edit:before {
  content: "\e6d8";
}
.icon-check:before {
  content: "\e6d7";
}
.icon-share:before {
  content: "\e6d6";
}

(二)页面布局

一个完整的小程序页面需要包括 4 个类型的文件：

• .wxml 定义页面的结构，类似于 .html
• .wxss 定义页面的样式，类似于 .css
• .js 定义页面的逻辑，监听事件、发起请求等
• .json 定义页面的配置，如页面标题等

JS页面布局:

每个js页面都必须要调用 Page 函数来注册页面 , 且要传入对象类型的参数：

• data　初始化页面中的数据
  	访问的方式:　`this.data.数据名`
  
  setData　　 更新数据
  	修改data中的数据: this.setData({ data中的数据名: 值})
     
  

  Page({
    data: { /*页面的初始数据*/},
   
    //事件函数, 和data平级
    函数名(){},
    
    //生命周期函数
    onLoad(options) { //页面一加载就调用},
    onShow() { // 页面显示就加载 },
    onHide() { // 页面隐藏就加载},
    onUnload() { //页面卸载},
  
  })
  
  

  长度单位

  小程序将设备页面分为750份,每一份就是1rpx
  
  主要作用: 解决移动适配
  
  iphone 宽度 375px----->750rpx 1px ==== 2rpx
  
  1倍图 ---- 量100px — 200rpx
  
  设计图–2倍图 量的100px— 100px/2*2 rpx
  
  结论: 在二倍图上, 量多少px , 取多少rpx 两者比例为 1:1
  
  注：上述的规则仅适用于设计稿宽度为 750px
  

(三)页面配置

小程序的配置可以配置页面路径、窗口表现、tabBar等，分为全局配置和页面配置，全局配置针对所有页面生效，页面配置只针对当前页生效。

3.1 全局配置

(1) 路径配置

pages 配置页面路径，未配置路径的页面无法被访问到

技巧 : 创建一个页面文件时, 在pages中添加一个配置项, 小程序开发工具自动把文件创建出来,不需要手动创建

//app.json 中
{
   "pages": [
    "pages/index/index",
    "pages/home/home",
    "pages/info/info",
  ],
}

(2) 起始页配置

entryPath 配置小程序默认的启动页面（首页） 如果不填，将默认为 pages 列表的第一项

 {
   "entryPagePath": "pages/home/home",
 }

(3) window窗口配置

window 用于设置小程序的状态栏、导航条、标题、窗口背景色。

 "window": {
    "enablePullDownRefresh": true,
     
    //窗口配置
    "backgroundColor": "#eee",
    "backgroundTextStyle": "dark",
     
    //导航栏的配置  
    "navigationBarBackgroundColor": "#FFA500", 
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "我的小程序",
    "navigationStyle": "default"
  },

窗口的配置

• backgroundColor 窗口的背景色

导航栏的配置

navigationBarBackgroundColor 导航栏背景颜色 (颜色是十六进制)

navigationBarTextStyle 导航栏标题颜色，仅支持 black / white

navigationBarTitleText 导航栏标题文字内容

navigationStyle 导航栏样式，仅支持以下值: default 默认样式 custom 自定义导航栏

下拉刷新的配置

• backgroundTextStyle 下拉 loading 的样式，仅支持 dark / light
• enablePullDownRefresh 是否开启全局的下拉刷新。

(4) tabBar 配置

tabBar 底部 Tab 栏（tabBar 中的页面必须配置在 pages 中）

 "tabBar": {
    "color": "#999",
    "selectedColor": "#5792AF",
    "backgroundColor": "#e0e0e0",
    "borderStyle": "white",
    "position": "bottom",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "我的",
        "iconPath": "/assets/icon/home.png",
        "selectedIconPath": "/assets/icon/home-active.png"
      },
    ]
  },

可选属性:
color 文字颜色，仅支持十六进制颜色
selectedColor 文字选中时的颜色，仅支持十六进制颜色
backgroundColor tab 的背景色，仅支持十六进制颜色
borderStyle tabbar上边框的颜色 , 仅支持 black / white
list tabBar 页面跳转的路径和图标配置
pagePath 跳转的页面路径
text tabBar 上按钮文字
iconPath 图片路径 icon 大小限制为 40kb，不支持网络图片。 当 position 为 top 时，不显示 icon。
selectedIconPath 选中时的图片路径
position tabBar 的位置，仅支持 bottom / top

3.2页面配置

页面配置大部分与全局配置中的 window 是重叠的，页面配置的优先级大于全局配置的。

• disableScroll 只能用在在页面配置中，禁用页面滚动
• usingComponents 后续学到自定义组件时再介绍

三,模版语法

在页面中渲染数据时所用到的一系列语法叫做模板语法，对应到 Vue 中就是指令的概念。

(一)数据绑定

• 插值 {{}}

小程序中无论是属性的绑定还是内容的绑定都必须要使用 {{}}。

--1. 属性绑定
<switch checked="{{false}}" />
--2. 类名绑定
<view class="{{isActive ? 'active' : ''}}" >首页</view>
--3. 内容绑定
<text>{{ msg }}</text>

• 简易数据绑定

model:value="{{数据名}}" 语法实现了双向的数据绑定，但是目前只能用在 input 和 textarea 组件中。

(二)条件渲染

控制属性：相当于 Vue 中指令的概念，在小程序中做控制属性

• wx:if 根据表达式的值渲染内容，值为真时显示
• wx:elif 条件语句
• wx:else 用在 wx:if 的后面，不可单独使用，wx:if 表达式值为假时显示

<!-- 条件渲染  wx:if -->
<view wx:if="{{result===1}}">剪刀</view>
<view wx:elif="{{result===2}}">石头</view>
<view wx:else>布</view>

组件属性：相当于vue 中的 v-show

• hidden 根据表达式的值渲染内容，值为真时隐藏
• 通过 [hidden] { display: none; } 来实现内容的隐藏

<!-- 隐藏 hidden -->
<view hidden="{{result===2}}">测试hidden</view>
<!-- 如果条件频繁切换,用hidden  不频繁 wx:if wx:elif wx:else -->

(三)循环渲染

wx:for 根据数组重复渲染组件内容
    index 默认值，访问数组的索引值
    item 默认值，访问数组的单元值
    
wx:key 列表项的唯一标识符（不使用 {{}}）
    数组单元是对象时，只需要写属性名
    数组单元是简单类型时，推荐使用 *this
    
wx:for-index 自定义访问数组索引的变量名
wx:for-item 自定义访问数组单元的变量名

<!-- 列表渲染 循环 对象-->
<!-- wx:for="{{数据}}"  默认的 item 项 index 索引 -->
<!-- 如果item index 和其他名称冲突, 
     可以用 wx:for-item 和 wx:for-index 
     对默认的item index的名称进行修改 -->
<!-- wx:key 直接就填 字段名就可以了 -->
<view wx:for="{{students}}" wx:key="id">
 索引:{{index}}  姓名: {{item.name}}---年龄:{{item.age}}
</view>
<!-- 数组 -->
<!-- 简单数据, wx:key 想要用自身的数据来显示 用 *this -->
<view wx:for="{{history}}" wx:key="*this">
 {{item}}
</view>

四，事件处理

(一)事件绑定

bind:事件类型=事件回调/bind事件类型=事件回调

<!-- 按钮的点击事件的监听 
 bind(绑定,监听) tap(事件类型)  tap 轻击
 bing:tap / bingtap 
-->
<button type="primary" bindtap="onBtn" data-info="⭐">click me</button>

小程序中使用 bind 进行事件的绑定 , 且在绑定的事件函数中, 是不可以传参的 , 所以只能使用其他的方式传参

事件传参

<!-- 小程序中的事件传参
 传参: data-*(自定义参数名)
       mark: * 
-->
<button bindtap="onBtn"  data-id="{{index}}" mark:f2="f2">事件传参</button>

1. data- 自定义参数名=“值”
2. mark : 自定义参数名=“值”

参数接收

小程序里面的参数是用事件对象完成接收的

data - * 传递的参数 是在 e.target.dataset中

mark: * 传递的参数 是在 e.mark 中

page({
  onBtn(e){
    // 参数接收 e.target.dataset.info
    console.log(e);
  },
})

(二)常用的通用事件

bindtap 点击事件
bindlongpress 长按事件
bindinput 键盘输入事件
bindconfirm 回车事件
bindfocus 输入框聚焦事件
bindblur 输入框失焦事件
bindchange value 改变事件
bindsubmit 表单提交事件
bindreset 重置表单事件

(三)组件事件

前面介绍的 tap 事件可以在绝大部分组件是监听，我们可以将其理解为通用事件类型，然而也有事件类型只属于某个组件，我们将其称为组件事件。

scroll-view 组件中的事件：

• bind:scrolltolower 当滚动内容到达底部或最右侧时触发
• bind:refresherrefresh 执行下拉操作时触发
• refresher-enable 启用自定义下拉刷新

表单组件中的事件：

• change 表单数据发生改变时触发（input 不支持）
• submit 表单提交时触发，button 按钮必须指定 form-type 属性

五，小程序生命周期

略

六,内置API

​ 内置 API 实际上就是小程序提供的一系列的方法，这些方法都封装在了全局对象 wx 下，调用这些方法实现小程序提供的各种功能，如网络请求、本地存储、拍照、录音等。

(一)网络请求

调用 wx.request 能够在小程序中发起网络请求与后端接口进行数据的交互，其语法格式如下：

wx.request({
  url: '这里是接口的地址',
  method: '这里是请求的方法',
  data: '请求时提交的数据',
  header: {/* 请求头信息 */},
  success: () => {/* 成功的回调 */},
  fail: () => {/* 失败的回调 */},
  complete: () => {/* 成功或失败的回调 */}
})

demo:

Page({
  data: {
    books: []
  },
  async onGetBooks(){
    //加载效果
    wx.showLoading({
      title: '数据加载中...',
      // 防止穿透的图层
      mask:true,
    })
    const res = await this.getBooks()
    //  console.log(res);
    this.setData({
      books:res.data.data
    })
  },
  //封装请求图书方法
  getBooks(){
    return new Promise((resolve,reject)=>{
      //异步操作, 成功了就调用resolve ,失败调用 reject
        // 获取成功的提示
        wx.showToast({
          title: '获取数据成功',
          icon:'success'
        })
       //  发起请求
      // 小程序由于没有浏览器环境,所以请求不存在跨域问题
      // 但是为了安全,小程序规定,发起的请求的域名必须配置到(合法域名列表中)
      // 也可以通过勾选,不校验合法域名临时解决(但后面小程序上线发起请求必须要配置合法域名)
      wx.request({
        url: 'https://hmajax.itheima.net/api/books',
        method:'GET',
        data:{
          creator:'zz',
        },
        //this 指向, 所以用箭头函数
        // success:(res)=>{
        //   //成功调用 resolve
        //   resolve(res)
        // },
        success:resolve,
        // fail:(err){
        //   //失败调用 reject
        //   reject(err)
        // },
        fail:reject,
        complete:()=>{
          wx.hideLoading()
        }
      })
    })
  },
})

(二)界面交互

wx.showLoading 显示 loading 提示框
    title 文字提示内容
    mask 是否显示透明蒙层，防止触摸穿透

wx.hideLoading 隐藏 loading 提示框

wx.showToast 消息提示框（轻提示）
	mask 是否显示透明蒙层，防止触摸穿透
    duration 延迟时间（提示框显示多久）
    icon 指定图标，none 不使用图标

(三)本地存储

wx.setStorageSync('自定义属性名',数据) 存入一个数据，复杂类型数据不需要 JSON.stringify 处理
wx.getStorageSync('自定义属性名') 读取一个数据，复杂类型数据不需要 JSON.parse 处理
wx.removeStorageSync('自定义属性名') 删除一个数据
wx.clearStorageSync() 清空全部数据

(四)API特征

异步 API：绝大部分的 API 都是异步方式，通过回调函数获取 API 执行的结果
    success API 调用成功时执行的回调
    fail API 调用失败时执行的回调
    complete API 调用结束时执行的回调（无论成功或失败）
同步 API：部分 API 支持以同步方式获取结果，这些 API 的名称都以 Sync 结尾，如 wx.getStorageSync 等

Promise：部分异步的 API 也支持以 Promise 方式返回结果，此时可以配合 asyc/await 来使用

(五)相册/拍照

wx.chooseMedia 调起摄像头拍照或读取相册内容，该 API 既支持回调方式获取结果，也支持 Promise 方式返回结果：

Page({
  async chooseImage() {
    // 读取结果
    const result = await wx.chooseMedia({
      count: 1, // 只选取一张图片
      sourceType:['album'],  //从相册选择
      mediaType: ['image'] // 只选取图片
    })
    // console.log(result.tempFiles[0].tempFilePath);
    console.log(result)
  }
 
   //上传图片 (变成网络图片)
   wx.uploadFile({
      filePath:res.tempFiles[0].tempFilePath,
      name: 'image',
      url: 'http://geek.itheima.net/v1_0/upload',
      success:(res)=>{
        // console.log('upload',res.data);//是一个JSON字符串
        // console.log('upload',JSON.parse(res.data));
        const imageUrl= JSON.parse(res.data).data.url
        console.log(imageUrl); //上传的网络图片
      },
      fail:(err)=>{
        console.log('err',err);
      }
    })
})

七,框架接口

在 app.js 中调用 App 时会注册应用实例，这个实例具有全局唯一性，通过调用 getApp 函数来获取。

在应用实例中可以添加一些需要共享的数据或方法：

App({
  message: '应用实例中的数据...',
  updateMessage() {
    // this 指向应用实例本身
  }
})

// 获取用应实例
const app = getApp()
Page({
  onLoad() {
    // 查看应用实例中的内容
    console.log(app)
  }
})

页面栈
页面栈本质上是一个数组，它记录着当前打开的全部页面历史，页面栈中的每个单元即为一个页面实例（调用 Page 函数时会注册页面实例）。

全局调用 getCurrentPages 函数可以获取当前的页面栈，通过页面栈可以看到所有的页面实例，借助于页面栈可以获取到页面中的一些有用信息：

data 页面的初始数据
setData 更新数据
onShow、onLoad 等生命周期
route 页面的路径