微信小程序入门——一个简单的记事本
准备工作 注册一个邮箱 用邮箱和微信账号绑定一个小程序：微信公众平台 下载 Wechat Devtools 创建一个项目，模板选择 “TDesign - 组件库模板” 然后在这个模板的基础上开发，方便引用组件，后面不需要的页面和组件在删掉就行 项目结构 小程序官方文档 - 目录结构 项目配置文件 app.json：项目配置，包括页面列表、使用组件、导航栏、背景颜色等，详见小程序官方文档 - 全局配置 app.js：小程序逻辑入口 app.wxss：公共样式 新建页面 页面放在 pages 文件夹，在里面新建一个文件夹例如 pages/note 一个页面包含 4 个文件 note.json：页面配置，包括页面名称、使用组件、背景颜色等，详见小程序官方文档 - 页面配置 note.js：页面逻辑 note.wxml：页面结构 note.wxss：样式 页面设计 页面设计包括两个部分，上部分的笔记列表，使用 TDesign 的 collapse 组件组成，下部分为输入区域，由一个文本输入框和提交按钮组成，其中文本输入框用 textarea 组件，按钮用 button 组件。 官方组件文档见小程序官方文档 - 组件，TDesign 组件文档见TDesign - 组件概览 用户可以在文本框内输入文字，点击提交按钮后会将文件展示在上方列表，并清空文本框 代码 note.json 文件主要引入使用到的组件 { "usingComponents": { "t-collapse": "tdesign-miniprogram/collapse/collapse", "t-collapse-panel": "tdesign-miniprogram/collapse-panel/collapse-panel", "t-textarea": "tdesign-miniprogram/textarea/textarea", "t-button": "tdesign-miniprogram/button/button" } } note.wxml 定义上述页面结构，其中的 t-textarea 通过 bind:change 绑定内容，按钮 t-button 通过 bind:tap 绑定点击动作 ...