小程序极简入门1

体验小程序

话不多说，直接开干...

首先下载 微信开发者工具

打开微信开发者工具，选择体验小程序

体验小程序

在本地磁盘新建一个目录，如helloWorld

小程序体验

点击确定，微信将会为我们生成一个默认的小程序欢迎页：

小程序欢迎页

小程序的构成

欢迎页的内容是由以下文件渲染出来的：

文件结构

首先，我们来分析下index.wxml

  
     获取头像昵称 
    
      
      {{userInfo.nickName}}
    
  
  
    {{motto}}
  

很明显，这些内容与html相似，但又不属于html。看着像是自定义的xml。实质上，这是微信标记语言(WeiXin Markup Language)，详见看 WXML文档，可以将其与web页面的html相对应

接着分析index.wxss

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}

这个文件一看就是与web页面的css相对应。WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。官方文档

最后分析index.js文件，文件内容太长就不列出来了。虽然后缀名与web的javascript一样，但两者是不同的语言，在小程序中，被称为WXS（WeiXin Script)j, 详见官方文档

由此可见，小程序的页面是由WXML, WXS, WXSS三者构建而成。我们可以简单地将这三者分别对应于web三大标准中的html, js, css, 便于我们快速理解新概念

通过对文件进行修改，体验下开发流程，将index.js中的数据修改

修改内容

然后按编译查看效果

编译

页面的显示内容已被修改

你好，世界