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等信息，也会跟你们一块儿手把手学习下去;

谢谢你们~