微信小程序接口

第一块：JSON
上面提到：每个分页面分为JS（页面逻辑）、JSON（页面配置）、WXML（页面结构）、WXSS（页面样式表）四个模块，那么这些页面分别都有什么用途呢？

JSON是页面配置文件，可以对本页面的窗口表现进行配置，文件内容为一个 JSON 对象，会涉及到很多的属性。

比如navigationBarTitleText 就是显示在小程序最上方的标题名称。

页面中配置项在当前页面会覆盖总的app.json的中相同的配置项。

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "标题zwz",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

第二块：WXML

WXML其实就是HTML，是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

比如最常用的双向数据绑定：

index.wxml

<view class="container">
  {{msg}}
</view>
index.js

Page({
  data: {
    msg:'hello zwz',
  },
  onLoad: function () {
   
  }
})

这样，我们虽然在WXML界面没有直接写文字，但{{msg}}就直接读取到了JS文件的变量值。

这时，我们按下CTRL + S（保存，重新编译），我们会发现前台会渲染出 hello zwz。

这就是传说中的双向数据绑定，你把JS后台的 hello zwz 改成 hi zwz，那么前台也会显示 hi zwz，以此类推。

同理，如果是数组：

在JS页面的Page的data下，加上array变量，作为普通数组

array:[1,2,3,4,5,6,7,8,9],
接着将WXML界面的msg替换成array，界面则会显示如下：

本文原创首发CSDN，链接 https://blog.csdn.net/qq_41464123/article/details/105198163 ，作者博客https://blog.csdn.net/qq_41464123 ，转载请带上本段内容，尤其是脚本之家、码神岛等平台，谢谢配合。

第三块：WXSS
WXSS和CSS一样，是一套样式语言，用于描述 WXML 的组件样式，WXSS 用来决定 WXML 的组件应该怎么显示。WXSS在实际开发过程中，拥有绝大部分CSS的内容。

那么相比CSS而言，WXSS中独有的rpx单位可能会用得到，这个尺度单位可以根据屏幕宽度进行自适应。

具体格式如下所示，下面是用了类选择器对WXML中的元素进行样式美化。

.title{
  font-size: 30px;
  color: royalblue;
}
.input-placeholder{
  font-size: 16px;
}
.section{
  width: 100%;
  height: 55px;
  box-sizing: border-box;
  padding-top: 15px;
  font-size: 16px;
  display: flex;
}

第四块：JS
这一块毫无疑问，就是用来存放后端逻辑代码的，我们需要掌握几个常用的生命周期函数，onShow、onLoad。

Page({
  data: {
    msg: "hello zwz"
  },
  onLoad: function(options) {
    // 页面创建时执行
  },
  onShow: function() {
    // 页面出现在前台时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行
  },
})

然后就是自定义方法，注意是和onLoad()平级。

比如，我们在WXML内定义一个按钮

按钮1
接着，在JS页面编写响应事件

Page({
  data: {
    msg: "hello zwz"
  },
  onLoad: function(options) {
    // 页面创建时执行
  },
  run: function() {
    // do some things
  },
})

那么，我们在点击这个按钮之后，就会触发run()这个方法。

五：总结
总而言之，本文讲解了微信小程序项目的基本架构，以及如何学习微信小程序，以及学习微信小程序所需要的基础，还有前台渲染的基本代码。