在小程序中用.生成带class 的view_极简微信小程序入门示例

本系列将会通过一个非常简单的例子，演示如何开发一个微信小程序。

公众号 码不理 里回复 资源 可获取示例完整代码下载地址。

一、写一个 HelloWorld 小程序

1. 建立项目
2. 创建 page 页面
3. 编写 HelloWorld

1. 建立项目

扫码进入后可以看到需要选择的调试类型，选择本地小程序项目。

点击添加项目，有这样的对话框：

使用无 AppID 的情况，项目名称填上 HelloWorld，选择项目目录。

不过需要注意的是，在选择好了存放项目的目录以后，有一条附加的信息：

这里我们从最最简单的空项目做起，所以取消 quickstart 项目的创建。

2. 创建 page 页面

在根目录下创建 app.js 和 app.json 文件，现在目录结构是这样的：

编写 app.json，只需要填 pages 这一项就好了。app.json：

快捷键 Ctrl + S 保存文件后，会自动生成 index 页面对应的文件。这些文件我们将稍后再具体解释。

3. 编写 HelloWorld

index 文件夹就是我们在 app.json 中的 pages 数组中所注册的 page，也就是说，这个 index 就是一个 page。如上图所示，一个 page 下有 4 个同名但不同类型的文件。

index.js：

这些帮你已经填写好的都是关于这个页面的生命周期函数，具体的调用时间，每个函数中的注释都已经写上了，暂不用深究。

index.wxml：

.wxml 是负责页面结构的文件，通俗地来讲，这个文件决定了在这个页面上，能看到哪些东西。

上面代码中的<text>标签是 wxml 文件中用于展示文字的标签，内部只能放文字。

只需要将<text></text>标签之间的文字改为“Hello World”，然后保存，那么我们的第一个小程序就完成了。

二、添加组件

1. 添加小图标
2. 添加一个无事件的按钮
3. 添加一个进度条
4. 设置属性值来改变组件的表现

1. 添加小图标

在index.wxml中，添加一组<view></view>标签，之后在这组view标签中加入3行<icon type="success"></icon>。

简单解释一下，view标签是小程序下的视图容器，一组view标签就是一个视图容器。icon是用于添加小图标的标签。效果图和代码图如下：

2. 添加按钮

在刚才的index.wxml中，继续添加一组<view></view>标签，并向其中加入一行<button>This is a Button</button>。

button标签的作用是向页面上添加一个按钮，而在<button></button>之间的文字会

作为按钮上的文字出现：

3. 添加进度条

在刚才的index.wxml中，继续添加一组<view></view>标签，并向其中加入一行<progress percent="50"/>。

progress标签的作用是向页面上添加一个进度条，percent的值代表了进度条的百分比。

4. 设置属性值来改变组件的表现

（1）将第二个icon的type设置为info

（2）在第三个inco的type="success"之后加入size="30"

标签有属性，像icon标签，type="success"，type是属性名，success是属性值，可以更改标签的属性值，来更改组件的表现。

（3）为button设置属性type="primary"

（4）在progress标签中，设置属性color，属性值为blue

三、设置数据

1. page.js文件的简单介绍
2. page.js文件和page.wxml文件的联系
3. page.js文件中设置data
4. page.wxml文件中使用data

1. js文件的简单介绍

对于一个page来说，js文件是用于控制页面逻辑的，这个页面上会以什么样的流程去完成动作，就是靠js文件来加以控制的。

2. js文件和wxml文件的联系

wxml文件决定在页面上显示的内容，而js文件可以将这个文件的具体内容传递给wxml文件，而具体的传递的方式，就是通过js文件中的data。

因此，data也是联系两个文件的重要纽带。

3. js文件中设置data

在index.js文件中加入一个变量'name'，将其值设置为自己的名字。

4. wmxl文件中使用data

在index.wxml文件中加入<view>标签，在<view>标签中插入<text>标签，将<text>标签的内容写为 Hello, {{name}}

name就是之前在index.js文件中data下的变量name，wxml文件通过双大括号{{}}的形式来引用data中的变量。

Ctrl + S，可以看到结果。

当然你可以在运行后在data中把name的值改掉，再运行一次，看看前后结果的变化。在wxml文件不变的情况下，仅仅修改了data中的值，就使得最后的结果发生了改变。

四、获取个人昵称和头像

1. 微信接口调用
2. 接口数据保存
3. 显示头像与昵称

1. 微信接口调用

wx.getUserInfo接口是可以返回一个userInfo的对象的，它是一个用户信息对象，但其中并不包含openid等敏感的信息。

但是wx.getUserInfo接口需要在wx.login接口的基础上使用，而wx.login有一个success参数，是接口调用成功时的回调函数。

思路如下：可以调用wx.login接口，并把wx.getUserInfo接口作为wx.login的调用成功的回调函数，把其中的数据传出来，就得到了用户的昵称和头像。

将接口函数放在onShow函数下面。

index.js：

2. 接口数据保存

在data下创建userInfo变量，用以保存接口返回的用户信息

修改index.js，使用setData执行保存数据的动作：

3. 显示头像和昵称

wxml文件中，将头像和昵称显示出来。

Ctrl + S, 看一下最左侧的窗口，不出意外的话你就能看到你自己的头像和昵称了。

五、添加样式

1. page.wxss文件的作用
2. page.wxss文件与app.wxss文件
3. page.wxml文件中的修改
4. page.wxss文件的编写

1. page.wxss文件的作用

同page.wxml文件负责页面的表现内容与表现结构所不同的是，page.wxss文件是用于负责页面的样式，通俗的说法是负责“如何表现”页面的。有前端开发经验的话，可以将其类比作前端中的css文件，二者的作用几乎相同，在一些基本的形式上也可以相互做个印证。

2. page.wxss文件与app.wxss文件

二者基本作用相同，都是为了规定样式。page.wxss是规定其所在页面的样式，而app.wxss则是在全局上对小程序的样式进行规定。针对于一个具体的页面，page.wxss中的内容会覆盖app.wxss中的内容。对于没有在page.wxss中规定的样式，页面会采用app.wxss中所规定的样式。

3. page.wxml文件中的修改

既然是与wxml文件协作，就需要一个纽带，来规定wxml文件中的哪一个元素去呈现一个什么样的样式，这个纽带可以是标签本身，也可以通过给标签设置class或者id的属性值来达成这一个目的。作为例子，将上次的项目中的index.wxml文件作如下修改：

4. page.wxss文件的编写

在page.wxss文件中，将对应class的样式规定好，就可以看到改变了样式后的效果了：

最终效果：

公众号 码不理 里回复关键字 资源 可获取更多示例代码。