微信小程序开发（三）小程序开发框架之WXSS和JavaScript

• WXSS(WeiXin Style Sheets)

  1. 介绍：WXML是一套样式语言，用来描述wxml的组件样式，和我们html中的css非常类似。WXSS基于CSS做的一些修改和补充：尺寸单位rpx、外联样式导入、内联样式、选择器

  2.WXSS特性
  (1)支持响应式像素rpx
  (2)支持外联样式导入（通过@import,import后面跟的是外联样式的路径）
  当我们一些不同页面内具有一些相同的样式时，我们就可以把这些样式抽离成一个外联样式文件，减小文件的资源大小。
  如下，我们在class为container的index.wxml文件对应的index.wxss样式文件里通过@import导入了一个assets.wxss外联样式。index.wxss定义了container元素的颜色，assets.wxss定义了container的边框和颜色。样式文件的执行是从上到下，从左到右执行的。如果在index.wxss文件里也定义border值，则index.wxss里的border会覆盖外联样式的border

  hello world!



@import './assets.wxss';
.container{
  color:red;
}


.container{
  border:1px  solid:#000;
}

(3)支持内联样式
wxss的内联样式和css一样，是通过style标签来描述的。如下：index.wxml文件的style里，我们定义了view的宽高，以及通过变量的绑定来设置背景色，变量是在index.js的data中设置了colorValue。

  hello world!


//index.js
Page({
  data:{
    colorValue:'red'
  }
})

(4)选择器（用于选择你想要的元素的样式的一个模式）

选择器.png

不同的选择器优先级不同，优先级是由选择器的权重值决定的，不同的选择器权重值不同。如下：element是元素标签的选择器，对应的权重是1；.element是元素的class选择器，对应的权重是10；#element是元素的id选择器，对应的权重是100；style对应的是标签里内联的一个style属性，可以理解成一个选择器，对应的权重是1000；！important不算是一个选择器，它是帮我们把选择器进行一个提升，它的权重是无穷高。当我们在一个样式中声明一个importtant规则时，这个规则会覆盖其他任何规则，所以我们应该谨慎使用importtant.

选择器优先级.png

在index.wxss文件里，如果我们想将class为title的选择器的颜色强制修改为红色，可以在color属性的后面加上！important的声明。

//index.wxss
.title{
  color:red !important;
}

• JavaScript
  1.介绍：小程序的业务逻辑都是通过JavaScript来实现的。JavaScript是一种轻量级的、解释型的、面向对象的头等函数语言，是一种动态的基于原型和多范式的脚本语言，支持面向对象、命令式和函数式的编程风格。
  2.小程序中的JavaScript
  由ECMAScript、小程序框架、小程序API组成。和浏览器中的JavaScript相比，小程序中没有BOM（浏览器的对象模型）和DOM（浏览器的文档对象模型）对象，也缺少nodejs中的native和npm模块。JavaScript、nodejs、和小程序中的JavaScript都是基于ECMAScript的一种实现。ECMAScript的重要组成部分如下：

  
  
  ECMAScript.png

  3.小程序中JavaScript的宿主环境差异
  小程序在IOS、Android和微信开发者工具中的运行环境都不同，如下：

  
  
  小程序宿主环境.png

• WXS
  1.介绍：除了在逻辑层使用的JavaScript语言外，小程序还有一套自己的脚本语言，就是WXS(WeiXin Script)。

  
  
  wxs.png
  
  

  2.使用:可以通过标签来声明，也可以通过文件来声明。在wxs文件里有自己独立的作用域，每个模块里定义的变量和函数默认都是私有的，对外是不可见的。
  (1)标签声明：在index.wxml文件里通过标签声明了wxs，模块属性通过module来定义。在wxs模块外的view标签中引入了wxs的message变量。因为wxs定义的变量和函数外部是不可访问的，所以引用的话，需要wxs通过module.exports将自己的内部变量、函数等暴露出来。

//index.wxml

  module.exports = {
    message : 'hello world!'
  }

{{m1.message}}

(2)文件声明:在wxs标签中通过src属性引入了m2.wxs模块，而在m2.wxs中又通过require函数引入了m1.wxs模块。注意：在同一个页面不要重复的声明wxs文件名，否则后面的wxs名会覆盖前面定义的。

//index.wxml

{{m2.message}}

//m2.wxs
module.exports = require('./m1.wxs')

//m1.wxs
module.exports = { 
  message : "hello world!"
}

3.WXS的运算符如下，注意：WXS的语句与JavaScript基本一致，但是在WXS中不支持try-catch。

wxs的运算符.png

4.WXS的数据类型：（8种）
number、string、boolean、object、array、function、date、regexp(正则类型)
5.WXS的基础类库

基础类库.png