微信小程序day01_02之微信开发者工具运行helloworld

柔情只为你懂 2022-03-15 04:24 396阅读 0赞

### 文章目录 ###

*   *   *  一.微信开发者工具下载
         *  二.小程序创建第一个项目和界面介绍
         *  三.小程序的目录结构

### 一.微信开发者工具下载 ###

在如下的链接中, 可进行开发者工具的下载,如下图所示  
[https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html][https_developers.weixin.qq.com_miniprogram_dev_devtools_download.html]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70][]

### 二.小程序创建第一个项目和界面介绍 ###

下载完了小程序后, 即可打开如下的界面. 填写如下的信息. 其中目录部分,相当于eclipse的工作空间.  
AppID 可以用测试号即可  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1][]  
填写完上图的信息后, 点击新建, 即可创建一个新的项目了,界面如下图.  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2][]  
在软件界面的左上角有如下的三个图标.  
其中模拟器代表左侧的模拟手机. 编辑器代表右上方代码部分. 调试器代表右下方的调试部分.  
![20190303105217645.png][]

### 三.小程序的目录结构 ###

小程序的目录结构如下图,其中  
app.js, app.json.app.wxss 只有一个. app.wxss的本质为css,而微信自身封装了一层  
![20190303105644661.png][]  
其中pages目录为页面的文件夹.  
index.wxml为页面, 类似于html.  
而index.js和index.wxss 为页面的css. 和js  
![20190303110005102.png][]  
点击头像, 可以看到小程序的启动日志.  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 3][]  
日志的数据, 来源于logs目录. 把页面的目录记录下来,并进行展示.  
![20190303110838886.png][]

[https_developers.weixin.qq.com_miniprogram_dev_devtools_download.html]: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70]: /images/20220315/6cfa401775ee42b9a9c7a587ed75fbad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1]: /images/20220315/d9602a13040b4fd48638caf2f11cb98b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2]: /images/20220315/e2d43a4f3a484b7482e09ac46a96e2cf.png
[20190303105217645.png]: /images/20220315/edbb10de1fe14233a429761b08d1ae98.png
[20190303105644661.png]: /images/20220315/9cef1fbbfe4547de9fa359ce9ab9517f.png
[20190303110005102.png]: /images/20220315/241373639fb74f768b08b11ff76c169c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 3]: /images/20220315/8de5198cd15f48dab619490421369b90.png
[20190303110838886.png]: /images/20220315/767d65ff5bfd4fce96f2d6134773de04.png