微信小程序的基础开发

微信小程序目录结构

一个小程序主体部分由三个文件组件,必须放在项目的根目录,

一个小程序page页面由四个文件组件,分别为:

,js文件:用来写JavaScript

wxml文件:写页面结构,可以理解为html

json: 里面是页面配置

wxss:用来写css样式的文件

wxml:

WXML和HTML非常相似,WXML由标签,属性等等构成。但是也有很多不一样的地方

1.标签名字有点不一样:例如HTML里的<div>标签在wxml中为<view>标签

2.有一些wx:if这样的属性以及{{ }}(插值表达式)这样的表达式

wxss:

跟css样式一模一样,只不过wxss多了一点自己的样式

js文件:

里面有很多生命周期函数,并且可以将方法和数据定义在里面

**注意:**描述页面的四个必须具有相同的路径与文件名。

小程序配置app.json

app.json是当前小程序的全局配置,也就是说在app.json中配置的东西会应用在每一个页面中。包括小程序的所有页面路径,界面表现,网络超时时间,底部tab等。

pages字段-----用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。

window字段------定义小程序所有页面的顶部背景颜色,文字颜色定义等。

其他配置项细节参考文档微信开发文档配置项

复制代码
{
  "pages": [
    "pages/home/home",
    "pages/index/index",
    "pages/user/user"
  ],
  "tabBar": {
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "/images/chaxun.png",
    },
    {
      "pagePath": "pages/user/user",
      "text": "用户",
      "iconPath": "/images/chaxun.png"
    }
  
  ]
  },
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Weixin",
    "navigationBarBackgroundColor": "#ffffff"
  },
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

以上就是微信小程序的项目目录结构的讲解

相关推荐
didiplus3 小时前
我在GitHub刷到一个诗词API,顺手写了款小程序
微信小程序
言乐66 小时前
Python实现可运行解密游戏游戏框架
python·游戏·小程序·游戏程序·关卡设计
2501_9151063216 小时前
iOS 软件测试工具性能监控、日志分析 KeyMob、Instruments等
android·ios·小程序·https·uni-app·iphone·webview
云迈科技-软件定制开发17 小时前
2026 AI智能体小程序APP开发怎么做:从场景规划到上线交付的完整参考
大数据·人工智能·小程序
小码哥06818 小时前
医院陪诊小程序怎么开发-医院陪诊小程序源码功能-微信小程序 医院健康陪诊陪护系统
微信小程序·小程序·医院陪诊·陪诊系统·陪诊陪诊
书中枫叶1 天前
从「上次几点喂奶」到全栈小程序:我做了个喂宝助手
mongodb·微信小程序·node.js
黄华SJ520it1 天前
柯尔嫚商城模式开发:从概念到实现的完整指南
小程序·系统开发
ssshooter1 天前
小程序分包页面报 "has not been registered yet" 的隐蔽根因:一个动态 import 拖垮整个分包
前端·javascript·微信小程序
黄华SJ520it2 天前
线上线下多门店融合系统开发指南
小程序·系统开发
一孤程3 天前
Airtest自动化测试第五篇:小程序与Web测试——跨平台自动化全覆盖
前端·自动化测试·小程序·自动化·测试·airtest