小程序极简入门1

章鱼喵

发布于 2018-08-02 15:16:20

2810

发布于 2018-08-02 15:16:20

文章被收录于专栏：codingcoding

体验小程序

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

首先下载微信开发者工具

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

体验小程序

在本地磁盘新建一个目录，如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" src="{{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中的数据修改