当前位置: 首页 > news >正文

微信小程序开发简易教程

微信小程序文件结构详解

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": "*"}]
}

文件命名规范

  1. 文件夹和文件名使用小写字母
  2. 多个单词使用连字符(-) 或下划线(_)连接
  3. 页面文件夹与文件名保持一致
  4. 组件文件夹使用有意义的名称

开发注意事项

  1. 生命周期管理

    • 合理使用页面和应用的生命周期函数
    • 在适当的生命周期处理数据加载和清理
  2. 数据管理

    • 使用 setData 更新数据
    • 避免频繁调用 setData
    • 合理使用全局数据
  3. 性能优化

    • 及时销毁不需要的定时器和事件监听
    • 合理使用组件和页面的懒加载
    • 优化图片资源
  4. 代码规范

    • 遵循统一的代码风格
    • 适当添加注释
    • 做好错误处理

相关文章:

微信小程序开发简易教程

微信小程序文件结构详解 1. 项目配置文件 project.config.json 项目的配置文件包含项目名称、appid、编译选项等配置示例&#xff1a; {"description": "项目配置文件","packOptions": {"ignore": []},"setting": {&quo…...

树莓派 发那科 Fanuc Linux跨平台CNC数控数据采集协议,TCP协议包

市面上的数控基本都支持了跨平台通讯&#xff0c;下面以发那科为列讲解跨平台协议如何通讯&#xff0c;无需任何DLL&#xff0c;适配任何开发语言&#xff0c;纯Socket通讯 先上采集图 握手包&#xff1a;a0 a0 a0 a0 00 01 01 01 00 02 00 02 释放包&#xff1a;a0 a0 a0 a…...

Ubuntu中安装配置交叉编译工具并进行测试

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

C++核心day3作业

作业&#xff1a; 1.整理思维导图 2.整理课上代码 3.把课上类的三个练习题的构造函数写出来 函数全部类内声明&#xff0c;类外定义 定义一个矩形类Rec&#xff0c;包含私有属性length、width&#xff0c;包含公有成员方法&#xff1a; void set_length(int l); //设置长度v…...

socket UDP 环路回显的服务端

基于socket通讯的方式&#xff0c;无论用http或者udp或者自定义的协议&#xff0c;程序结构都是类似的。这个以UDP协议为例简要说明。 #include <stdio.h> // 标准输入输出库 #include <sys/types.h> // 提供了一些数据类型&#xff0c;如ssize_t #include <sy…...

springboot/ssm车辆违章信息管理系统Java代码web项目汽车违章处罚源码

基于springboot(可改ssm)htmlvue项目 springboot/ssm车辆违章信息管理系统Java代码web项目汽车违章处罚源码 开发语言&#xff1a;Java 框架&#xff1a;springboot/可改ssm vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&…...

5G模组AT命令脚本-关闭模组的IP过滤功能

关闭模组的IP过滤功能 关闭模组的IP过滤功能 5G 模组通常使用nat方式为 下挂设备或上位机提供上网服务&#xff0c;默认情况&#xff0c;不做NAt的包无法经由 模组转发&#xff0c;如果禁掉这个限制 &#xff0c;可使用本文中的配置命令本脚本用于关闭模组的IP过滤功能&#xf…...

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 查看可安装列表时发现&#xff0c;列表中只有 iojs 解决方法&#xff1a; 可以使用以下命令查看可安装…...

Spring Boot 中 WebClient 的实践详解

在现代微服务架构中&#xff0c;服务之间的通信至关重要。Spring Boot 提供了 WebClient&#xff0c;作为 RestTemplate 的替代方案&#xff0c;用于执行非阻塞式的 HTTP 请求。本文将详细讲解 WebClient 的实践&#xff0c;包括配置、使用场景以及常见的优化策略&#xff0c;帮…...

在GITHUB上传本地文件指南(详细图文版)

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

【大模型系列篇】LLaMA-Factory大模型微调实践 - 从零开始

前一次我们使用了NVIDIA TensorRT-LLM 大模型推理框架对智谱chatglm3-6b模型格式进行了转换和量化压缩&#xff0c;并成功部署了推理服务&#xff0c;有兴趣的同学可以翻阅《NVIDIA TensorRT-LLM 大模型推理框架实践》&#xff0c;今天我们来实践如何通过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的高校专业实习管理系统的设计与实现

文末获取源码和万字论文&#xff0c;制作不易&#xff0c;感谢点赞支持。 设计题目&#xff1a;基于spring boot的高校专业实习管理系统的设计与实现 摘 要 随着国内市场经济这几十年来的蓬勃发展&#xff0c;突然遇到了从国外传入国内的互联网技术&#xff0c;互联网产业从开…...

OpenCV相机标定与3D重建(11)机器人世界手眼标定函数calibrateRobotWorldHandEye()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 计算机器人世界/手眼标定&#xff1a; w T b _{}^{w}\textrm{T}_b w​Tb​ 和 c T g _{}^{c}\textrm{T}_g c​Tg​。 cv::calibrateRobotWorldHa…...

计算机网络ENSP课设--三层架构企业网络

本课程设计搭建一个小型互联网&#xff0c;并模拟Internet的典型Web服务过程。通过此次课程设计&#xff0c;可以进一步理解Internet的工作原理和协议过程&#xff0c;并提高综合知识的运用能力和分析能力。具体目标包括&#xff1a; &#xff08;1&#xff09;掌握网络拓扑的…...

【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/分支名 示例&#xff1a;git checkout origin/dev 四、拉取远程分支代码 git pull origin 分支名 示例&#xff1a;git pull origin dev 五、常用指令 查看暂存区…...

【2025最新版】搭建个人博客教程

【2025最新版】搭建个人博客教程 –小记&#xff1a; 在搭建我的这个博客之前我在CSDN也发布过一些文章&#xff0c;目前应该也是几千粉丝了&#xff0c;但是看到别人都是用自己博客写的就感觉自己很LOW&#xff0c;所以就想自己来搭建一个属于自己的个人博客。当然搭建博客的…...

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

51c自动驾驶~合集58

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

定时器任务——若依源码分析

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

NFT模式:数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...

网络编程(UDP编程)

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

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

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

听写流程自动化实践,轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

Angular微前端架构:Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 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…...