pages
所有的小程序页面，每个页面以单独的文件夹存在
- index：index 页面文件夹，文件夹下面都包含4个基本的页面文件，这四个文件共同组成index页面
- index.js：
.js文件 -- 页面的脚本文件，存放页面的数据、事件处理函数、生命周期等 - index.json：
.json文件 -- 当前页面的配置文件，配置页面的外观、表现等 - index.wxml：
.wxml文件 -- 页面的模板结构文件 - index.wxss：
.wxss文件 -- 当前页面的样式表文件 - utils：工具类文件夹
- utils.js
- index.js：
- app.js：小程序的项目逻辑文件，用来 注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。
- app.json：小程序公共配置文件，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
- app.wxss：小程序公共样式表
- project.config.json：是项目配置文件，用来记录我们对小程序开发工具所做的个性化配置
-
setting中保存了编译相关的配置 -
projectname中保存的是项目名称 -
appid中保存的是小程序的账号 ID
-
- sitemap.json：配置小程序及其页面是否允许被微信索引
- rules中保存了索引规则列表的配置
- rules规则中，action表示页面是否能被索引(allow,disallow)，page表示生效的页面
**wxss的介绍
**
WXSS
- WXSS(WeiXin Style Sheets)是一套样式语言，用于描述
WXML的组件样式 - 类似于网页开发中的
CSS -
WXSS具有CSS大部分的特性
- WXSS(WeiXin Style Sheets)是一套样式语言，用于描述
- 新增了尺寸单位 -- rpx，一个
rpx为页面宽度的1 / 750 - 提供了全局的样式和局部样式。
全局样式：写入到 根目录的`wxss` 中的样式
局部样式：写入到 页面的 `wxss` 中的样式
- 此外
WXSS仅支持部分CSS选择器
.class（推荐使用） 和 `#id`
element
并集选择器和后代选择器
::after和::before等伪类选择器
宿主环境和运行环境
- 宿主环境指的是 程序运行所必须的依赖环境
1. web 前端的宿主环境为：浏览器
1. android 软件的宿主环境为：android 系统
1. IOS 软件的宿主环境为：IOS系统
- 小程序的宿主环境是什么？
小程序的宿主环境为：手机微信。小程序可以调用 手机微信中的扫码、支付、登录、分享等等功能
- 小程序的运行环境：
分成渲染层和逻辑层
其中 WXML 模板和 WXSS 样式工作在渲染层
渲染层的界面使用了WebView 进行渲染
一个小程序存在多个界面，所以渲染层存在多个WebView线程
JS 脚本工作在逻辑层。
逻辑层采用JsCore线程运行JS脚本
这两个线程的通信会经由微信客户端做中转
逻辑层发送网络请求也经由 Native（手机原生系统）转发
**小程序中完成响应式 **
在 data 中定义数据，在 wxml 中通过 {{}} 使用数据
// 在data中定义数据
// index.js
// 获取应用实例
const app = getApp()
Page({
data: {
product: {
price: 10,
num: 5
}
}
})
// 在wxml中使用数据
<view>
<view>
<!-- wxml 中访问数据，必须使用 {{}} 语法，{{}} 语法中可以放置【任意的、单一的 JavaScript 表达式】 -->
商品的单价：{{product.price}}
</view>
<view>
商品的数量：{{product.num}}
</view>
<view>
商品的总价格：{{product.price * product.num}}
</view>
</view>
处理点击事件
想要给 button 添加点击事件则不可以使用 click 而是bindtap || bind:tap。
<button type="primary" bind:tap="onAddNum">num + 1</button>
// 在js中定义对应的事件
onAddNum () {
console.log('onAddNum')
}
修改data中的数据
需要借助一个函数 setData。
setData 接收一个 对象作为参数，这个对象就是最新的 data 数据。
其中 key 为要修改的数据， value 为最新的值
/**
* 定义事件处理的方法
*/
onAddNum () {
this.setData({
'product.num': this.data.product.num + 1
})
事件传参通过属性绑定（data-xx）的形式，把需要传递的参数绑定到 当前 DOM 元素中
在对应的回调函数中，通过 e.target.dataset 进行访问
形参
首先先来看 形参，对于 点击事件的回调方法 而言，默认会接收一个参数 event （事件对象）。这个 event 对象为：回调方法的唯一参数
实参
对于 小程序 中，我们不能直接为 回调方法传递实参。
而是需要通过：属性绑定的形式，把需要传递的参数绑定到 当前 DOM 元素中，绑定数据的属性需要以 data- 开头。该属性可以通过 e.target.dataset 进行访问。
// html
<button type="primary" bind:tap="onAddNum" data-step="5">num + 1</button>
// js
onAddNum (e) {
// 获取 data-step 的值
let step = parseInt(e.target.dataset.step);
this.setData({
'product.num': this.data.product.num + step
})
}
实现双向数据绑定
通过
value为input视图绑定数据通过监听
bindinput获取视图的变化，在回调方法中修改数据
// html
<view>
商品的数量：
<!-- 1. 创建一个【数字输入框】 -->
<!-- 2. 设置 【商品数量】 为输入框的初始值 -->
<input class="num-input" type="number" value="{{ product.num }}" bindinput="onInput" />
</view>
// js
/**
* 3. 监听 input 的输入事件
*/
onInput (e) {
// 4. 获取用户输入的值
const val = parseInt(e.detail.value);
// 5. 赋值给【商品数量】
this.setData({
'product.num': val
})
条件渲染
wx:if ... wx:elif ... wx:elsehiddenv-if用来控制 【组件是否会被渲染】hidden用来控制【组件是否会被隐藏】一般来说，
wx:if有更高的切换消耗而hidden有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用hidden更好，如果在运行时条件不大可能改变则wx:if较好。
<!-- wx:if ... wx:elif ... wx:else：判断结果为 true 则进行渲染，否则不进行渲染 -->
<view>
售货员小姐姐惊呼：
<text wx:if="{{ product.price * product.num <= 100 }}">hello 帅哥</text>
<text wx:elif="{{ product.price * product.num > 100 && product.price * product.num < 1000 }}">哇哦 有钱人哦</text>
<text wx:else>土豪你好</text>
</view>
<!-- hidden：结果为 true 则隐藏，否则不隐藏 -->
<view>
售货员小姐姐惊呼：
<text hidden="{{ !(product.price * product.num <= 100) }}">hello 帅哥</text>
<text hidden="{{ !(product.price * product.num > 100 && product.price * product.num < 1000) }}">哇哦 有钱人哦</text>
<text hidden="{{product.price * product.num < 1000}}">土豪你好</text>
</view>
列表渲染
小程序中为我们提供了 v-for 指令，让我们进行【列表渲染】的实现。
同时也为我们提供了一个：包裹性质的容器 block 组件，当我们去循环多个元素时，可以使用 block 进行包裹，block 组件只起到包裹的其他组件的作用，本身并不会进行渲染。
// html
<!--
利用 wx:for 循环渲染商品
默认数组的当前项的下标变量名默认为 index，
数组当前项的变量名默认为 item
-->
<view class="product-box">
<block wx:for="{{ products }}" wx:key="index">
<view class="product-item">
<text>商品名：{{item.name}}</text>
<text>价格：{{item.price}}</text>
</view>
</block>
</view>
// js
data: {
products: [
{
name: '苹果',
price: 3.2
},
{
name: '面包',
price: 5.0
},
{
name: '可乐',
price: 2.5
}
]
}
