微信小程序开发从注册到全栈开发实战

本文将通过完整的开发流程演示，带您从零开始创建一个具备前后端交互的小程序，后端采用Java+SpringBoot技术栈。

---

一、平台注册与准备

1.1 小程序注册步骤

• 访问微信公众平台，选择「小程序」注册类型
  
• 填写邮箱、密码等基本信息（需未注册过微信平台的邮箱），完成企业/个人主体认证（个人开发者需身份证验证）
  
• 填写小程序信息和类目
  
• 获取AppID：开发与服务 > 开发管理 > 开发设置
  

1.2 开发环境搭建

• 访问微信开发者工具下载页面,下载和自己操作系统对应的稳定版开发者工具。
  
• 新建项目时填写AppID，勾选「不使用云服务」（传统开发模式），不使用模板（纯净模式）
  

---

二、前端开发实战

2.1 项目结构解析

├── project.config.json    			# 项目配置
├── project.private.config.json     # 个人项目配置
├── sitemap.json     				# 站点地图（配置被微信搜索）
├── app.js       # 全局逻辑
├── app.json     # 全局配置（小程序）
├── app.wxss     # 全局样式
├── app.wxss     # 全局样式
├── pages        # 页面目录
│   └── index    # 首页
│       ├── index.js    # 首页逻辑
│       ├── index.json  # 首页配置
│       ├── index.wxml  # 首页模板
│       └── index.wxss  # 首页样式

2.2 新建页面

2.2.1 方案一

• 新建文件夹，在pages上右键，可新建文件夹
  
• 新建page，在新建的文件夹右键，新建page,输入名称，会自动创建.js/.json/.wxml/.wxss文件
  

2.2.2 方案二

• 在app.json文件中的pages直接加入需要创建的page路径
  
• 使用快捷键Ctrl + S，保存后自动生成页面
  

2.3 基本语法

• 数据绑定

#index.wxml
<view>
    <text>用户姓名：{{userName}} </text>
    <text>年龄：{{age}} 岁</text>
</view>
#index.js
Page({
    data: {
      userName: '李小明',
      age: 28
    }
  })

• 条件判断

#index.wxml
<view wx:if="{{C}{isVIP}}">
  <text>尊贵的VIP会员</text>
</view>
<view wx:else>
  <button bindtap="openVIP">开通会员</button>
</view>
#index.js
Page({
    data: {
      userName: '李小明',
      age: 28,
      isVIP: true,
    }
  })

• 列表循环

#index.wxml
<view wx:for="{{C}{orders}}" wx:key="id">
    <view class="order-item">
        <text>商品：{{item.product}} </text>
        <text>价格：¥{{item.price}} </text>
    </view>
</view>
#index.js
Page({
  data: {
    userName: '李小明',
    age: 28,
    isVIP: true,
    orders: [
      { id: 1001, product: '耳机', price: 299 },
      { id: 1002, product: '手机', price: 599 }
    ]
  }
})
#index.wxss
.order-item {
    margin: 20rpx;
    padding: 30rpx;
    background: #8b1919;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
  }

三、后端提供数据

• 后端接口使用java+Springboot开发

//Controller
package com.spaced.miniprogramserver.demos.web;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.ArrayList;
import java.util.List;

@RestController
public class OrderController {
    @RequestMapping("/queryAll")
    public List<Order> queryAll() {
        List<Order> orderList = new ArrayList<>();
        orderList.add(new Order(1, "product1", 1.0));
        orderList.add(new Order(2, "product2", 2.0));
        orderList.add(new Order(3, "product3", 3.0));
        orderList.add(new Order(4, "product4", 4.0));
        orderList.add(new Order(5, "product5", 5.0));
        return orderList;
    }
}
//Entity
package com.spaced.miniprogramserver.demos.web;
import lombok.AllArgsConstructor;
import lombok.Data;

@Data
@AllArgsConstructor
public class Order {
    private Integer id;

    private String product;

    private Double price;
}

四、前后端对接

• 前端发起请求

#index.wxml
<!--index.wxml-->
<navigation-bar title="Weixin" back="{{C}{false}}" color="black" background="#FFF"></navigation-bar>
<scroll-view class="scrollarea" scroll-y type="list">
  <view class="container">
    <view>
        <text>用户姓名：{{userName}} </text>
        <text>年龄：{{age}} 岁</text>
    </view>
    <view wx:if="{{C}{isVIP}}">
        <text>尊贵的VIP会员</text>
    </view>
    <view wx:else>
        <button bindtap="openVIP">开通会员</button>
    </view>

    <button class="refresh-btn" bindtap="loadOrders">
        <block>
            刷新订单
        </block>
    </button>
    <view wx:for="{{C}{orders}}" wx:key="id">
        <view class="order-item">
            <text>商品：{{item.product}} </text>
            <text>价格：¥{{item.price}} </text>
        </view>
    </view>
  </view>
</scroll-view>

#index.js
Page({
    data: {
      userName: '李小明',
      age: 28,
      isVIP: true,
      orders: [
        { id: 1001, product: '耳机', price: 299 },
        { id: 1002, product: '手机', price: 599 }
      ]
    },
    // 获取用户订单列表
    loadOrders() {
        wx.request({
        url: 'http://127.0.0.1:8080/queryAll',
        method: 'GET',
        data: {
            userId: '123456'
        },
        success: (res) => {
            if(res.statusCode === 200) {
                this.setData({ orders: res.data })
            }
        },
        fail: (err) => {
            wx.showToast({ title: '网络请求失败' })
        }
        })
    }
})

• 配置不校验合法域名及使用HTTP请求

• 展示后端返回数据

五、发布小程序

• 前提条件 1.后端接口需要部署在公网服务器 2.需要完成小程序备案流程

• 点击上传按钮，上传本地代码

• 选择版本，进行发布

六、总结

本文介绍了微信小程序开发快速入门流程，后端使用JAVA进行开发，需要独立的服务器部署SpringBoot服务。服务器的成本较高，后续会介绍云开发，云开发会降低运维成本，开发更简便。