体验小程序

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

首先下载 微信开发者工具

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

体验小程序

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

小程序体验

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

小程序欢迎页

小程序的构成

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

文件结构

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

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view></view>

很明显，这些内容与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中的数据修改

修改内容

然后按编译查看效果

编译

页面的显示内容已被修改

你好，世界

作者：章鱼喵_
链接：https://www.jianshu.com/p/3b5975322873