7天入门小程序开发 | 小程序版Hello World

        这里面向初学者整理快速掌握小程序开发入门的教程，阅读教程、完成相应的开发任务，相信7天之后肯定有另一番感悟和收获。

        第一节课就是熟悉官方文档、开发流程、使用开发工具完成第一个小程序的运行。

1. 官方文档

https://developers.weixin.qq.com/miniprogram/dev/framework/

        作为刚入门的开发者来说，小程序和APP或者网页的开发模式都是类似的，需要开发前端显示的页面、后台处理逻辑、数据存储和处理。

        查看小程序官方文档，这里包含了开发中所需要的所有信息，如果没有直接找到你要的信息，也可以通过搜索引擎进行查找。

        首先了解下小程序开发中最常用修改的几个文件如下，更多介绍可以通过上面链接查看。

• WXML模板，最常用到的文件之一，小程序界面看到的内容都在这里定义，网页中常用div标签，而小程序中替换成了view标签，使用起来大同小异。
• WXSS样式，只有WXML模板看起来太单调，字体、按钮、表单等等没有丰富的颜色、样式，所以要有更佳的页面体验就需要WXSS样式了，和网页开发中的CSS大同小异。
• JS逻辑交互，如果只有前面两个，那么所有页面都是静态的，没办法添加一条数据、也没办法删除或修改数据，这个功能就是JS逻辑交互实现的，当然在这里还会和数据库进行交互。
• JSON配置，配置文件，在Hello World小程序中可以完全忽略这个文件，后面再看。

2. 微信小程序开发工具

        微信小程序官方提供了标准的开发工具，无论是Windows还是Mac都能非常方便的进行下载、安装、使用。下载链接如下：

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

        下载安装好开发工具之后需要用微信扫描进行登录。之后创建第一个项目，AppID这里我们先选用测试号来快速运行第一个小程序，模板可以选择“JavaScript-基础模板“。

3. 开发第一个小程序

        创建完成第一个项目后会跳转到如下视图，也就是正式的微信小程序开发工具了。左侧会显示小程序预览页面，中间就是小程序的目录文件，右侧是文件编辑器。

        因为前面创建的是“JavaScript-基础模板”，所以已经包含了默认的两个模块：首页和日志页面。

创建第一个文件夹和文件

        在中间视图目录中点击pages，右键创建文件夹”helloworld“。

        点击helloworld目录，右键选择创建pages，名称为”index“。

编辑pages/helloworld/index.wxml

        接下来就可以编写第一个文件啦，其中helloworld目录就是我们的第一个模块，前面说过WXML是用于页面展示的，我们通过view标签来编写。

<!--pages/helloworld/index.wxml-->
<text>pages/helloworld/index.wxml</text>


<view class="title">
  Hello World!
</view>
<view class="time">
  2022.4.16 20:28:00
</view

编辑pages/helloworld/index.wxss

        再切换到helloworld目录中的WXSS文件中，用来定义样式。

/* pages/helloworld/index.wxss */


.title {
    font-size: 20px;
    color: #FF8800;
}


.time {
    color: #FFFFFF;
    background-color: #333333;
}

编辑pages/helloworld/index.wxss

        编辑app.json，添加以下代码来显示小程序底部菜单。相信这几行代码还是比较容易理解的，包括显示的名称和跳转的路径。

"tabBar": {
        "backgroundColor": "#FFFFFF",
        "color": "#333333",
        "list": [
            {
                "pagePath": "pages/index/index",
                "text": "index"
            },
            {
                "pagePath": "pages/helloworld/index",
                "text": "helloworld"
            },
            {
                "pagePath": "pages/logs/logs",
                "text": "logs"
            }
        ]
    }

TIPS

不要忘记第14行代码末尾的逗号​

4. 大功告成

所有的都准备好了，记得前面修改的几个文件都要保存，直接按”Ctrl+S“一样的效果。

然后点击开发工具上方的”预览“按钮吧，左侧已经在修改文件保存后就刷新了，”预览“按钮可以在手机中扫码/推送查看预览效果了。

第一个小程序就这样完成啦！

更多功能或者更多模块，可以重复以上步骤继续修改。当然更多WXSS样式可以查看官方文档或直接找搜索引擎检索。

5. 注册账号

        不是已经大功告成了么，怎么还有注册账号。其实上面使用的AppID是测试号，只能自己体验，还不能分享给其他人。

        那注册账号这么重要的环节为什么不放在最前面去介绍呢，试想下，本来就是入门教程在第一步就一大堆繁琐的步骤，还是Abandon吧。所以等第一个小程序页面开发完成之后再做一些改进。

        点击以下链接可以注册账号，需要从未注册过小程序/微信公众号的邮箱来申请，如果没有邮箱或者邮箱已经被占用，再申请个邮箱也是非常快的。

https://mp.weixin.qq.com/cgi-bin/registermidpage?action=index&lang=zh_CN&token=

注册好账号，可以登录到控制台了。在”开发管理“页面中可以看到AppID，另外还可以申请AppSecret，记得AppSecret只会显示一次，记得保密使用，如果忘记了或者已经泄露，需要及时进行重置操作。

复制上面的AppID，在小程序开发工具中找到app.json，修改”appid“，这样就和你的小程序账号绑定到一起了。

在”成员管理“界面添加”项目成员“和”体验成员“。

在”版本管理“界面中可以查看到已经提交的开发等版本，将二维码发给项目成员和体验成员，就能看到和你一样的小程序了。

作业

看十遍不如操作一遍

作业并不强制

但期待你的加入

把你的第一个helloworld或其他名称的小程序截图提交过来吧

分享给其他同学

一起交流、一起进步！