5 分钟带你小程序入门 [实战总结分享]

发布时间 2023-04-10 09:36:36作者: 小阿鑫

![wallhaven-kx7m96.jpg](https://img-blog.csdnimg.cn/img_convert/c7bcee5c0bc1f86e2b767d2b656f677e.jpeg#averageHue=#61798d&clientId=ub9501b5b-8fa6-4&from=ui&id=uc432db62&name=wallhaven-kx7m96.jpg&originHeight=2160&originWidth=3840&originalType=binary&ratio=1&rotation=0&showTitle=false&size=2585204&status=done&style=none&taskId=ubbe778bf-2390-49e1-9d5a-7e2f77fb173&title=)
## 微信小程序常常用 4 种文件类型
### JS 文件
JS 在小程序中用于编写页面逻辑和交互效果,可调用 API 接口完成数据请求和处理,也可以使用第三方库和框架。
![](https://img-blog.csdnimg.cn/img_convert/efc5a406d8d564ef2b5b167a637ddd54.jpeg)

1. 模块化编程:小程序中JS文件可以使用ES6的模块化语法,通过export和import来导出和导入模块。
2. 引用其他JS文件:小程序中的JS文件可以通过require来引入其他的JS文件,如utils、model等。
3. 事件处理:小程序中的事件处理非常重要,需要注意事件的绑定和触发,以及事件参数的传递和处理。
4. 数据绑定和更新:小程序中的数据绑定和更新是自动的,但也需要注意一些细节,如数据类型的转换和更新时机等。
5. API调用:小程序提供了很多API供开发者使用,需要注意选择正确的API并正确调用。
6. 错误处理:小程序中JS出错会导致页面崩溃,需要使用try-catch来进行错误处理,避免影响用户体验。
###
### json 文件
JSON 在小程序中用于配置页面属性和数据源。它可以定义页面的背景色、导航栏字体颜色、数据源等。

![](https://img-blog.csdnimg.cn/img_convert/82bd15146ec078725c012a15ee094661.jpeg)

### WXML
WXML 是一种基于 XML 语法的标记语言,用于编写小程序页面结构。它支持数据绑定、条件、循环语句等语法,并可与 JS 模块交互。
![](https://img-blog.csdnimg.cn/img_convert/51316617e94a4cfe04169770409a91e9.jpeg)


### WXSS
WXSS 是一种基于 CSS 语法的样式表语言,用于定义小程序页面的样式。它支持嵌套、变量、继承、全局样式等特性。
![](https://img-blog.csdnimg.cn/img_convert/671056fa780ce1bc4aac65d827bff4f1.jpeg)
#### 写 wxss 时,小程序不支持哪些写法
微信小程序的 WXSS 是一种针对小程序的特殊样式语言,和传统网页CSS有些不同,虽然语法和CSS相似,但在实际使用中还是有一些差别。
**下面是不支持的CSS属性和选择器:**

**CSS属性:**

1. 通用选择器(*)
2. 边框圆角属性(border-radius)
3. 文字阴影属性(text-shadow)
4. 图片滤镜属性(filter)
5. 高级定位属性(z-index)
6. grayscale,sepia,saturate,hue-rotate,invert,opacity

**CSS选择器:**

1. ID选择器(#id)
2. 兄弟选择器(+ 和 ~)
3. 属性选择器中用多个属性一起选择的方式,([attr="value"][attr2="value2"])
4. 伪元素选择器(::before和::after)
5. 可为空元素选择器(:empty)

 


### 项目配置
![](https://img-blog.csdnimg.cn/img_convert/caa9bcf81c70e9fd967fbce6564228ee.jpeg)


### 调试工具
![](https://img-blog.csdnimg.cn/img_convert/6731d45ba6bb0417579bdde2bf99485c.jpeg)


### 语法回顾
#### wxml 语法
![](https://img-blog.csdnimg.cn/img_convert/33597cf4239b8e4a2357ac168c8af682.jpeg)
#### 定义模块
直接创建 .wxs 文件 。
每个 wxs 模块均有一个内置的 module 对象。

- exports: 通过该属性,可以对外共享本模块的私有变量与函数。

 

### 路由API 整理

![](https://img-blog.csdnimg.cn/img_convert/49d2b221867c780b56d0d8c4a8231f2d.jpeg)



**持续更新中.......**