微信小程序简介
可以通过阅读微信官方文档对小程序有一个初步的了解,在官方文档内也可以学习到如何进行小程序的环境配置,官方文档链接如下:
https://developers.weixin.qq.com/miniprogram/dev/framework/
环境配置过程
第一步,申请账号
微信扫码登录微信公众平台,按要求填写相关消息,注册自己的小程序账号,注册成功后可以获得自己的APPID,方便后期调⽤微信⼩程序的接⼝、支付等功能
微信公众平台链接:http://mp.weixin.qq.com
![](https://img-blog.csdnimg.cn/c6f86566f7dd47fcb794f65872e5acbb.png)
![](https://img-blog.csdnimg.cn/403c59782ee14eb39aeb9e7bf05b4987.png)
第二步,安装开发者工具
微信提供免费的小程序开发工具,链接如下
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
选择自己电脑对应的版本下载安装包,安装过程中注意一下安装路径即可
第三步,新建一个项目
打开开发者工具,点击新建
![](https://img-blog.csdnimg.cn/c3822c0bb4d34767a48ca4781f646bd3.png)
选择目录,填写APPID,勾选不使用云服务
![](https://img-blog.csdnimg.cn/2791fc659fe040ffa7adaba3d6138af6.png)
点击确认后,就可以得到自己的第一个小程序,工作页面如下:
![](https://img-blog.csdnimg.cn/4333320822c64a40a3c23b9ae8e0bdae.png)
项目目录结构
- 小程序项目结构与传统web相比
|
传统web |
微信小程序 |
结构 |
HTML |
WXML |
样式 |
CSS |
WXSS |
逻辑 |
JavaScript |
JavaScript |
配置 |
无 |
JSON |
2.小程序基本目录结构
![](https://img-blog.csdnimg.cn/f0c08e5912f24a0f99fc80cebc6e3c7e.png)
pages |
用来存放所有小程序的页面 |
utils |
用来存放工具性质的模块 |
.eslintrc.js |
eslintrc工具的配置文件(使代码更加一致并避免错误) |
app.js |
小程序项目入口文件 |
app.json |
小程序项目全局配置文件 |
app.wxss |
小程序项目全局样式文件 |
project.config.json |
项目公共配置文件 |
project.private.config.json |
项目个人配置文件(优先级高于公共) |
sitemap.json |
微信索引配置文件 |