内容涵盖了常用语法、文件结构、数据绑定、组件和 API 等

⸻

📖 微信小程序语法快速入门教程

⸻

1. 小程序基本结构

每个小程序由 4 种文件组成：
1. WXML (Weixin Markup Language)：结构（类似 HTML）
2. WXSS (Weixin Style Sheets)：样式（类似 CSS，支持 rpx 响应式单位）
3. JS (JavaScript)：逻辑
4. JSON：配置

示例：

pages/
 └── index/
      ├── index.wxml   # 页面结构
      ├── index.wxss   # 页面样式
      ├── index.js     # 页面逻辑
      └── index.json   # 页面配置

⸻

2. WXML（结构层）

数据绑定

<view>{{message}}</view>

条件渲染

<view wx:if="{{isLogin}}">已登录</view>
<view wx:else>未登录</view>

列表渲染

<view wx:for="{{list}}" wx:key="id">
  {{index}} - {{item.name}}
</view>

属性绑定

<image src="{{imgUrl}}" mode="aspectFill"></image>

⸻

3. WXSS（样式层）

基本用法

.container {
  font-size: 32rpx; /* rpx: 根据屏幕宽度自适应 */
  color: #333;
}

全局样式 & 局部样式
• app.wxss：全局样式
• page.wxss：仅对当前页面生效

⸻

4. JS（逻辑层）

定义页面

Page({
  data: {
    message: "Hello 小程序",
    count: 0
  },
  onLoad() {
    console.log("页面加载完成")
  },
  addCount() {
    this.setData({
      count: this.data.count + 1
    })
  }
})

事件绑定

<button bindtap="addCount">点击加一</button>

⸻

5. JSON（配置层）

页面配置

{
  "navigationBarTitleText": "首页",
  "enablePullDownRefresh": true
}

全局配置（app.json）

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "小程序Demo"
  }
}

⸻

6. 组件

常用组件
• 视图容器：view, scroll-view, swiper
• 基础内容：text, image, icon
• 表单组件：button, input, picker, switch, checkbox, radio
• 导航组件：navigator, tabbar

示例

<view class="box">
  <text>{{username}}</text>
  <input placeholder="请输入内容" bindinput="onInput" />
  <button type="primary" bindtap="onSubmit">提交</button>
</view>

⸻

7. 生命周期

应用生命周期（app.js）

App({
  onLaunch() { console.log("小程序初始化") },
  onShow() { console.log("小程序显示") },
  onHide() { console.log("小程序隐藏") }
})

页面生命周期

Page({
  onLoad() { console.log("页面加载") },
  onShow() { console.log("页面显示") },
  onHide() { console.log("页面隐藏") },
  onUnload() { console.log("页面卸载") }
})

⸻

8. 小程序 API

网络请求

wx.request({
  url: 'https://api.example.com/data',
  success(res) {
    console.log(res.data)
  }
})

本地存储

wx.setStorageSync('key', 'value')
const value = wx.getStorageSync('key')

获取用户信息

wx.getUserProfile({
  desc: '用于完善会员资料',
  success: (res) => {
    console.log(res.userInfo)
  }
})

⸻

9. 自定义组件

组件结构

components/
 └── my-card/
      ├── my-card.wxml
      ├── my-card.wxss
      ├── my-card.js
      └── my-card.json

my-card.js

Component({
  properties: {
    title: String
  },
  data: {},
  methods: {
    onTap() {
      this.triggerEvent("cardTap", { msg: "clicked" })
    }
  }
})

使用组件

<my-card title="标题" bind:cardTap="handleCardTap"></my-card>

⸻

10. 快速开发建议
    • 页面数据 → 用 this.setData 更新
    • 多用 rpx 单位 → 保证适配不同屏幕
    • 逻辑复用 → 用自定义组件 / Behavior
    • 复杂状态管理 → 推荐用 mobx-miniprogram 或 redux

⸻

EG: 下面是 最简小程序 Demo：计数器（点击按钮数字加一）的完整代码结构，包含 app、pages、配置文件、逻辑代码。

📂 项目目录结构

mini-counter/
 ├── app.js
 ├── app.json
 ├── app.wxss
 ├── pages/
 │    └── index/
 │         ├── index.wxml
 │         ├── index.js
 │         ├── index.wxss
 │         └── index.json

1. 全局文件

app.js

App({
  onLaunch() {
    console.log("小程序启动")
  }
})

app.json

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarTitleText": "计数器 Demo",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black"
  }
}

app.wxss

/* 全局样式 */
page {
  background-color: #f5f5f5;
  font-family: Arial, sans-serif;
}

2. 首页文件

index.wxml

<view class="container">
  <text class="count">计数：{{count}}</text>
  <button type="primary" bindtap="addCount">点击 +1</button>
</view>

index.js

Page({
  data: {
    count: 0
  },
  addCount() {
    this.setData({
      count: this.data.count + 1
    })
  }
})

index.wxss

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.count {
  font-size: 48rpx;
  margin-bottom: 40rpx;
  color: #333;
}

index.json

{
  "navigationBarTitleText": "首页"
}

🚀 运行效果

• 页面上显示一个数字，初始为 0
• 点击按钮 → 数字加一