微信小程序项目和目录结构以及各个文件夹和文件的作用

时间:2024-03-20 21:46:56

微信小程序项目目录结构以及各个文件夹和文件的作用

pages文件夹,utils文件夹,全局文件app.js文件,全局文件app.json文件,

样式app.wxss文件,项目配置文件project.config.json,页面收录配置文件

sitemap.json。

在这里插入图片描述

微信小程序项目和目录结构以及各个文件夹和文件的作用


pages:

        存放小程序的页面文件,书写各个页面代码以及组件

    1

utils文件夹:

        存放全局的一些.js文件,公共用到的一些事件处理代码文件可以放到该文件夹下,用于全局调用。

    1

App.js文件:

        小程序入口文件,用于定义全局数据和函数的使用,可以指定微信小程序的生命周期函数。

    1

App.json文件:

    对小程序进行配置,小程序的全局配置,小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等; 我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口及背景色,配置导航条样式,配置默认标题。

    1

App.wxss文件:

    全局的样式文件。

    1

project.config.json文件:

    保存开发工具配置项

    1

sitemap.json:

    网站地图,可以对小程序进行seo优化,让搜索排名靠前

1)注册微信小程序

在创建自己的微信小程序之前,首先需要注册小程序账号,有如下账号类型:

微信小程序项目和目录结构以及各个文件夹和文件的作用

微信小程序项目和目录结构以及各个文件夹和文件的作用

2) 安装工具,创建项目:

  第一步:下载微信小程序开发者工具并安装,下载路径:

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

微信小程序项目和目录结构以及各个文件夹和文件的作用

第二步:安装登录工具

开发者工具安装完成后我们就可以将其打开,初次打开会需要用微信扫码登录,如下图,用手机微信扫一扫后确认登录就可以了。

微信小程序项目和目录结构以及各个文件夹和文件的作用

第三步:选择一个项目类型

登录成功后,如果是第一次使用该工具会弹出选择项目类型的窗口:

微信小程序项目和目录结构以及各个文件夹和文件的作用

第四步:创建一个项目

选择项目类型成功后,会弹出创建项目的窗口,如下图:

微信小程序项目和目录结构以及各个文件夹和文件的作用

进入界面:

微信小程序项目和目录结构以及各个文件夹和文件的作用

微信小程序模板:

  https://gitee.com/gg914/BusGroup?_from=gitee_search

  https://gitee.com/hnjihai/uniapp?_from=gitee_search

https://gitee.com/xzhema/wechat?_from=gitee_search

https://gitee.com/xiaozhou946/mpvueModel?_from=gitee_search

https://gitee.com/xiaoling0904/wechat_applet?_from=gitee_search