微信小程序2-WXSS,WXS

微信小程序1-小程序基础,开发工具安装使用

1.WXSS

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式
为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改

    1).像素rpx

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应，规定屏幕宽为750rpx，假如一个屏幕为375px、750物理像素，按照小程序的规定屏幕宽度都定位750rpx，所以此屏幕就是750rpx,1rpx=(750rpx/375px)=0.5px；1rpx=(750rpx/750物理像素)=1物理像素

    2).外联样式

.name {
  color: red;
  font-size:18px;
  margin-top: 5px;
  margin-left: 5px;
  margin-bottom: 5px;
}

    3).内联样式

    4).全局样式

定义在app.wxss中的样式就是全局样式，作用去全部页面，当有局部样式的时候就以局部样式为准

    5).导入其他样式

@import "common.wxss";

2.WXS

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构
WXS和JavaScript是不同的语法

    1).在wxml中直接使用wxs

{{obj.msg}}
{{obj.test()}}

var msg="123"
function test(){
   return "test"
}
module.exports = {
  msg:msg,
  test:test
}

    2).从wxs文件导入

var foo = "参数";
var bar = function (d) {
  return d;
}
module.exports = {
  foo: foo,
  bar: bar,
};
module.exports.msg = "从wxs文件导入";

 {{tools.msg}} 
 {{tools.bar(tools.foo)}} 

新建wxs文件