从零单排微信小程序--[0]:Hello World

该系列文章是在观看了慕课网的实战课程“微信小程序入门与实战”后的一些所思所想，将学习中所遇到的一些问题列出来，以供大家参考

0:如何开始微信小程序的编写

开发工具的下载：点击打开链接,开发文档：点击打开链接

开发工具的安装非常简单，跟普通程序的安装一样，这里就不列举了。运行之后的界面如下：



点击添加项目后的界面



如果没有AppID时，第一项选择“无AppID”，这样不会影响开发，只是开发出来的项目不能在真机上浏览。项目名称自己取，项目目录选择一个文件夹，初始化就可以了(可以把在当前目录中创建
quick start 项目 前面的勾选中，这样会产生默认的项目结构代码)

创建后的项目目录如图



1.项目结构说明

根目录有三个文件，app.js,app.json,app.wxss.

app.js是项目的脚本文件，app.json为项目的配置文件,app.wxss为项目的样式文件,具体的配置可以参见官方文档

pages目录下是每个页面的文件，每个页面的文件也包括.js .json .wxss,wxml文件，其中第四个是页面的骨架文件，可以联想为一般web开发中的html文件

2.写一个Hello World呗

现在，我们来写我们的第一个页面，即hello world页面

首先，先删除pages下的文件夹,然后再wenlcome文件夹下面依次新建.json,.wxss,.wxml,.js文件，现在的项目结构如图所示



这时候所有的文件都是空的，此时编译，会提示如下错误



查阅文档后发现，新增加一个页面时，要在app.json里进行相应的配置，所以给这个文件做如下代码的编写

{
"pages":[
"pages/welcome/welcome"
]
}

这些代码的作用就是注册一个页面，具体到代码里，它告诉IDE，寻找一个在pages文件夹下，welcome文件夹下的名叫welcome.wxml文件

增添了这些后，调试依然出错



这个错误的原因是没有在welcome.js中配置Page函数，那我们配置一个空的Page函数如下

Page({

})

编译不会报错

此时我们去编写welcome.wxml文件，也就是页面文件,代码如下

<view>
<text>hello world</text>
</view>

这里，view标签和text标签都是微信小程序官方所定义的标签，具体的设置请前去官方文档，这里我们可以简单的理解为view就相当于div标签，text就相当于p标签，

这是刷新页面，控制台无报错，但是模拟器中是空白，这是怎么回事呢？

这里也让我纠结了好久，后来查到原因是welcome.json里没有配置，所以配置如下

{

}

这样，就能看到我们的hello world啦,

如果还是不能解决，并且确定代码没有任何问题，那么建议按照以下步骤尝试：

在调试-》缓存里清除数据、文件缓存；

完全退出微信开发者工具；

再次打开微信开发者工具；

然后再编译一下小程序；

以上步骤一般来说是可以解决问题的。



我们的第一步教程就到此为止啦，下面的教程将沿着学习的脚步，一起制作第一个小程序！