4. 基本语法 - 技术栈

一、项目结构

标准小程序结构：

复制代码

project/
│
├── app.js          全局 JS
├── app.json        全局配置
├── app.wxss        全局样式
│
├── pages/
│   └── index/
│       ├── index.js
│       ├── index.json
│       ├── index.wxml
│       ├── index.wxss

二、四种核心文件类型

类型	作用
`.js`	页面逻辑
`.wxml`	页面结构（类似 HTML）
`.wxss`	页面样式（类似 CSS）
`.json`	页面配置

三、页面基础写法

1️⃣ JS 页面

js 复制代码

Page({
  data: {
    message: 'Hello'
  },

  onLoad() {
    console.log('页面加载')
  }
})

2️⃣ WXML

xml 复制代码

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

{``{}} 是数据绑定。

3️⃣ WXSS

css 复制代码

view {
  color: red;
}

四、数据绑定

1️⃣ 显示数据

xml 复制代码

<view>{{name}}</view>

js 复制代码

data: {
  name: 'Tom'
}

2️⃣ 修改数据（必须用 setData）

js 复制代码

this.setData({
  name: 'Jerry'
})

⚠ 不能直接：

js 复制代码

this.data.name = 'Jerry' // 不会更新页面

五、条件渲染

xml 复制代码

<view wx:if="{{isShow}}">显示</view>

或：

xml 复制代码

<view wx:else>不显示</view>

六、列表渲染

xml 复制代码

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

js 复制代码

data: {
  list: [
    { id: 1, name: 'A' },
    { id: 2, name: 'B' }
  ]
}

七、事件绑定

xml 复制代码

<button bindtap="handleClick">点我</button>

js 复制代码

handleClick() {
  console.log('点击了')
}

传参数

xml 复制代码

<button bindtap="handleClick" data-id="1">按钮</button>

js 复制代码

handleClick(e) {
  console.log(e.currentTarget.dataset.id)
}

八、页面生命周期

js 复制代码

Page({
  onLoad() {},
  onShow() {},
  onReady() {},
  onHide() {},
  onUnload() {}
})

执行顺序：

复制代码

onLoad → onShow → onReady

九、页面跳转

1️⃣ 普通跳转

js 复制代码

wx.navigateTo({
  url: '/pages/detail/detail'
})

2️⃣ 返回

js 复制代码

wx.navigateBack()

3️⃣ 关闭当前页面跳转

js 复制代码

wx.redirectTo()

十、常用 API

1️⃣ 提示框

js 复制代码

wx.showToast({
  title: '成功'
})

2️⃣ 弹窗

js 复制代码

wx.showModal({
  title: '提示',
  content: '确定吗'
})

3️⃣ 网络请求

js 复制代码

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

十一、Promise 封装（推荐写法）

js 复制代码

const request = (options) => {
  return new Promise((resolve, reject) => {
    wx.request({
      ...options,
      success: resolve,
      fail: reject
    })
  })
}

然后：

js 复制代码

const res = await request({ url: 'xxx' })

十二、组件 Component

js 复制代码

Component({
  properties: {
    title: String
  },

  data: {},

  methods: {
    handleClick() {}
  }
})

十三、全局数据

app.js

js 复制代码

App({
  globalData: {
    userInfo: null
  }
})

页面使用：

js 复制代码

const app = getApp()
console.log(app.globalData.userInfo)

十四、常用语法总结（JS部分）

你已经见过：

解构
默认参数
展开运算符 ...
Promise
async/await
Object.assign

十五、核心理解模型

微信小程序本质是：

复制代码

数据驱动视图

流程：

复制代码

data 改变
↓
setData
↓
视图更新

十六、学习路线建议（结合你后端背景）

你有 3-4 年开发经验，我建议这样学：

第一阶段（3天）

页面结构
数据绑定
事件
setData

第二阶段（1周）

Promise 封装
async/await
封装 request
封装 modal/toast

第三阶段

组件化
分包
状态管理
工程化