个人微信小程序开发入门教程:模板文件、样式文件和脚本逻辑文件

学习开发微信小程序最最最最重要的就是学习微信小程序官方文档,因为文档可以解决我们在学习过程中遇到的大部分麻烦，所以先附上官方文档链接：

https://developers.weixin.qq.com/doc/

---

目录

• 一、模板文件（.WXML）
  • 模板文件的一个应用：数据绑定
    • 例如：在首页输出 Hello world!
      • 第一种方法：直接输出
      • 第一种方法：通过数据绑定输出
• 二、样式文件（.WXSS）
  • 样式文件的一个应用：引用外部库
    • 例如：在首页里添加一个颜色为aqua的按钮
• 三、脚本逻辑文件（.JS）
  • 脚本逻辑文件的一个应用：计数器demo的实现
• 四、总结

---

在通过全局配置生成小程序的页面时，不仅会默认生成页面配置（page.json）,还会对应生成页面的模板文件（.WXML）、样式文件（.WXSS）和脚本逻辑文件（.JS）。

不懂什么是全局配置的可以参考：https://blog.csdn.net/weixin_62529383/article/details/123858140

一、模板文件（.WXML）

WXML全称是WeiXin Markup Language,是小程序框架设计的一套标签语言，结合小程序的基础组件、事件系统，可以构建出页面的结构。充当的就是类似于HTML的角色。

具体标签表单及其内容都在微信小程序的官方文档里，这里直接附上链接：https://developers.weixin.qq.com/miniprogram/dev/component/

模板文件的一个应用：数据绑定

小程序的数据一般情况下需要动态地从服务端获取，然后在渲染输出到视图中显示。而WXML的动态数据均来自对应Page的data。数据绑定就是使用Mustache语法（双大括号）将变量包起来。

例如：在首页输出 Hello world!

第一种方法：直接输出



第一种方法：通过数据绑定输出


二、样式文件（.WXSS）

WXSS（WeiXin Style Sheets）是一套用于小程序的样式语言，也就是视觉上的效果。而且，微信小程序有一套独特的尺寸单位：rpx（responsive pixel）可以根据屏幕进行自适应，适配不同宽度的屏幕。同时，，小程序可以引用外部wxss。

样式文件的一个应用：引用外部库

在写代码的时候，为了减小代码重复率，会在目录里面创建一个Style文件夹，里面放一些常用的函数组件，然后通过引用外部库达到想要的效果

例如：在首页里添加一个颜色为aqua的按钮




这里还有一些比较好的外部库推荐引用


三、脚本逻辑文件（.JS）

一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。

脚本逻辑文件的一个应用：计数器demo的实现


四、总结

本章内容可以在微信小程序官方文档中找到，链接如下：

https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/code.html#WXML-%E6%A8%A1%E6%9D%BF