微信小程序预热(一)：如何开启第一个小程序

深藏阁楼爱情的钟 2022-01-26 10:51 402阅读 0赞

正所谓万事开头难，走出第一步，后面也就顺其自然走上来了，当我要开始学习小程序的时候，看了两天的小程序官方开发文档，但是仍然不知道怎么创建我自己的一个小程序。

所以我决定在这个晚上结束这种畏惧的状态，打开笔记本，开始第一步预热操作。

## 1.小程序说明 ##

小程序有一套健全的官方开发文档，中文模式，基本都能看的懂。文档中对小程序的介绍如下：

小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

## 2.环境安装 ##

根据自己的系统下载安装对应的开发者工具，[\----下载-----][----_-----]。

根据提示一路next安装，完成之后桌面图标如下;

![微信开发者工具图标][20190528213031868.png]  
打开小程序开发者工具，用微信扫码登录开发者工具，如下：

![微信开发工具页面][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70]

![登录后的页面][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 1]

## 3.小程序之Hello world ##

1.  创建工程项目
    
    点击上图中的+号，新建小程序项目，步骤：填写项目名称和存放路径----->填写AppID(可注册使用自己的，也可使用测试号)------>选择小程序开发模式----->点击新建按钮。如下图：
    
    ![小程序新建项目][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 2]  
    一定要注意了，项目存放目录一定要是空目录，否则会报错，如下：

![目录提示][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 3]

项目工程新建成功后页面如下：  
![微信开发工具页面][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 4]

1.  编写hello world
    
    可以先删除创建项目时默认的代码
    
    1.在index.wxml文件中写代码：
    
    `<text class='hello'>Hello world!!!</text>`  
    ![helloworld][]  
    2.在index.wxss文件中编写样式，类似css文件。
    
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 5]  
    3.在app.json文件中配置页面路径。
    
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 6]  
    综上效果为：
    
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 7]
    
    每个文件的作用和配置[请看这里微信小程序预热2][2]。

## 每天进步一点点、充实一点点、加油！！！ ##

[----_-----]: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
[20190528213031868.png]: /images/20220126/e32a05bf304d4f9ca1bdbf791ee4e9ae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70]: /images/20220126/0a7f844ea5664dfbae70d86a76eb8799.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 1]: /images/20220126/7a41dfe727c548d7b3df441f1ac3533c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 2]: /images/20220126/97139e2ff0464762a7612dc21401b59c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 3]: /images/20220126/c14d0df50447447988a0bf4ef072217b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 4]: /images/20220126/d7d62685fd044c49acd29cc054d40c5b.png
[helloworld]: /images/20220126/38944e29809a424889525a20599d25b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 5]: /images/20220126/4ac498d14e4c45f28e447a6da906c78a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 6]: /images/20220126/cacd858db0754dc881016e65076f3194.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 7]: /images/20220126/7b8aed43ad4845a2b551bb8300f3813c.png
[2]: https://blog.csdn.net/w1418899532/article/details/90666894