微信小程序之语法

最近在学小程序，整的我头都大了。微信小程序不像创建普通的Android项目一样，直接new一个文件就可以了。微信小程序创建一个项目还需要你的appid，比较严格。简单了解一下微信小程序。

它的整体感觉和HTML差不多，比如HTML展示页面，CSS渲染页面，JS使页面具有事件交互。小程序，有四个文件.js,.json,.wxml,.wxss。

先说.js，它的作用就类似于HTML中的JS一样，只不过，它是直接分成一个单独的文件。可以写一些交互事件。作用就是用户对页面进行操作

.wxml就是HTML的.html文件的作用是一样的。用来展示页面。用户所能看到的就是.wxml所呈现的。

.wxss就是HTML里面的CSS文件一样，可以对页面进行渲染。

.json文件：项目中会有一个app.json: 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等

app.json代码如下

{
  "pages": [
    "pages/index/index",
    "pages/userConsole/userConsole",
    "pages/storageConsole/storageConsole",
    "pages/databaseGuide/databaseGuide",
    "pages/addFunction/addFunction",
    "pages/deployFunctions/deployFunctions",
    "pages/chooseLib/chooseLib",
    "pages/lianxi",
    "pages/lianxi/lianxi"
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "云开发 QuickStart",
    "navigationBarTextStyle": "black"
  }
}

我们简单说一下这个配置各个项的含义:

2.window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。

其他配置项细节可以参考文档  。

工具配置 project.config.json

通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。

其他配置项细节可以参考文档  。

除了app.json，还有page.json，也就是你每一个单独页面的json

如果你整个小程序的风格是蓝色调，那么你可以在app.json里边声明顶部颜色是蓝色即可。实际情况可能不是这样，可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块，因此我们提供了page.json，让开发者可以独立定义每个页面的一些属性，例如刚刚说的顶部颜色、是否允许下拉刷新等等。

其他配置项细节可以参考文档 。

WXML模板

wxml与html作用一样。由许多的标签组成，如下代码

<text>{{textMsg}}</text>
<view>{{array[0].msg}}</view>

这是wxml中的标签，具体的作用还没了解清楚。这是使用js的一种写法，普通写法，直接将内容写在标签内即可。

js这种写法，需要再你的js文件的page字段的data字段内写如下代码

  /**
   * 页面的初始数据
   */
  data: {
    textMsg:"我是Lianxi页面",
    array:[{msg:"我是数组0"},{msg:"我是数组1"}]
  },

点击编译，直接可看到效果

从看得见的开始学，开始写。

首先，我们所能看到的，实在某一个.WXML文件里面的。那么，既然是一个程序，肯定会有一个入口，一个首页。我们要展示哪一张页面是在哪里定义的呢？上面已经有提示了。没错，就是你的工程里面的app.json这个配置文件里面定义的。当你每次创建一个page时，你会发现，你的app.json文件里面的pages字段里就会多一个路径，pages字段就是用来展示我们项目中有多少个页面文件，pages字段所在的第一个路径，则就是我们小程序进入所展示的第一个页面。

再来看看我们的WXML里面都有什么吧

代码如下

<swiper class='swiper' indicator-dots='true' autoplay='true' interval='3000' circular='true'>
  <swiper-item>
    <image class='swiperimg' mode='aspectFit' src='/images/code-db-inc-dec.png' ></image>
  </swiper-item>
  <swiper-item>
    <image class='swiperimg' mode='aspectFit' src='/images/code-db-onAdd.png'></image>
  </swiper-item>
  <swiper-item>
    <image class='swiperimg' mode='aspectFit' src='/images/code-db-onRemove.png'></image>
  </swiper-item>
  <swiper-item>
    <image class='swiperimg' mode='aspectFit' src='/images/create-collection.png'></image>
  </swiper-item>
</swiper>
<!-- type 类型 value 初始内容  placeholder 输入为空时占位内容 提示内容 -->
<!-- 表头输入框 -->
<input class='homeTextInput' type='text' placeholder='请输入内容' placeholder-class='placeclass'></input>
<!-- 设置九宫格 -->
<view class='jiugongge' wx:for="{{testForm}}" wx:key="id">
  <view class='jiugg'>
    <image class='testFormImage' src='{{item.icon}}'></image>
    <text>{{item.name}}</text>
  </view>
</view>

可以看到WXML与HTML是很相似的，都是由一个一个的标签组成。我们来看看微信小程序给我们提供了那些标签

感兴趣可以去去看看

建议还是去官方网站去学习，探索

拥有这么多的组件，相信你一定能够开发出属于你自己style的微信小程序的。

说起style，不得不提到小程序另一个重要的文件了.WXSS文件。这个文件类似于CSS文件，除了部分不相同，大部分CSS支持的，它也支持。

看一下官方对WXSS是怎么描述的

WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。

为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

与 CSS 相比，WXSS 扩展的特性有：

• 尺寸单位
• 样式导入

全局样式与局部样式

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

那，就先到这里吧，祝你事业更上一层楼