时光の尘的博客

为了调动复选框在左边还是在右边显示，可以根据类名.left和.right来分别设置不同的 flex 方向。使用 display: flex;可以使复选框和文本在同一行展示，使用 align-self: center;可以在垂直方向居中。Properties是指组件的对外属性，主要用来接收组件使用者传递给组件内部的数据，和data一同用于组件的模板渲染。可以看到Properties所在的位置，由于这个组件实在首页使用的，因此我们需要找到首页位置。

小程序目前已经支持组件化开发，可以将页面中的功能模块抽取成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。开发中常见的组件有两种：① 公共组件：将页面内的功能模块抽取成自定义组件，以便在不同的页面中重复使用② 页面组件：将复杂的页面拆分成多个低耦合的模块，有助于代码维护如果是公共组件，建议放在项目根目录的 components 文件夹中如果是页面组件,建议放在对应页面的目录下建议：一个组件一个文件夹开发中常见的组件主要分为公共组件和。

当用户下拉刷新时，会触发名为 refreshHandler 的处理函数来执行相应的逻辑，比如加载最新数据或者其他操作。当 refresher-triggered 的值为 true 时，表示下拉刷新已经被触发，可以执行相应的刷新操作。当滚动视图滚动到设定的阈值（由 lower-threshold 决定）时，触发触底事件，然后会调用名为 getMore 的处理函数来执行相应的逻辑。在滚动视图中，当距离底部的距离小于或等于 lower-threshold 设置的值时，会触发触底事件。

① usingComponents: 这里可以列出项目中所需要使用的组件，可以在这里注册项目自定义的组件，以便在页面中引用和调用。③ enablePullDownRefresh: 设置为 true 表示页面可以下拉刷新，用户下拉页面时会触发下拉刷新事件。① 在 app.json 或者 page.json 中开启允许下拉，同时可以配置 窗口、loading 样式等。下拉刷新是小程序中常见的一种刷新方式，当用户下拉页面时，页面会自动刷新，以便用户获取最新的内容。

分隔，例如：path?key=value&key2=value2 参数需要在跳转到的页面的 onLoad 钩子函数中通过形参进行接收。关闭（销毁）当前页面，跳转到应用中其他页面，不能跳转到tabBar页面。保留当前页面，跳转到应用中其他页面，不能跳转到 tabBar 页面。保留当前页面，跳转到 tabBar 页面，不能跳转到应用中其他页面。也可以在跳转到的页面的 onLoad 钩子函数中通过形参进行接收。如何返回多级页面呢？关闭当前页面，返回上一页或者返回多级页面，默认返回上一页。

