03、微信小程序之--永不过时的HelloWorld

版权声明：本文为博主原创文章，未经博主允许不得转载。

PS:转载请注明出处
作者:TigerChain
地址:http://www.jianshu.com/p/b69b35fbf242
本文出自TigerChain简书--微信小程序系列

教程简介

• 1、阅读对象

本篇教程适合初学者，老鸟直接略过，如果有误，欢迎指出，谢谢。

• 2、教程难度

  初级

正文

由前面二节我们知道了什么是小程序，并且知道如何创建一个小程的项目，接下来我们说动手写一个helloworld的小程序的Demo。写helloworld目的是为了掌握小程序的配置目录结构和一些组件。

1、文件的组成

1、首先我们看一下传统的web前端应用

web_app.png

一般来说，一个前端应用无非就是包含这四个界面html,css,js,json等。

• 1、html:用来展示界面就是一个View
• 2、css:决定html界面是何种方式展示(显示效果)
• 3、js:决定了这个html界面有何种功能
• 4、json:一些配置信息，比如初始化默认数据，api请求地址等。

2、小程序应用

mini_app.png

从图上我们可以看出，小程序和web应用除了文件后缀名不一样，其表现形式是一样的。

2、小程序样式配置的原则

如果我们写了两个样式文件，在主体文件和页面中都写了样式文件，那么先调用那个呢，小程序遵循的就近原则，以页面中的样式优先。json配置文件也一样，按就按就近原则。

3、编写HelloWorld

1、打开开发工具，新建一个项目

create_helloworld.png

2、创建完项目以后，我们看到的是一个空项目

empty_content.png

由于我们在创建项目的时候没有选择quick start来创建项目，所以创建出的项目是一个空项目(没有自动生成一些文件)

3、编写主体文件

通过上节我们知道，小程序由主体文件和页面组成，而且主体文件是必不可少的，所以我们手动添加主体文件(如果创建项目的时候使用quick start那么主体文件会被自动创建)

• 1、编写主体文件和项目文件

我们将开发工具切换到编辑模式下，如下建立三个主体文件和两个目录

cerate_page.png

由上节我们知道，主体文件必须在项目的根目录中，并且名字是app.js,app.json,app.wxss,不能修改

• 2、我们打开helloworld.wxml输入

<view>
    <text>Hello World</text>
</view>

然后ctrl+s保存直接就报错了

error_appjs.png

原因是我们的helloworld.wxml编写在page/helloworld下面的目录下面，但是小程序不知道我们在这个目录下，所以我们要让小程序知道这个界面，我们就要在app.json中去配置(注册一下)

• 3、在app.json中去注册

打开app.json并且输入以下内容，如果我们自己的目录名字不叫这个换成自己的目录即可

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

show_helloworld.png

3、常见的一些组件

1、view组件

view 组件就类似于 Html 中的 div 标签。

<view>
    ...
    ...
</view>

2、text组件

text 组件就相于是 Html 中的 lable 标签

<text>TigerChain</text>

3、image组件

毫无疑问，image 就是图片组件的意思，使用 src 属性来设置图片路径

<image> src="xxx.png"</image>

到此为止我们就使用小程序编写出来了一个 Helloworld 的应用了，但是这个 Helloworld 是没有样式和功能的。