从零开发博客小程序：新手也能看懂的实战指南

白兰地空瓶
55 阅读8分钟

如果你用过微信里的各类小程序，可能会好奇：这些轻量级应用是怎么开发的？尤其是博客类小程序，既能展示内容又能互动，开发起来复杂吗？

其实，小程序开发入门门槛并不高。今天就以一个「博客小程序」为例，用最直白的语言带你拆解开发逻辑，从架构到代码实战，新手也能快速上手。

一、先搞懂：小程序的「骨架」是什么？

和盖房子先搭框架一样，开发小程序第一步是理解它的基本架构。简单说，一个小程序就像一个「套娃」，由「全局应用」和「多个页面」组成。

1. 全局应用：整个小程序的「总管」

全局应用有 4 个核心文件，作用相当于小程序的「总开关」：

  • app.json：配置文件，决定小程序有哪些页面、导航栏长什么样、底部 tab 栏有几个按钮等。
  • app.wxss：全局样式表，所有页面都能共用的样式（比如统一的字体、颜色）。
  • app.js：全局逻辑，处理小程序启动、初始化等全局事件。
  • app.wxml：很少用，一般放全局共享的页面结构（新手暂时可以忽略）。

2. 页面：小程序的「具体内容页」

一个小程序通常有多个页面（比如首页、文章页、我的页），每个页面都有 4 个专属文件，放在「pages」文件夹里：

  • .wxml：页面结构，类似网页的 HTML，决定页面有哪些元素（按钮、图片、文字等）。
  • .wxss：页面样式，类似网页的 CSS，控制元素的大小、颜色、位置。
  • .js：页面逻辑，处理点击、数据更新等交互（核心中的核心）。
  • .json：页面配置，比如单独设置当前页面的导航栏标题。

举个例子：如果你的博客小程序有「首页」和「文章详情页」，那么 pages 文件夹里会有两个子文件夹，每个子文件夹里都有这 4 个文件。

二、核心配置：让小程序「有模有样」

有了骨架，接下来要通过配置让小程序「成型」。最关键的是app.json，它能定义小程序的「门面」和「页面列表」。

1. 导航栏：小程序的「头顶招牌」

打开 app.json，你可以设置导航栏的标题、颜色，比如：

json

{
  "window": {
    "navigationBarTitleText": "我的博客", // 导航栏标题
    "navigationBarBackgroundColor": "#49b849", // 导航栏背景色（绿色）
    "navigationBarTextStyle": "white" // 标题文字颜色
  }
}

这样打开小程序，顶部就会显示绿色背景、白色文字的「我的博客」标题。

2. 底部 tab 栏：页面切换的「快捷按钮」

如果你的博客有「首页」「分类」「我的」三个主要页面，可以用 tabBar 配置底部导航：

json

{
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index", // 点击跳转到首页
        "text": "首页", // 按钮文字
        "iconPath": "images/home.png" // 未选中时的图标
      },
      {
        "pagePath": "pages/category/category",
        "text": "分类",
        "iconPath": "images/cate.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "images/mine.png"
      }
    ]
  }
}

配置后，小程序底部会出现三个按钮，点击就能切换页面，和你平时用的小程序体验一致。

三、交互逻辑：让小程序「动起来」

页面光有样子还不够，得能响应用户操作（比如点击按钮、下拉刷新）。这就需要用到「事件」和「页面逻辑」。

1. 事件：用户操作的「信号」

小程序里最常用的是「点击事件」，用bindtap来绑定。比如在页面里放一个搜索框，点击时跳转到搜索页：

在.wxml 里定义元素和事件：

xml

<view class="search" bindtap="toSearch">
  <van-search placeholder="搜索" background="#49b849"/>
</view>

这里的bindtap="toSearch"表示：点击这个搜索框时，会触发名为toSearch的函数。

然后在.js 里写函数逻辑：

js

