文章目录
一、小程序结构目录
1. 全局配置app.json
app.json 是当前?程序的全局配置，包括了?程序的所有??路径、界?表现、?络超时时间、底部tab等。
- pages 字段??于描述当前?程序所有??路径，这是为了让微信客?端知道当前你的?程序??定义在哪个?录。
- window字段?定义?程序所有??的顶部背景颜?，?字颜?定义等。
- tabBar字段 - 如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
2. 页面配置page.json
page.json其实?来表????录下的 page.json这类和?程序??相关的配置。
开发者可以独?定义每个??的?些属性，如顶部颜?、是否允许下拉刷新等等。
3. sitemap配置sitemap.json
小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引，文件内容为一个 JSON 对象，如果没有 sitemap.json ，则默认为所有页面都允许被索引
二、小程序模板语法
text相当于span标签，行内元素
view相当于div标签，块元素
checkbox 复选框
1. 数据绑定
普通写法
2. 运算
<!--
运算：
1. 数字的加减
2. 字符串拼接
3. 三元表达式
-->
<view>{{1+2+3}}</view>
<view>{{'1' + '1'}}</view>
<view>{{isChecked ? true : false}}</view>
3. 列表渲染和对象渲染
1. 列表渲染
- 基本语法 ：
wx:for="{{数组或对象}}" - wx:for-item ： 指定数组当前元素的变量名, 不写默认为item
- wx:for-index ：指定数组当前下标的变量名，不写默认为index
- wx:key ：?来提?数组渲染的性能
<!--
列表：books: ['js高级程序设计', 'css权威指南', 'html与css入门']
列表循环
1. wx:for="{{数组或对象}}"
2. wx:for-item="项的名称"
3. wx:for-index="下标的变量名"
4. wx:key?来提?数组渲染的性能，必须是循环数组中唯一的值
-->
<view wx:for="{{books}}" wx:for-item="book" wx:for-index="index" wx:key="index">
书名 ：{{book}}
索引 ：{{index}}
</view>
2. 对象渲染
对象渲染时，
wx:for-item=“值”
wx:for-index=“键”
<!--
person: {
name: "张飞",
age: 128,
hobby: "俺也一样"
}
对象渲染
1. wx:for="{{对象}}"
2. wx:for-item="值"
3. wx:for-index="键"
-->
<view wx:for="{{person}}" wx:for-item="value" wx:for-index="key">
{{key}} -- {{value}}
</view>
4. block
渲染?个包含多节点的结构块 block最终不会变成真正的dom元素
5. 条件渲染
1. wx:if
使用
wx:if="{{condition}}"来判断是否需要渲染该代码块
<!--
isShow: true
条件渲染
-->
<view wx:if="{{isShow}}">111</view>
<view wx:if="{{!isShow}}">222</view>
<!--
isShow: false
条件渲染
-->
<view wx:if="{{isShow}}">111</view>
<view wx:if="{{!isShow}}">222</view>
wx:if 直接不显示该标签
2. hidden
<!--hidden-->
<view hidden="{{isHidden}}">
我不会显示
</view>
<view hidden="{{!isHidden}}">
我会显示
</view>
hidden相当于给标签添加
dispaly:none属性
6. 事件的绑定
input事件 ：给input标签绑定的事件，输入的时候触发
<!--
给input标签绑定input事件、
绑定关键字：bindinput
-->
<input type="text" value="{{num}}" bindinput="handleInput">
</input>
<view>
{{num}}
</view>
Page({
/**
* 页面的初始数据
*/
data: {
num: 0
},
// 给input绑定的事件
handleInput(e) {
console.log("...")
}
})
1. 如何获取页面的值
通过事件源对象
Page({
/**
* 页面的初始数据
*/
data: {
num: 0
},
// 给input绑定的事件
handleInput(e) {
// 获取页面的值
console.log(e.detail.value)
}
})
2. 把输入框的值赋值到data中
Page({
/**
* 页面的初始数据
*/
data: {
num: 0
},
// 给input绑定的事件
handleInput(e) {
// 获取页面的值，并赋值给data中的num
this.setData({
num: e.detail.value
})
}
})
7. 事件的绑定（按钮）
tap事件 ：点击事件，点击的时候触发
点击事件 ：bindtap
无法在小程序中的事件直接传参 通过自定义属性的方式来传递参数
<!--
点击事件
bindtap
无法在小程序中的事件直接传参
通过自定义属性的方式来传递参数
在事件源中获取自定义属性
-->
<!--
错误
<button bindtap="handleClick(1)">+</button>
<button bindtap="handleClick(-1)">-</button>
-->
<button bindtap="handleClick" data-operation="{{1}}">+</button>
<button bindtap="handleClick" data-operation="{{-1}}">-</button>
在事件源中获取自定义属性
Page({
/**
* 页面的初始数据
*/
data: {
num: 0
},
// 点击事件
handleClick(e) {
// 获取自定义属性operation
console.log(e.currentTarget.dataset.operation);
}
})
1. num添加传递的数据
// pages/demo02/demo02.js
Page({
/**
* 页面的初始数据
*/
data: {
num: 0
},
// 点击事件
handleClick(e) {
// 获取自定义属性operation
const operation = e.currentTarget.dataset.operation
// data中的num加上自定义属性
this.setData({
num: this.data.num += operation
})
}
})
