微信小程序wxss语法-微信小程序wxss语法

在这篇文章中，我们主要介绍了小程序的一些目录结构和语法，为我们的微信小程序商城系统做铺垫。

首先我们了解一下小程序的目录结构

app.json 是整个小程序的全局配置。 我们可以在这个文件中配置小程序由哪些页面组成，配置小程序的窗口背景色，配置导航栏的样式，配置默认的标题。

1个

2个

3个

4个

5个

6个

7

8个

9

10

11

12

{

“页面”：[

“页面/索引/索引”，

“页面/日志/日志”

],

“窗户”： {

"backgroundTextStyle": "浅色",

"navigationBarBackgroundColor": "#fff",

"navigationBarTitleText": "微信",

"navigationBarTextStyle": "黑色"

}

}

注意：app.json是整个小程序的全局设置，当然每个页面也有自己的json文件。每个页面下的json文件只能设置window，所以只需要在页面json中写window配置即可文件

1个

2个

3个

4个

5个

6个

{

"backgroundTextStyle": "浅色",

"navigationBarBackgroundColor": "#fff",

"navigationBarTitleText": "微信",

"navigationBarTextStyle": "黑色"

}

index.whtml 后缀为wxml的文件夹是微信小程序提供给我们的页面结构文件，类似于我们以前网页的html，只不过他自定义了一些自己的标签。

接下来我们新建一个页面试试

在pages下新建一个页面test，注意新建的.js、.json、.xml、.wxss。 与页面下定义的测试文件夹名称一致，微信小程序会自动读取这些文件并生成小程序实例。

首先，我们需要在app.json下配置我们刚刚创建的页面

注意：页面配置的顺序在实际操作中发现微信小程序wxss语法，最先配置的是首页。

配置完成后，我们就可以编写我们的页面代码了。

可以看到，我们可以直接在app.json页面配置当前页面的一些窗口属性

在wxml中，我们可以为我们的页面显示写一些结构，这和我们以前写html是一样的。 我们在中间使用了标签，相当于我们之前使用的div。

wxss 可以看到和我们之前写的css差不多。 这是我们之前定义的 .box 加上样式。

test.js 是页面的脚本文件。 在这个文件中，我们可以监控和处理页面的生命周期函数，获取小程序实例，声明和处理数据，响应页面交互事件等。

这里我们使用bintap给视图绑定一个点击事件，然后弹出一个提示框。

注意：这里js的写法和我们之前的写法完全一样，但是这里不能使用window对象和document对象微信小程序wxss语法，也不能使用jquery、zepto等框架，因为这些框架都会用到window和document对象.