Page({
  // 点击搜索框的处理函数
  toSearch() {
    // 跳转到搜索页
    wx.navigateTo({
      url: '/pages/search/search'
    })
  }
})

这样点击搜索框，就会跳转到搜索页面 —— 这就是一个完整的交互过程。

2. Page 实例：页面的「大脑」

每个页面的.js 文件本质上是一个Page实例，里面有两个核心部分：

  • data：页面要用的数据（比如文章列表、轮播图图片地址）。
  • 事件处理函数：像上面的toSearch，用来处理用户操作。

比如首页需要展示文章列表，就先在 data 里定义数据：

js

Page({
  data: {
    articles: [
      {
        title: "小程序开发入门指南",
        time: "2025-11-01",
        imgUrl: "/images/article1.jpg",
        text: "本文带你快速了解小程序开发的核心概念..."
      },
      {
        title: "如何设计好看的小程序界面",
        time: "2025-10-28",
        imgUrl: "/images/article2.jpg",
        text: "分享3个提升小程序界面美感的技巧..."
      }
    ]
  }
})

之后这些数据就能在页面中展示了。

四、尺寸单位：让小程序在所有手机上都「合身」

开发时最头疼的可能是：不同手机屏幕大小不一样，怎么保证界面在所有手机上都显示正常？

小程序用了一个「万能单位」——rpx（响应式像素），完美解决这个问题。

  • 原理：不管手机屏幕多大，小程序都把屏幕宽度固定为 750rpx。比如设计稿上一个按钮宽 375px（占屏幕一半），开发时就写 375rpx，在任何手机上它都会占屏幕一半。
  • 好处：不用自己计算不同屏幕的适配比例，直接用设计稿上的尺寸（设计师一般会按 750px 宽度出稿），写 rpx 就行。

记住：开发小程序时别用 px，全用 rpx，适配问题一步到位。

五、数据驱动：让界面「自动更新」

小程序最核心的思想是「数据驱动界面」：页面上的内容由数据决定，数据变了，界面会自动跟着变，不用手动操作 DOM（网页开发里的复杂操作）。

1. 数据绑定：用 {{}} 把数据「贴」到界面上

在.wxml 里，用{{}}包裹数据名，就能把 data 里的数据显示出来。比如展示文章标题：

xml

<view class="article-title__text">{{article.title}}</view>

这里的article.title对应 data 里 articles 数组中某一项的 title 字段，数据是什么，界面就显示什么。

2. 循环渲染：批量展示列表数据

如果要展示多篇文章（像博客首页的文章列表），用wx:for循环就能批量渲染：

xml

<block wx:for="{{articles}}" wx:key="index" wx:for-item="article">
  <view class="article">
    <view class="article-title__text">{{article.title}}</view>
    <view class="article-title__time">{{article.time}}</view>
  </view>
</block>
  • wx:for="{{articles}}"：遍历 data 里的 articles 数组。
  • wx:for-item="article"：给数组中的每一项起个名字（叫 article），方便在循环里使用。
  • wx:key="index"：给每个循环项加个唯一标识（提高性能，必须加）。

这样不管 articles 数组里有 10 篇还是 100 篇文章，都会自动渲染到页面上。

3. 组件复用：快速实现复杂功能

小程序有很多现成的组件（比如轮播图、滚动列表），直接用能省很多事。

比如用swiper组件做轮播图（博客首页的 banner）：

xml

<swiper class="banner" indicator-dots="true" autoplay="true" interval="5000">
  <block wx:for="{{advertPics}}" wx:key="index">
    <swiper-item>
      <image src="{{item}}" class="slide-image" mode="widthFix"/>
    </swiper-item>
  </block>
</swiper>
  • indicator-dots="true"：显示轮播图底部的小圆点指示器。
  • autoplay="true"：自动轮播。
  • interval="5000"：每 5 秒切换一张。
  • 循环advertPics数组（里面是轮播图图片地址），自动生成轮播项。

