微信小程序开发笔记.docx

"微信小程序开发笔记" 资源摘要信息的详细解释如下： 小程序目录结构 小程序的文件目录结构主要包括四种文件类型：.js、.json、.wxss、.wxml、.wxs。其中，.js 文件用于处理业务逻辑，.json 文件用于配置小程序，包括小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。project.config.json 是开发工具的个性化配置。每个页面的.json 文件让开发者可以独立定义每个页面的一些属性。.wxss 文件是一套样式语言，用于描述 WXML 的组件样式。.wxml 文件是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。.wxs 文件是一套脚本语言，结合 WXML，可以构建出页面的结构。 pages pages 文件夹主要存放小程序的页面文件，其中每个文件夹为一个页面，每个页面包含四个文件，.wxml 文件是界面文件，.js 文件是事件交互文件，用于处理界面的点击事件等功能；.wxss 文件是界面美化文件，让界面显示的更加美观；.json 文件是配置文件，用于修改导航栏显示样式等，小程序每个页面必须有.wxml 和.js 文件，其他两种类型的文件可以不需要。文件名称必须与页面的文件夹名称相同。 utils utils 文件夹主要用于存放全局的一些.js 文件，公共用到的一些事件处理代码文件可以放到该文件夹下，用于全局调用。可以使用 module.exports 进行声明，才能在其他 js 文件中使用。 app.js、app.json、app.wxss app.js 文件是系统的方法处理文件，主要处理程序的声明周期的一些方法；app.json 文件是系统全局配置文件，设置导航头的颜色、字体大小、下面有没有tabbar 等功能，具体页面的配置在页面的 json 文件中单独修改；app.wxss 文件是全局的界面美化代码，定义在 app.wxss 中的样式为全局样式，作用于每一个页面。 WXML 引用 WXML 通过 {{变量名}} 来绑定 WXML 文件和对应的 JavaScript 文件中的 data 对象属性。 button 可绑定获取用户信息 可以使用 button 组件来绑定获取用户信息，例如：<button open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取用户信息</button> 引用.wxs 文件模块 可以在 wxml 文件中引用.wxs 文件模块，例如：<wxs src="./util.wxs" module="tools" />只能引用 .wxs 文件模块，且必须使用相对路径。 wxss 样式，style 和 class 区别 wxss 支持 class 和 style 两种样式，如果你的样式中存在动态内容，将其写到 style 中，其他的都放到 class 文件。静态的样式统一写到 class 中。 class 引用多个类名 可以在一个元素上引用多个类名，例如：<button class="weui-btn mini-btn" type="primary" size="mini">按钮</button>元素的 class 类名个数是没有限制的，如有需要可以设置 N 个，但需要注意样式的优先级问题。