二饭 发表于 2020-12-17 18:41

微信小程序开发(小程序页面组件)

前面写到微信小程序开发中每一个页面都对应四个文件,它们就是小程序页面组件`index.wxml`,`index.wxss`,`index.js`,`index.json`四个文件。

## `index.wxml`:

类似HTML,它里面是显示在前端中的标签,一般是可视的模块。不同与HTML的是`wxml`中没有像`<head>`和`<body>`这些类似的标签。

由于这里需要的篇幅较长,所以后面再另发一篇来详细介绍`wxml`中的常用标签。



## `index.wxss`:

类似`css`,修饰元素样式。这里需要注意`wxss`中没有`*`全局选择器。



## `index.js`:

小程序中的JavaScript文件。在这里可以连接微信云开发数据库,可发送请求给服务器等动态操作。这里就涉及到微信小程序中的云开发了,后面我也会写到。

**数据绑定操作:**

在`js`页面中有一个`data`属性,通过它进行数据绑定。

如:

```js
data:{
    abc:'def'
},
```

`wxml`中就可以通过`{abc}`来获取`'def'`这个值。



这里需要介绍东西较多,js中有许多周期函数方法,这里由于篇幅原因还是另开一篇介绍吧。



## `index.json`:

页面配置文件。

```json
{
"usingComponents": {
    "Sinput":"../../components/Sinput/Sinput"
},
"navigationBarTitleText": "页面标题"
}
```

它与全局配置文件属性不同的是`"usingComponents"`属性,该属性用来声明自定义组件,自定义组件是我们自己自定义的标签,就像`<view>`,我们可以自定义个标签,然后在我们的页面使用它。

其他的属性基本与全局配置文件无异,全局配置文件配置过的属性这里无需再次配置,如果重复配置优先显示页面配置文件中的属性值。

二饭 发表于 2020-12-18 09:40

lorzl 发表于 2020-12-17 19:07
楼主更新的有点慢,hhh,等着学习呢

有时间就会更新一下,主要平时事情比较多哈{:301_1003:}

ftwins 发表于 2020-12-22 21:14

有个共享的小程序,现在小程序上架要求,新传的需要添加隐私与政策提示框,大神教教怎么弄吧。

二饭 发表于 2020-12-17 18:50

免费评分来一下哥哥们{:301_999:}

lorzl 发表于 2020-12-17 19:07

楼主更新的有点慢,hhh,等着学习呢

铁铁铁铁铁铁哥 发表于 2020-12-17 19:16

谢谢楼主的分享,收益很大!

哪怕12138 发表于 2020-12-17 20:29

支持支持

tinglie 发表于 2020-12-17 20:40

收藏学习下,以后会用上的

xyf 发表于 2020-12-18 10:48

支持一下

Yinn357 发表于 2021-3-15 09:34

学习学习
页: [1] 2
查看完整版本: 微信小程序开发(小程序页面组件)