JB的小程序之旅-HelloWorld

前言

不懂前端的测试狗很痛苦，曾经幻想过学习各种前端，但后来基本都半途而废了，最近在负责小程序的项目，后面也会越来越多，前段时间整理了一份小程序测试的资料，最近老板们说小程序研发能力不够，而自己也想弄一个小程序+学习前端，所以就临时决定学习小程序~

备注，讲的东西是面对小白，大神们求轻喷~

工具准备

工欲善其事必先利其器，小程序的概念之前整理小程序测试的时候已经有了，这里不多说，那我们直接去找开发工具吧！传送门

脑残式下载安装打开，打开要求扫二维码登录，然后就展示这个界面：

点击后，会跳转到这个界面：

项目目录，直接选择期望这个目录位置即可；
AppID,如果有注册就填写注册的，如果没有，点击小程序会自动生成测试号即可；
项目名称随意；
复制代码

这里需要注意，选择了目录后，会默认勾选建立普通快速启动模板，可以理解是微信的demo即可；

创建后，整个界面长这样：

哪个界面有什么用，这里不打算讲解，点几下就知道了；
对于新手来说，好奇的是hello world跟获取头像昵称文案及功能是怎么来的？
这里就要介绍下右侧的目录结构，后面所有项目的结构基本就是围绕这个开展的；

小程序的文件结构

一个小程序首先有四个应用入口文件：

• app.js：设置一些项目的全局变量
• app.json：每一个新页面都必须在这个地方注册，项目的导航栏和窗口界面设置有关的
• app.wxss：项目全局样式
• project.config.json：项目配置文件

一个页面主要是包含以下四个文件，这四个文件的名字应该都是一样的，最好以页面所在的文件夹名字为标准：

• xxx.wxml：展示小程序页面的元素和内容
• xxx.wxss：设置小程序页面元素的样式
• xxx.json：页面的配置信息
• xxx.js：处理页面的逻辑及数据jiaoh

一个最简单的小程序，要有app.js跟app.json；
一个页面要包含4个文件：wxml、wxss、json、js;

其他log文件暂时不说明，其实也都类似；

hello world

上面创建的是微信官方的demo，但对于我们学习来说，还是有点门槛，因为一下子太多文件了，那我们就来个真正的demo，那创建项目的时候，就要把那个快速启动模板去掉

效果如下：

这时候创建的项目除了有一个 默认的 project.config.json文件外， 什么都没有；
看右下方，提示未找到入口app.json;
上面有说过，一个程序一定要用app.js跟app.json，那我们来创建它吧 ~

创建后，内容为空即可，先放着；

接下来，想写一个helloworld，那需要一个页面，上面提到，一个页面需要4个文件，那我们可以选择把4个文件都放在app.js同一个目录，但是为了项目美观，jb就新建一个目录处理，先配置内容都为空：

当然，放在同一个目录也可以，只是如果这个项目有N个页面，都放首目录的话，层次不够突出而且不美观：

因为处理下，新建一个pages，新建一个helloworld目录，里面放helloworld的4个文件，然后结构就调整成这样啦~

ok，此时有一个新的页面，那我们就来app.json来配置下，上面提及到，每一个新页面都必须在app.json注册,因此在app.json有这么一段代码：

{
  "pages": [
    "pages/helloworld/helloworld"
  ]
}
复制代码

在app.json文件里面的冒号前面的pages是微信官方规定的，是一个字段；
pages表示：小程序在启动时首先加载app.json文件，微信客户端首先在app.json文件中查找字段"pages"，客户端找到这个字段名称后，就可以加载这里面的页面了。

这个pages名字是不可以修改的，这是微信官方规定的，可以理解为微信客户端用来加载微信小程序路径的标识，没有这个标识小程序里面的页面无法加载。

那pages下的就是页面，而此时我们的helloworld.wxml就在pages/helloworld下，就此就有了上面这段代码；

那接下来，就在helloworld.wxml写下这段代码：

 <view>
	<text>hello world</text>
</view>
复制代码

当然也可以不用view,这里用上是为了后面介绍wxss，这里简单说下，view就相当于HTML 的div；

此时点击保存，有发生什么事？

结果下方会报错：helloworld.json文件解析错误，SyntaxError: Unexpected end of JSON input

报这个错是因为json里空的,如果没有配置需求,只需要在.json文件里加个 { } 大括号即可：

但是发现，依然会报错：js 出现脚本错误或者未正确调用Page()

出现这个错误是因为我们还没有写js,也就是js里面是空的,暂时我们不要，那就先只写个page({ })

此时再点击保存，发现，helloworld出现啦~

从这个过程，使用到上面的js、json、wxml文件，那wxss文件有什么用？
按照一开始的介绍，这是用来设置页面的样式，还记得我们在wxml定义了一个view吗？那我们就可以在wxss针对这个view做处理；

view{
  width: 100%;
  height: 40rpx;
  text-align: center
}
复制代码

运行后的效果：

其他补充

1）关于app.json，除了pages，还有其他字段：

更多的信息，请查看小程序 app.json配置

2）rpx
rpx最重要的特性就是可以根据屏幕宽度进行自适应。它规定屏幕宽为750rpx。
官方换算表格：

3）小程序代码结构与基本配置：
（如果不对请及时提出，谢谢~）

小结

通过今天的helloworld，对小程序的项目结构加深了了解，项目结构熟悉是非常重要的一步，犹想起刚看到demo项目时的懵逼，到现在的迷迷糊糊，先留个概念；

后面会逐一介绍小程序的框架、api等信息，也会跟大家一起手把手学习下去;

谢谢大家~