再比如用scroll-view做滚动列表（文章太多时可以上下滑动）：

xml

<scroll-view scroll-y="true" style="height: 500rpx;">
  <!-- 这里放文章列表 -->
</scroll-view>

scroll-y="true"表示允许纵向滚动，设置高度后，内容超过高度就会出现滚动条。

六、实战：博客首页完整代码解析

结合上面的知识点，我们来看一个完整的博客首页代码（.wxml），你会发现其实很简单：

xml

<view class="container">
  <!-- 搜索框 -->
  <view class="search" bindtap="toSearch">
    <van-search placeholder="搜索" background="#49b849"/>
  </view>

  <!-- 分类菜单（网格布局） -->
  <view class="weui-grids">
    <block wx:for="{{menus}}" wx:key="{{item.id}}">
      <navigator class="weui-grid" url="../articles/articles">
        <image class="weui-grid__icon" src="{{item.typePic}}" />
        <view class="weui-grid__label">{{item.typeName}}</view>
      </navigator>
    </block>
  </view>

  <!-- 轮播图 -->
  <swiper class="banner" indicator-dots="true" autoplay="true" interval="5000">
    <block wx:for="{{advertPics}}" wx:key="index">
      <swiper-item>
        <image src="{{item}}" class="slide-image" mode="widthFix"/>
      </swiper-item>
    </block>
  </swiper>

  <!-- 文章列表（可滚动） -->
  <scroll-view scroll-y="true">
    <block wx:for="{{articles}}" wx:key="index" wx:for-item="article">
      <navigator url="../articles/articles">
        <view class="article">
          <view class="article-title">
            <view class="article-title__text">{{article.title}}</view>
            <view class="article-title__time">{{article.time}}</view>
          </view>
          <view class="article-column">
            <image class="article-column__img" src="{{article.imgUrl}}"/>
            <view class="article-column__text">{{article.text}}</view>
          </view>
        </view>
      </navigator>
    </block>
  </scroll-view>
</view>

这段代码的逻辑很清晰：

  1. 顶部是搜索框，点击触发toSearch函数跳转到搜索页。
  2. 中间是分类菜单（用weui-grids网格布局），循环menus数组展示分类图标和名称，点击用navigator跳转到文章列表页。
  3. 轮播图部分用swiper组件，循环advertPics数组展示图片。
  4. 底部是文章列表，用scroll-view实现滚动，循环articles数组展示每篇文章的标题、时间、图片和摘要，点击跳转到文章详情页。

对应的.js 文件里，只需要定义这些数组数据：

js

Page({
  data: {
    menus: [
      { id: 1, typeName: "技术", typePic: "/images/tech.png" },
      { id: 2, typeName: "生活", typePic: "/images/life.png" }
    ],
    advertPics: [
      "/images/banner1.jpg",
      "/images/banner2.jpg"
    ],
    articles: [
      // 文章数据...
    ]
  },
  toSearch() {
    // 跳转逻辑...
  }
})

七、总结：小程序开发没那么难

看完这篇文章，你会发现开发一个博客小程序的核心逻辑并不复杂：

  • 用 app.json 搭好全局框架和页面导航。
  • 用.wxml 写页面结构，.wxss 调样式，rpx 保证适配。
  • 用.js 里的 data 存数据，bindtap 处理点击，wx:for 循环展示列表。
  • 数据驱动界面，数据变了界面自动更新，不用手动操作。

新手入门时，建议从模仿开始：先看懂别人的代码，再自己改数据、加功能（比如给文章列表加个点赞按钮）。熟悉后，再学习调用微信的 API（比如获取用户信息、调用支付），就能开发更复杂的小程序了。

博客小程序的开发就介绍到这里，下次我们聊聊如何用云开发实现文章的发布和存储 —— 不用买服务器也能做后端哦！

avatar
文章
阅读
粉丝