微信小程序开发简易教程
微信小程序文件结构详解
1. 项目配置文件
project.config.json
- 项目的配置文件
- 包含项目名称、appid、编译选项等配置
- 示例:
{"description": "项目配置文件","packOptions": {"ignore": []},"setting": {"urlCheck": true,"es6": true,"postcss": true,"minified": true},"compileType": "miniprogram","libVersion": "2.19.4","appid": "你的小程序appid","projectname": "示例小程序","debugOptions": {"hidedInDevtools": []}
}
app.json
- 小程序全局配置文件
- 配置页面路径、窗口样式、底部导航栏等
- 示例:
{"pages": ["pages/index/index","pages/logs/logs"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "示例小程序","navigationBarTextStyle": "black"},"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "images/home.png","selectedIconPath": "images/home-active.png"}]},"style": "v2","sitemapLocation": "sitemap.json"
}
2. 全局入口文件
app.js
- 小程序的入口文件
- 包含小程序的生命周期函数
- 定义全局数据和方法
- 示例:
App({// 小程序初始化完成时触发,全局只触发一次onLaunch: function () {// 获取用户信息wx.getUserInfo({success: res => {this.globalData.userInfo = res.userInfo}})},// 小程序显示时触发onShow: function () {console.log('小程序显示')},// 小程序隐藏时触发onHide: function () {console.log('小程序隐藏')},// 全局数据globalData: {userInfo: null,version: '1.0.0'}
})
app.wxss
- 全局样式文件
- 定义所有页面都能使用的样式
- 示例:
/* 全局样式 */
.container {height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: space-between;padding: 200rpx 0;box-sizing: border-box;
}/* 常用文本样式 */
.text-primary {color: #07c160;
}.text-center {text-align: center;
}
3. 页面文件夹 (pages)
每个页面通常包含4个文件:
页面 JS 文件 (例如 index.js)
- 页面的逻辑文件
- 处理页面的生命周期
- 定义页面数据和方法
- 示例:
Page({// 页面的初始数据data: {message: 'Hello World',list: []},// 生命周期函数--监听页面加载onLoad: function (options) {this.getData()},// 生命周期函数--监听页面显示onShow: function () {console.log('页面显示')},// 自定义方法getData: function() {wx.request({url: 'api/data',success: (res) => {this.setData({list: res.data})}})}
})
页面 WXML 文件 (例如 index.wxml)
- 页面的结构文件(类似HTML)
- 使用微信小程序的组件和语法
- 示例:
<view class="container"><!-- 数据绑定 --><text>{{message}}</text><!-- 条件渲染 --><view wx:if="{{list.length > 0}}"><!-- 列表渲染 --><view wx:for="{{list}}" wx:key="id">{{item.name}}</view></view><!-- 事件绑定 --><button bindtap="getData">刷新数据</button>
</view>
页面 WXSS 文件 (例如 index.wxss)
- 页面的样式文件(类似CSS)
- 仅对当前页面生效
- 示例:
/* 页面容器 */
.container {padding: 20rpx;
}/* 列表样式 */
.list-item {margin: 20rpx 0;padding: 20rpx;border-bottom: 1rpx solid #eee;
}/* 按钮样式 */
button {margin-top: 40rpx;background-color: #07c160;color: white;
}
页面配置文件 (例如 index.json)
- 页面的配置文件
- 可覆盖app.json中的配置
- 示例:
{"navigationBarTitleText": "首页","usingComponents": {"custom-component": "/components/custom/custom"},"enablePullDownRefresh": true
}
4. 组件文件夹 (components)
组件文件结构
- 与页面文件结构类似
- 包含 js/wxml/wxss/json 四个文件
- 示例组件 JS:
Component({// 组件的属性列表properties: {title: {type: String,value: ''}},// 组件的初始数据data: {count: 0},// 组件的方法列表methods: {handleClick() {this.setData({count: this.data.count + 1})// 触发自定义事件this.triggerEvent('customevent', {count: this.data.count})}}
})
5. 其他重要文件
utils/util.js
- 工具函数文件
- 存放公共方法
- 示例:
const formatTime = date => {const year = date.getFullYear()const month = date.getMonth() + 1const day = date.getDate()return [year, month, day].map(formatNumber).join('/')
}const formatNumber = n => {n = n.toString()return n[1] ? n : `0${n}`
}module.exports = {formatTime,formatNumber
}
sitemap.json
- 小程序搜索相关配置
- 配置页面是否允许被微信索引
- 示例:
{"desc": "关于本文件的更多信息,请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html","rules": [{"action": "allow","page": "*"}]
}
文件命名规范
- 文件夹和文件名使用小写字母
- 多个单词使用连字符(-) 或下划线(_)连接
- 页面文件夹与文件名保持一致
- 组件文件夹使用有意义的名称
开发注意事项
-
生命周期管理
- 合理使用页面和应用的生命周期函数
- 在适当的生命周期处理数据加载和清理
-
数据管理
- 使用 setData 更新数据
- 避免频繁调用 setData
- 合理使用全局数据
-
性能优化
- 及时销毁不需要的定时器和事件监听
- 合理使用组件和页面的懒加载
- 优化图片资源
-
代码规范
- 遵循统一的代码风格
- 适当添加注释
- 做好错误处理
相关文章:
微信小程序开发简易教程
微信小程序文件结构详解 1. 项目配置文件 project.config.json 项目的配置文件包含项目名称、appid、编译选项等配置示例: {"description": "项目配置文件","packOptions": {"ignore": []},"setting": {&quo…...

树莓派 发那科 Fanuc Linux跨平台CNC数控数据采集协议,TCP协议包
市面上的数控基本都支持了跨平台通讯,下面以发那科为列讲解跨平台协议如何通讯,无需任何DLL,适配任何开发语言,纯Socket通讯 先上采集图 握手包:a0 a0 a0 a0 00 01 01 01 00 02 00 02 释放包:a0 a0 a0 a…...

Ubuntu中安装配置交叉编译工具并进行测试
01-下载获取交叉编译工具的源码 按照博文 https://blog.csdn.net/wenhao_ir/article/details/144325141的方法,把imx6ull的BSP下载好后,其中就有交叉编译工具。 当然,为了将来使用方便,我已经把它压缩并传到了百度网盘ÿ…...

C++核心day3作业
作业: 1.整理思维导图 2.整理课上代码 3.把课上类的三个练习题的构造函数写出来 函数全部类内声明,类外定义 定义一个矩形类Rec,包含私有属性length、width,包含公有成员方法: void set_length(int l); //设置长度v…...
socket UDP 环路回显的服务端
基于socket通讯的方式,无论用http或者udp或者自定义的协议,程序结构都是类似的。这个以UDP协议为例简要说明。 #include <stdio.h> // 标准输入输出库 #include <sys/types.h> // 提供了一些数据类型,如ssize_t #include <sy…...
springboot/ssm车辆违章信息管理系统Java代码web项目汽车违章处罚源码
基于springboot(可改ssm)htmlvue项目 springboot/ssm车辆违章信息管理系统Java代码web项目汽车违章处罚源码 开发语言:Java 框架:springboot/可改ssm vue JDK版本:JDK1.8(或11) 服务器:tomcat 数据库&…...
5G模组AT命令脚本-关闭模组的IP过滤功能
关闭模组的IP过滤功能 关闭模组的IP过滤功能 5G 模组通常使用nat方式为 下挂设备或上位机提供上网服务,默认情况,不做NAt的包无法经由 模组转发,如果禁掉这个限制 ,可使用本文中的配置命令本脚本用于关闭模组的IP过滤功能…...
STM32:实现ping命令(lwip)
目录 0.协议介绍ICMP数据包格式ping指令发送的ICMP回声请求消息ping指令接收的ICMP回声应答消息1.实现步骤2.源码分析2.1 初始化函数2.2 发送函数2.3 回调函数2.3.1 函数定义:2.3.2 解析数据包:2.3.3.处理ICMP数据包:2.3.4 资源释放:2.3.5 返回值:3.源码展示4.源码链接5.问…...

nvm安装指定版本显示不存在及nvm ls-remote 列表只出现 iojs 而没有 node.js 解决办法
在使用 nvm install 18.20.3 安装 node 时会发现一直显示不存在此版本 Version 18.20.3 not found - try nvm ls-remote to browse available versions.使用 nvm ls-remote 查看可安装列表时发现,列表中只有 iojs 解决方法: 可以使用以下命令查看可安装…...
Spring Boot 中 WebClient 的实践详解
在现代微服务架构中,服务之间的通信至关重要。Spring Boot 提供了 WebClient,作为 RestTemplate 的替代方案,用于执行非阻塞式的 HTTP 请求。本文将详细讲解 WebClient 的实践,包括配置、使用场景以及常见的优化策略,帮…...

在GITHUB上传本地文件指南(详细图文版)
这份笔记简述了如何在GITHUB上上传文件夹的详细策略。 既是对自己未来的一个参考,又希望能给各位读者带来帮助。 详细步骤 打开目标文件夹(想要上传的文件夹) 右击点击git bash打开 GitHub创立新的仓库后,点击右上方CODE绿色按…...

【大模型系列篇】LLaMA-Factory大模型微调实践 - 从零开始
前一次我们使用了NVIDIA TensorRT-LLM 大模型推理框架对智谱chatglm3-6b模型格式进行了转换和量化压缩,并成功部署了推理服务,有兴趣的同学可以翻阅《NVIDIA TensorRT-LLM 大模型推理框架实践》,今天我们来实践如何通过LLaMA-Factory对大模型…...
30天学会Go--第7天 GO语言 Redis 学习与实践
30天学会Go–第7天 GO语言 Redis 学习与实践 文章目录 30天学会Go--第7天 GO语言 Redis 学习与实践前言一、Redis 基础知识1.1 Redis 的核心特性1.2 Redis 常见使用场景 二、安装 Redis2.1 在 Linux 上安装2.2 在 Windows 上安装2.3 使用 Docker 安装 Redis 三、Redis 常用命令…...
java 使用JSqlParser和CCJSqlParser 解析sql
maven <dependency><groupId>com.github.jsqlparser</groupId><artifactId>jsqlparser</artifactId><version>4.9</version> </dependency>解析SQL String sql "select aa,bb from b"; Statement statementCCJSq…...

基于spring boot的高校专业实习管理系统的设计与实现
文末获取源码和万字论文,制作不易,感谢点赞支持。 设计题目:基于spring boot的高校专业实习管理系统的设计与实现 摘 要 随着国内市场经济这几十年来的蓬勃发展,突然遇到了从国外传入国内的互联网技术,互联网产业从开…...
OpenCV相机标定与3D重建(11)机器人世界手眼标定函数calibrateRobotWorldHandEye()的使用
操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 计算机器人世界/手眼标定: w T b _{}^{w}\textrm{T}_b wTb 和 c T g _{}^{c}\textrm{T}_g cTg。 cv::calibrateRobotWorldHa…...

计算机网络ENSP课设--三层架构企业网络
本课程设计搭建一个小型互联网,并模拟Internet的典型Web服务过程。通过此次课程设计,可以进一步理解Internet的工作原理和协议过程,并提高综合知识的运用能力和分析能力。具体目标包括: (1)掌握网络拓扑的…...
【openwrt】openwrt-21.02 基于IP地址使用ipset实现策略路由操作说明
openwrt版本信息 DISTRIB_ID=OpenWrt DISTRIB_RELEASE=21.02-SNAPSHOT DISTRIB_REVISION=r0-6bf6af1d5 DISTRIB_TARGET=mediatek/mt7981 DISTRIB_ARCH=aarch64_cortex-a53 DISTRIB_DESCRIPTION=OpenWrt 21.02-SNAPSHOT r0-6bf6af1d5 DISTRIB_TAINTS=no-all busybox override …...

Git:常用命令
一、查看当前分支 git branch 二、查看所有分支 git branch -a 三、切换到远程分支 git checkout origin/分支名 示例:git checkout origin/dev 四、拉取远程分支代码 git pull origin 分支名 示例:git pull origin dev 五、常用指令 查看暂存区…...

【2025最新版】搭建个人博客教程
【2025最新版】搭建个人博客教程 –小记: 在搭建我的这个博客之前我在CSDN也发布过一些文章,目前应该也是几千粉丝了,但是看到别人都是用自己博客写的就感觉自己很LOW,所以就想自己来搭建一个属于自己的个人博客。当然搭建博客的…...
java_网络服务相关_gateway_nacos_feign区别联系
1. spring-cloud-starter-gateway 作用:作为微服务架构的网关,统一入口,处理所有外部请求。 核心能力: 路由转发(基于路径、服务名等)过滤器(鉴权、限流、日志、Header 处理)支持负…...

51c自动驾驶~合集58
我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留,CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制(CCA-Attention),…...

定时器任务——若依源码分析
分析util包下面的工具类schedule utils: ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类,封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz,先构建任务的 JobD…...

NFT模式:数字资产确权与链游经济系统构建
NFT模式:数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新:构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议:基于LayerZero协议实现以太坊、Solana等公链资产互通,通过零知…...
浅谈不同二分算法的查找情况
二分算法原理比较简单,但是实际的算法模板却有很多,这一切都源于二分查找问题中的复杂情况和二分算法的边界处理,以下是博主对一些二分算法查找的情况分析。 需要说明的是,以下二分算法都是基于有序序列为升序有序的情况…...

网络编程(UDP编程)
思维导图 UDP基础编程(单播) 1.流程图 服务器:短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列,以便知晓哪些列包含有价值的数据,…...

听写流程自动化实践,轻量级教育辅助
随着智能教育工具的发展,越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式,也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建,…...
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
以下是一个完整的 Angular 微前端示例,其中使用的是 Module Federation 和 npx-build-plus 实现了主应用(Shell)与子应用(Remote)的集成。 🛠️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

基于TurtleBot3在Gazebo地图实现机器人远程控制
1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...