微信小程序开发（1）认识标签 VIEW

1，微信小程序的开发类似于H5的开发。
其中 类似于HTML 的

,页面局部的最主要标签就是VIEW。
同样的，view也支持ID 和CLASS

<view class='head'>我是头部</view>

上面的代码等同于HTML里的

<div class='head'>我是头部</div>

如果你可以轻松的认识HTML里的DIV 层级关系，那么在编写小程序代码的时候，是很轻松就能上手的。

,2，认清目录结构
在小程序开发的过程中，认清目录结构是十分重要的事情。

pages        ------ 项目目录，类似于 WEB网站的 WWW
utils           ----- 公共样式、方法  
app.js       -----项目主要的JS 主要放微信授权登录 等
app.json   ----  项目菜单的路径和整个项目的名称 颜色 等 属于类似网站配置的一个文件
app.wxss    ---全局CSS样式
project.config.json   ---项目配置文件，这个文件是自动生成的，一般不写 
sitemap.json   ---项目地图，最近加入

从上面的目录看到，最关键的目录其实在PAGES，我们以后开发代码的地方就在这里。

3，小程序调用变量的符号{{}}
主要符号是英文半角的大括号2个，左右互为一对。

在小程序pages内，如果我们想新创建一个页面，那么就找到 app.json 这个文件，我们会看到以下代码
"pages": [
    
    "pages/index/index",
  
    "pages/logs/logs"
  ],
``
这时候，我们就在page 这个数组内再添加一个 logo 的页面，并让他变成小程序启动的首页面

"pages": [
        "pages/logo/index",
    "pages/index/index",
  
    "pages/logs/logs"
  ],
`，点击保存后，我们会在小程序的页面里自动生成一个LOGO页面。

上面为简单生成一个新页面，下面我们写代码

在LOGO新页面下，我们会看到4个新文件，

其中index.wxml 就是类似于HTML 的页面
index.wxss 为CSS样式文件
index.js 为核心JS控制文件

index.wxml

`<view class='red'>{{word}}</view>

index.wxss

/* pages/logo/index.wxss */

.red {
  width: 100%;
  height: 100px;
  background: #ff5a00;
  line-height: 100px;
  font-size: 20px;
  text-align: center;
}

index.js

// pages/logo/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    word:"你好，微信小程序"
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

其中

即为变量 word ，当然，这里写的是死值。

以下是效果图