微信小程序开发简易教程

server/2024/12/16 23:00:47/

小程序>微信小程序文件结构详解

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. 代码规范

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

http://www.ppmy.cn/server/150742.html

相关文章

Windows如何安装Php 7.4

一、进入官网&#xff0c;选择其他版本 https://windows.php.net/download/ 二、配置环境变量 将解压后的php 路径在系统环境变量中配置一下 cmd 后输入 php-v

JPG 转 PDF:免费好用的在线图片转 PDF 工具

JPG 转 PDF&#xff1a;免费好用的在线图片转 PDF 工具 在日常工作和生活中&#xff0c;我们经常需要将图片转换为 PDF 格式。无论是制作电子文档、准备演示材料&#xff0c;还是整理照片集&#xff0c;将图片转换为 PDF 都是一个常见的需求。今天为大家介绍一款完全免费、无需…

Dubbo生产者一次请求的过程 (Dubbo源码三)

Dubbo生产者一次请求的过程 &#xff08;Dubbo源码三&#xff09; https://www.bilibili.com/video/BV1FJSCY9E85 相较于Dubbo消费者一次请求的过程&#xff0c;生产者的流程相对复杂一些&#xff0c;主要是因为触发点不好找。 这篇文章通过解决以下三个问题来学习源码 请求的…

opencv——图片矫正

图像矫正 图像矫正的原理是透视变换&#xff0c;下面来介绍一下透视变换的概念。 听名字有点熟&#xff0c;我们在图像旋转里接触过仿射变换&#xff0c;知道仿射变换是把一个二维坐标系转换到另一个二维坐标系的过程&#xff0c;转换过程坐标点的相对位置和属性不发生变换&a…

mysql的执行计划分析和索引下推以及索引长度计算

1 执行计划介绍 执行计划&#xff08;Execution Plan&#xff09;是数据库查询优化的重要工具&#xff0c;用于展示数据库如何执行 SQL 查询的详细过程。它包含了查询操作的步骤、各个步骤的执行顺序、使用的索引、访问的表、连接方式、预计的成本等信息 可以显示SQL语句最终…

腾讯云海外服务器Window切换为linux系统(从Window DD 到 Linux)

腾讯云提示&#xff1a;不支持重装为该镜像&#xff0c;非中国大陆地域不支持Linux系统和Windows系统之间互转 买了腾讯云的海外服务器&#xff0c;重装系统的时候发现无法切换&#xff0c;直接dd到linux系统&#xff0c;以下是全过程。记录一下。 主要是用到一个开源项目&…

vue3 setup语法,子组件点击一个元素打印了这个元素的下标id,怎么传递给父组件,让父组件去使用

问&#xff1a; vue3 setup语法&#xff0c;子组件点击一个元素打印了这个元素的下标id&#xff0c;怎么传递给父组件&#xff0c;让父组件去使用 回答&#xff1a; 在 Vue 3 中&#xff0c;你可以使用 setup 语法糖和组合式 API 来实现子组件向父组件传递数据。具体来说&am…

电脑win11家庭版升级专业版和企业版相关事项

我的是零刻ser9&#xff0c;自带win11家庭版&#xff0c;但是我有远程操控需求&#xff0c;想用windows系统自带的远程连接功能&#xff0c;所以需要升级为专业版。然后在系统激活页面通过更改序列号方式&#xff0c;淘宝几块钱买了个序列号升级成功专业版了。但是&#xff0c;…