文章目录
一、小程序结构目录
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
})
}
})
文章评论