小程序零基础学习资料(我是一个小白)

22第一.开始烧CPU了  开始学习了.

第二:小程序配置:   全局配置和界面配置

1:

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

完整配置项说明请参考小程序全局配置

以下是一个包含了部分常用配置选项的 app.json

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/index",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

2:

页面配置

每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

完整配置项说明请参考小程序页面配置

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

3:整个小程序框架系统分为两部分：逻辑层（App Service）和 视图层（View）。小程序提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑 

第三:小程序的框架

1:场景值

2:逻辑层

3:视图层

现在开始逐步解释一下哦 :

代码片段:

<!-- This is our View -->
<view> Hello {{name}}! </view>
<button bindtap="changeName"> Click me! </button>

// This is our App Service.    //这个斜杠表示注释 解释使用.不会被代码读取到.
// This is our data.
var helloData = {
  name: 'Weixin'
}

// Register a Page.
Page({
  data: helloData,
  changeName: function(e) {
    // sent data change to view
    this.setData({
      name: 'MINA'
    })
  }
})

1️⃣ 什么是响应式数据绑定？

想象你手机里的天气App：当服务器的天气数据更新时（比如温度从20℃变到25℃），App界面会自动显示新温度——这就是数据和界面的「自动同步」。在编程中，框架帮你建立这种连接，你不用手动写代码刷新页面[1]。

---

2️⃣ 你的例子拆解（微信小程序版）

🧱 步骤1：数据初始化

var helloData = { name: 'Weixin' }

就像在手机里存了一个便签「name=Weixin」，这是初始状态。

🔗 步骤2：建立绑定关系

Page({ data: helloData, // 把数据和页面绑定 })

框架自动把「name」和页面上的{{name}}连上线（像蓝牙配对），此时页面显示「Hello Weixin!」。

⚡ 步骤3：触发数据变化

changeName: function(e) { this.setData({ name: 'MINA' }) // 修改数据 }

点击按钮后，框架收到指令：「把name改成MINA」。这时数据层的name变成了新值。

🔄 步骤4：视图自动更新

框架检测到name变了，立刻把页面上的{{name}}替换成新值，于是显示「Hello MINA!」。整个过程不需要你手动操作DOM（比如用JS找元素再改内容）[3]。

---

3️⃣ 为什么说它「响应式」？

就像微信聊天：当对方发来新消息，对话框会自动弹出通知，不需要你手动刷新——数据变化自动触发视图更新，这就是「响应」的核心逻辑。

---

4️⃣ 对比传统方式

传统编程可能需要这样：

// 手动更新（麻烦！） document.getElementById("name").innerText = "MINA";

而响应式框架帮你省略了这一步，只关心数据本身，框架会自动处理界面变化[6]。

---

🧠 总结：响应式数据绑定的3个关键词

1. 自动同步：数据改→视图动（像Excel表格联动）
2. 单向流动：通常是数据→视图（少数框架支持双向，如输入框自动更新数据）
3. 减少代码：不用写大量document.getElementById()操作

页面管理

框架 管理了整个小程序的页面路由，可以做到页面间的无缝切换，并给以页面完整的生命周期。开发者需要做的只是将页面的数据、方法、生命周期函数注册到 框架 中，其他的一切复杂的操作都交由 框架 处理。

基础组件

框架 提供了一套基础的组件，这些组件自带微信风格的样式以及特殊的逻辑，开发者可以通过组合基础组件，创建出强大的微信小程序 。

丰富的 API

框架 提供丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等

生命周期

今天2025年6月29号更新资料哦.

微信小程序界面路由逻辑.