微信小程序从入门到学会第一天-运行第一个小程序

一、前言

从今天开始小编将带大家一起来学习微信小程序的开发，作为依托于微信的产品，微信小程序的热度的确是不容忽视的，而且推广的话也会有很多优势，毕竟不用像app一样要安装那么麻烦，只要把微信打开即可以使用，那么接下来咱们就来一睹微信小程序的风采吧。

二、开通微信公众号并下载微信开发者工具

首先我们需要打开微信公众号，然后注册一个订阅号即可，注册完毕后登录并进入公众号后台，如图：

然后选择开发者工具，并选择开发者文档，如图：

此时，打开新页面后选择小程序，如图：

然后我们选择工具选项，如图：

然后选择微信开发者工具，如图：

点击它，然后就来到了微信开发者工具的版本下载位置，如图：

我们选择稳定版，下载好后安装它，如图：

选择安装位置，如图：

点击安装，此时静静等待安装即可，安装好后，直接点击运行，第一次运行会弹出一个二维码框，如图：

然后我们用绑定这个公众号的微信号来扫码，如图：

然后我们点击加号，此时就可以创建小程序，如图：

这里有一个appid，我们可以通过小程序来获取，首先我们退出公众号的登录，然后点击小程序，如图：

然后点击前往注册，如图：

这里我们可以选择申请测试号，然后扫个码即可，不过由于这里小编已经有了测试号，因此直接扫码登录即可，如图：

此时就可以把这个AppID填写进去了，点击确定就可以打开开发者工具了，如图：

三、项目文件结构

我们来看下项目中的文件所代表的意思，如下：

pages

index

index.js页面js

index.json页面配置

index.wxml页面结构

index.wxss页面样式

logs

log.js日志js

log.json日志配置

log.wxml日志结构

log.wxss日志样式

util

util.js 公用js

.eslintrc.js eslint配置，检查es6中的语法错误

app.js全局js

app.json静态全局配置

app.wxss全局样式文件

project.config.json开发者工具的配置

sitemap.json是否被微信索引

小程序主要是从app.js文件中获取用户数据，从app.wxss中设置界面样式，从app.json中配置跳转的第一个页面，默认跳转page标签里的index.wxml页面。当然你可以自行配置。

四、小程序测试上线发布

当一切都准备完毕后，如果我们想要在手机上测试自己的小程序的时候，只需要点击预览即可，如图：

然后就可以在手机上看到效果了；我们从我们创建的小程序可以看到，此时的小程序是无法上传的，那么这是为什么了？其实这就是测试号的问题，所以我们需要自行注册一个小程序，当然，这就需要我们自备一个邮箱了，如图：

填写完毕后再去我们填入的邮箱处打开腾讯发给我们的邮件，里面有一个激活链接，此时点击就可以使用了，如图：

此时我们使用该AppID来创建一个小程序，当然，由于我使用了另一个微信号来注册这个小程序，因此还需重新扫码这个AppID才有用，意思就是用哪个微信号绑定的小程序AppID就用哪个号扫码了创建微信小程序，如图：

此时就有了上传按钮，我们点击它，就可以进行上传了，如图：

此时我们再去小程序的后台，可以发现版本管理中就多了个我们刚刚上传的开发版本的提交记录，如图：

此时我们点击提交审核后，会出现无法提交，这是因为小程序信息没有填写完整，所以我们需要填写，如图：

填写完毕后，然后再次上传我们的项目，这个时候就可以提交审核了，如图：

然后按照提示一步步操作就可以进行提交审核了，接下来就是慢慢等待审核工作是否完成了，这里我填写的小程序信息是"简易编程网",感兴趣的小伙伴们可以试试，是否能搜索到该小程序。不过这里有一点需要注意的是，不能提交一个demo形式的项目，必须要是正式的。后续小编将会告诉大家如何才能通过审核。

五、总结

本文和大家一起讲述了小程序的创建和小程序所对应的文件的作用，由于咱们后期的作品还有很多都涉及到线上使用，所以这里咱们以后都会选择使用正式注册的小程序，而非测试号；下篇文章小编将带大家一起来讲讲关于小程序项目的各项配置。