主线程的执行，直到本地存储操作完成后才会继续执行后续代码。这意味着如果存储操作需要较长时间，会导致界面出现卡顿现象，影响用户体验。小程序本地存储是指在小程序中使用API将数据存储在用户的设备上，以便小程序运行时和下次启动时快速地读取这些数据。主线程的执行，而是通过回调函数或 Promise 来处理存储操作的结果。注意事项：对象类型的数据，可以直接进行存储获取，无需使用 JSON.stringify()、JSON.parse(）转换。异步方式：在使用异步方式进行本地存储操作时，代码会立即返回，

小程序提供了一些用于界面交互的 API，例如：loading 提示框、消息提示框、模态对话框等 API。

小程序开发框架提供丰富的微信原生API，可以方便的调起微信提供的能力，例如：获取用户信息、微信登录、微信支付等，小程序提供的API几乎都挂载在wx对象下，例如： wx.request(), wx.setStorage()等，wx对象实际上就是小程序的宿主环境微信所提供的全局对象。异步API支持 callback & Promise两种调用方式:① 当接口参数 Object 对象中不包含 success/fail/complete 时将默认返回 Promise。

一个小程序完整的生命周期由应用生命周期页面生命周期和组件生命周期三部分来组成。应用生命周期：是指应用程序进程从创建到消亡的整个过程。小程序的生命：周期指的是小程序从启动到销毁的整个过程。小程序生命周期伴随着一些函数，这些函数由小程序框架本身提供，被称为生命周期函数，生命周期函数会按照顺序依次自动触发调用。帮助程序员在特定的时机执行特定的操作，辅助程序员完成一些比较复杂的逻辑。

当小程序进入后台并被「挂起」后，如果很长时间（目前是 30 分钟）都未再次进入前台，小程序会被销毁当小程序占用系统资源过高，可能会被系统销毁或被微信客户端主动回收。如果有更新，下次小程序启动时会同步进行更新，更新到最新版本后再打开小程序。① 在启动时异步更新的方式中，小程序会先使用本地缓存的代码和资源文件进行页面渲染和交互，然后在后台异步下载最新版本的代码和资源文件。① 在启动时同步更新的方式中，小程序会在用户打开小程序时，先下载最新版本的代码和资源文件，并等待下载完成后再进行页面渲染和交互。

条件渲染主要用来控制页面结构的展示和隐藏,在微信小程序中实现条件渲染有两种方式:1. 使用 wx:if, wx:elif, wx:else 属性组2. 使用 hidden 属性wx:if 和 hidden 二者的区别：1. wx:if：当条件为 true时将结构展示出来，否则结构不会进行展示，通过移除/新增节点 的方式来实现。2. hidden：当条件为 true 时会将结构隐藏，否则结构会展示出来，通过 display 样式属性 来实现的。

索引：{{ index }}, 水果名称：{{ fruitItem.name }}

列表渲染：就是指通过循环遍历一个数组或对象，将其中的每个元素渲染到页面上。在组件上使用 wx:for 属性绑定一个数组或对象，既可使用每一项数据重复渲染当前组件。每一项的变量名默认为 item,下标变量名默认为inde。在使用 wx:for 进行遍历的时候，建议加上 wx:key 属性，wx:key 的值以两种形式提供：字符串：代表需要遍历的array中item的某个属性，该属性的值需要是列表中唯一的字符串或数字,且不能动态改变。

在 WXML 中，普通属性的绑定是单向的，例如：如果希望用户输入数据的同时改变 data 中的数据，可以借助简易双向绑定机制。在对应属性之前添加 model：前缀即可：例如 注意事项：简易双向绑定的属性值如下限制：1、只能是一个单一字段的绑定,例如:错误用法:

在微信小程序中，setData（）方法用于将数据从逻辑层发送到视图层，以实现页面数据的更新和视图的刷新。通过 setData（）方法可以更新页面上展示的数据，让用户看到最新的信息。当调用 setData（）方法时，需要传入一个对象，该对象包含需要更新的数据。在这里，key1，key2等表示要更新的属性名，value1，value2分别为对应的属性值。当调用 setData（） 后，相关属性的数据会被更新，并触发页面视图的重新渲染，以展示最新的数据。

根据以上我们可以发现，如果新增和修改都是用数据路径，要是新增和修改的数据量比较小的时候还能一个个敲上去，但是如果新增和修改的数据过多，每次都写数据路径就太过麻烦。

Page({data:{num: 1},// 更新 num// 获取数据})// 通过赋值的方式直接修改数据可以看出这种方法能够修改数据，但是不能改变页面上的数据：Page({data:{num: 1},// 更新 num// 获取数据// 通过赋值的方式直接修改数据//能够修改数据，但是不能改变页面上的数据})微信小程序中的setData()方法用于修改页面数据并实时更新视图，是实现动态数据绑定的重要方法之一。

小程序页面中使用的数据均需要在 Page()方法的 data 对象中进行声明定义。在将数据声明好以后，在 WXML 使用Mustache 语法（双大括号{{ }}）将变量包起来，从而将数据绑定在{{}}内部可以做一些简单的运算，支持如下几种方式：1. 算数运算2. 三元运算3. 逻辑判断4. 其他…注意事项：在{{ }}语法中，只能写表达式，不能写语句，也不能调用 js 相关的方法。

通过事件对象获取到的是 触发事件的节点 以及父节点身上的所有 mark 数据微信小程序开发_时光の尘的博客-CSDN博客。

事件传参：在触发事件时,将一些数据作为参数传递给事件处理函数的过程,就是事件传参。在微信小程序中,我们经常会在组件上添加一些自定义数据,然后在事件处理函数中获取这些自定义数据,从而完成业务逻辑的开发。在组件上通过data-"的方式定义需要传递的数据,其中*是自定义的属性,例如: 然后通过事件对象进行获取自定义数据。

当一个组件的事件被触发后，该事件不会向父节点传递，若此时父节点也有绑定事件，则不会触发父节点的事件。使用 bind 绑定的事件，会触发事件冒泡，如果想阻止事件冒泡，可以使用 catch 来绑定事件。：当一个组件的事件被触发后，该事件会向父节点传递，若此时父节点也有绑定事件，则会一并触发。

。第一种方式: bind:事件名, bind后面需要跟上冒号,冒号后面跟上事件名,例如: 第二种方式：bind事件名，bind 后面直接跟上事件名，例如：

在项目中使用到的小图标，一般由公司设计师进行设计，设计好以后上传到阿里巴巴矢量图标库，然后方便程序员来进行使用。点击添加至项目，若是没有创建项目，可以先点击红色部分创建项目，最后点击确定。小程序中的字体图标使用方式与 Web 开发中的使用方式是一样的。声明：这不是打广告！

网页中的滚动条效果，用户可以通过手指滑动或者点击滚动条来滚动内容。scroll-view:可滚动视图区域,适用于需要滚动展示内容的场景,用于在小程序中实现类似于。在微信想小程序中如果想实现内容滚动，需要使用 scroll-view 组件。① scroll-x： 允许横向滚动。② scroll-y： 允许纵向滚动。框住部分能够上下滚动。

1. 路径后可以带参数。分隔,参数键与参数值用= 相连,不同参数用&分隔例如: /list?· redirect： 关闭当前页面，跳转到应用内的某个页面。· navigate：保留当前页面，跳转到应用内的某个页面。· switchTab:跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。· navigateBack:关闭当前页面，返回上一页面或多级页面。· reLaunch:关闭所有页面，打开到应用内的某个页面。navigate：保留上一级页面，因此还能够返回上一级页面。

注意：更改自己的图片文件路径。1.6 更改背景颜色。

创建一个新的 BFC（块级格式化上下文），用于解决元素浮动引起的布局问题，元素内部的浮动元素不会影响到父元素的高度。将元素显示为内联元素，即元素不会独占一行，只会占据自身内容所需的空间，不可设置宽度和高度。结合了块级元素和内联元素的特性，元素会在一行内显示，并且可以设置宽度、高度以及上下外边距。使用 Flexbox 布局，将元素显示为弹性盒子，可以方便地进行灵活的布局。使用 Grid 布局，将元素显示为网格容器，可以实现复杂的布局结构。② emsp：以中文字符的空格大小进行展示的。

在进行网页开发的时候，实现轮播图的时候，我们通常先使用 HTML、CSS 实现轮播图的结构样式,然后使用JS控制轮播图的效果,或者直接使用插件实现轮播图的功能,而在小程序中实现小程序功能则相对简单很多。swiper-item： 只可放置在 swiper 组件中，宽高自动设置为100%，代表swiper 中的每一项。以上是功能演示，下载将刚才的代码注释掉，在view中进行添加转轮图片。swiper：滑块视图容器，其中只能放置 swiper-item 组件。这样我们就做出了页面的框架。

在开发 Web网站的时候：页面的结构由 HTML 进行编写，例如：经常会用到 div、p、span, img、a 等标签。页面的样式由 css 进行编写，例如：经常会采用.class、#id、element 等选择器。但在小程序中不能使用 HTML 标签，也就没有 DOM 和 BOM,CSS 也仅仅支持部分选择器。小程序提供了 WXML 进行页面结构编写，同时提供了 Wxss 进行页面的样式编写。

⑤ 开发阶段相关的设置修改优先同步到 project.private.config.json中，但与最终编译产物有关的设置无法在project.private.config.json中生效，界面上的改动也不会同步到 project.private.config.json 文件中。③ 可以在 project.config.json 文件中配置公共的配置，在 project.private.config.json 配置个人的配置，可以将 project.private.config.json写到。

小程序的页面配置,也称局部配置,每一个小程序页面也可以使用自己的.json文件来对本页面的窗口表现进行配置需要注意的是：页面配置文件的属性和 全局配置文件中的 window 属性几乎一致,只不过这里不需要额外指定 window 字段,因此如果出现相同的配置项，页面中配置项 会覆盖全局配置文件中相同的配置项。，用以实现页面之间的快速切换，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。定义小程序顶部、底部 tab 栏。其中 list 接受一个数组，

JSON是一种轻量级的数据格式，常用于前后端数据的交互，但是在小程序中，JSON扮演的配置项的角色，用于配置项目或者页面属性和行为，每个页面或组件也都有一个对应的 json 文件。小程序中常见的配置文件有以下几种:① app.json：小程序全局配置文件，用于配置小程序的一些全局属性和页面路由。② 页面.json：小程序页面配置文件，也称局部配置文件，用于配置当前页面的窗口样式、页面标题等。

小程序调试基础库是指：微信开发者工具中可以选择的微信基础库版本。微信基础库是指小程序的运行环境，给小程序提供了运行所需的各种 API 和工具，以及基础框架和运行逻辑等。小程序开发者可以在微信开发者工具中选择所需的微信基础库版本，作为运行和调试小程序时的运行环境。每个小程序有自己所允许使用的基础库最低版本要求，开发者需要选择要兼容的基础库版本，从而确保小程序的功能正常运行。

项目名称”自己起一个名字，目录最好进行更改不要放到C盘内，AppID，参考本文首页的第一章链接中的“获取小程序的AppID”，后端服务选择“不使用云服务”，点击“模板选择”的“全部分类”按钮，选择不使用模板，后点击确定。小程序目前有两种渲染模式，一种Skyline渲染模式，一种WebView渲染模式，不过Skyline渲染模式属于新的渲染模式不是非常的稳定，可以给改为WebView渲染模式。在开发过程中，要想快速查找小程序的使用文档，或者组件的使用文档可以通过菜单栏的“开发者文档”快速查找。

小程序有自己的一套标准开发模式：申请小程序开发账号、安装小程序开发者工具、创建和配置小程序项目。安装完成后，此处可勾选，也可不勾选，勾选点击完成后会自动打开，不勾选点击完成手动打开也一样的。但是，小程序中可以调用微信环境提供的各种 API，例如：地理定位、扫码、支付等。由于运行环境的不同，所以小程序中，无法调用 DOM 和 BOM 的 API。不建议更改路径，但C盘没空间了，我在这里进行更改了。记住此ID，后续创建小程序项目的时候，需要用到。网页的开发模式：浏览器 + 代码编辑器。