微信小程序工具的使用及其参数含义。

不念不忘少年蓝@ 2023-10-05 22:01 5阅读 0赞

官方文档：

[目录结构 | 微信开放文档][Link 1]

进入[小程序注册页：][Link 2][小程序][Link 2] 根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号。

![2a6e4fa31528e89109ae641400fcff55.png][]

在这个小程序管理平台，你可以管理你的小程序的权限，查看数据报表，发布小程序等操作。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Lmd5bCYMDAx_size_20_color_FFFFFF_t_70_g_se_x_16][]

小程序的 AppID 相当于小程序平台的一个身份证，后续你会在很多地方要用到 AppID （注意这里要区别于服务号或订阅号的 AppID）。

有了小程序帐号之后，我们需要一个工具来开发小程序。

### 安装开发工具 ###

前往 [开发者工具下载页面][Link 4] ，根据自己的操作系统下载对应的安装包进行安装，有关开发者工具更详细的介绍可以查看 [《开发者工具介绍》][Link 5] 。

打开小程序开发者工具，用微信扫码登录开发者工具，准备开发你的第一个小程序吧！

### 你的第一个小程序 ###

新建项目选择小程序项目，选择代码存放的硬盘路径，填入刚刚申请到的小程序的 AppID，给你的项目起一个好听的名字，勾选 "不使用云服务" （注意: 你要选择一个空的目录才可以创建项目），点击新建，你就得到了你的第一个小程序了，点击顶部菜单编译就可以在微信开发者工具中预览你的第一个小程序。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Lmd5bCYMDAx_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

填入自己的AppID:

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Lmd5bCYMDAx_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

**确定后可以看见一下目录，首先我们来了解一下目录结构：**

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Lmd5bCYMDAx_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

在这个包下创建另外一个页面，若是想让它默认显示，需要放在第一行：

### page: ###

用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。文件名不需要写文件后缀，框架会自动去寻找对应位置的 `.json`, `.js`, `.wxml`, `.wxss` 四个文件进行处理。

未指定 `entryPagePath` 时，数组的第一项代表小程序的初始页面（首页）。

官方文档：

[全局配置 | 微信开放文档][Link 6]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Lmd5bCYMDAx_size_20_color_FFFFFF_t_70_g_se_x_16 4][]

ctrl+s保存成功后，微信小程序工具会自动创建页面。

### **window全局属性查看官方文档：** ###

[全局配置 | 微信开放文档][Link 7]

### tabBar ###

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

官方文档：

[全局配置 | 微信开放文档][Link 8]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Lmd5bCYMDAx_size_20_color_FFFFFF_t_70_g_se_x_16 5][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Lmd5bCYMDAx_size_20_color_FFFFFF_t_70_g_se_x_16 6][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Lmd5bCYMDAx_size_20_color_FFFFFF_t_70_g_se_x_16 7][]

\---------------------------------------------------------------------------------------------------------------------------------

### **这里推荐一个图标库：** ###

#### 第一步 下载自己喜欢的图标 ####

我用的是阿里巴巴矢量图库，在[Iconfont][]找到自己喜欢的图标：

搜索自己想要的图标：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Lmd5bCYMDAx_size_20_color_FFFFFF_t_70_g_se_x_16 8][]

**加入购物车**，如图：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Lmd5bCYMDAx_size_20_color_FFFFFF_t_70_g_se_x_16 9][]

页面顶部找到自己的购物车：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Lmd5bCYMDAx_size_20_color_FFFFFF_t_70_g_se_x_16 10][]

里面有你选择好的图标，选择你想要的格式后会自动下载：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Lmd5bCYMDAx_size_20_color_FFFFFF_t_70_g_se_x_16 11][]

\--------------------------------------------------------------------------------------------------------------------------------

### 页面配置文件： ###

你自己创建的页面包下的：\*\*.json文件

这里可以配置各个页面的单独window属性：

官方文档：

[页面配置 | 微信开放文档][Link 9]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Lmd5bCYMDAx_size_20_color_FFFFFF_t_70_g_se_x_16 12][]

### sitemap 配置--了解即可 ###

小程序根目录下的 `sitemap.json` 文件用于配置小程序及其页面是否允许被微信索引，文件内容为一个 JSON 对象，如果没有 `sitemap.json` ，则默认为所有页面都允许被索引；

官方文档：

[sitemap 配置 | 微信开放文档][sitemap _ _]

后续持续更新！！！！！

[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html
[Link 2]: https://mp.weixin.qq.com/wxopen/waregister?action=step1
[2a6e4fa31528e89109ae641400fcff55.png]: https://img-blog.csdnimg.cn/img_convert/2a6e4fa31528e89109ae641400fcff55.png
[Link 3]: https://mp.weixin.qq.com/
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Lmd5bCYMDAx_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/f461e33e9583416f8dd69e7fb605e167.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lmd5bCYMDAx,size_20,color_FFFFFF,t_70,g_se,x_16
[Link 4]: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
[Link 5]: https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Lmd5bCYMDAx_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/a330b6a8dd0f4cb49b307b33d275cad0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lmd5bCYMDAx,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Lmd5bCYMDAx_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/629aa714bd7243888ed95d7ebbb99aef.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lmd5bCYMDAx,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Lmd5bCYMDAx_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/4ae72d9745b245b7ac810cdc1d4a339b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lmd5bCYMDAx,size_20,color_FFFFFF,t_70,g_se,x_16
[Link 6]: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#pages
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Lmd5bCYMDAx_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/374b908db1a2456b93fb38fe9795b5ac.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lmd5bCYMDAx,size_20,color_FFFFFF,t_70,g_se,x_16
[Link 7]: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#window
[Link 8]: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Lmd5bCYMDAx_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/76b24c8cec354a2eb8f73f83c167c79a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lmd5bCYMDAx,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Lmd5bCYMDAx_size_20_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/c523a7c63f914e9e99a6194bd8484de4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lmd5bCYMDAx,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Lmd5bCYMDAx_size_20_color_FFFFFF_t_70_g_se_x_16 7]: https://img-blog.csdnimg.cn/1984d78ce8d64274b3b70bf628a7e783.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lmd5bCYMDAx,size_20,color_FFFFFF,t_70,g_se,x_16
[Iconfont]: http://www.iconfont.cn/
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Lmd5bCYMDAx_size_20_color_FFFFFF_t_70_g_se_x_16 8]: https://img-blog.csdnimg.cn/90649fa1acb646bd9dba6685382b1cd1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lmd5bCYMDAx,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Lmd5bCYMDAx_size_20_color_FFFFFF_t_70_g_se_x_16 9]: https://img-blog.csdnimg.cn/406c0d16062e4ce8a356d748a4b51bb3.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lmd5bCYMDAx,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Lmd5bCYMDAx_size_20_color_FFFFFF_t_70_g_se_x_16 10]: https://img-blog.csdnimg.cn/3104c95839cd44f8accbcaec51669cd0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lmd5bCYMDAx,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Lmd5bCYMDAx_size_20_color_FFFFFF_t_70_g_se_x_16 11]: https://img-blog.csdnimg.cn/5789a5e516694427b3d04dfa9db0d746.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lmd5bCYMDAx,size_20,color_FFFFFF,t_70,g_se,x_16
[Link 9]: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Lmd5bCYMDAx_size_20_color_FFFFFF_t_70_g_se_x_16 12]: https://img-blog.csdnimg.cn/2737cdd8c41a4b438f222597d403ef3c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lmd5bCYMDAx,size_20,color_FFFFFF,t_70,g_se,x_16
[sitemap _ _]: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/sitemap.html