上位机知识篇—微信小程序制作

---

文章目录

前言
一、微信小程序基础概念

什么是小程序
技术栈

前端
后端

二、开发准备

注册账号
开发工具
项目结构

三、核心开发步骤

配置 app.json
页面开发
API调用
云开发（可选）

四、调试与发布

本地调试
提交审核
发布上线

五、进阶功能

自定义组件
分包加载
数据缓存
第三方库

六、注意事项

限制
优化建议
学习资源

---

前言

本文简单介绍了微信小程序的制作.

---

一、微信小程序基础概念

什么是小程序

1.无需下载安装，即用即走的应用（轻量级，内嵌于微信中）。
2.跨平台（iOS/Android），基于微信生态开发。
3.适合工具类、电商、服务预约等场景。

技术栈

前端

前端：WXML（类似HTML）、WXSS（类似CSS）、JavaScript。

后端

后端：可选微信云开发或自建服务器（Node.js/PHP/Java等）。

二、开发准备

注册账号

进入微信公众平台注册小程序账号（需企业或个体户资质，个人账号功能受限）。

开发工具

下载微信开发者工具（官方IDE，支持调试和预览）。

项目结构

├── pages/          # 页面目录
│   ├── index/      # 首页
│   │   ├── index.wxml
│   │   ├── index.wxss
│   │   ├── index.js
│   │   └── index.json
├── app.js         # 全局逻辑
├── app.json       # 全局配置（页面路由、窗口样式）
├── app.wxss       # 全局样式
└── project.config.json # 项目配置

三、核心开发步骤

配置 app.json

{
            
  "pages": ["pages/index/index"],
  "window": {
            
    "navigationBarTitleText": "我的小程序",
    "navigationBarBackgroundColor": "#ffffff"
  }
}

页面开发

WXML模板（数据绑定、条件渲染）：
<view>{
           {message}}</view>
<view wx:if="{
             {show}}">显示内容</view>
WXSS样式（支持rpx自适应单位）：
.container { font-size: 14rpx; }

JS逻辑（生命周期、事件处理）：
Page({
            
  data: {
             message: "Hello" },
  onLoad() {
             console.log("页面加载"); }
})

API调用

微信开放能力（如获取用户信息、支付、扫码）：
wx.getUserProfile({
             desc: '获取用户信息', success(res) {
            } });

云开发（可选）

无需自建服务器，提供数据库、存储、云函数：
wx.cloud.init();
const db = wx.cloud.database();
db.collection('users').get().then(res => {
            });

四、调试与发布

本地调试

使用开发者工具模拟器、真机预览功能。
检查网络请求、性能分析（Audits面板）。

提交审核

上传代码 → 填写版本信息 → 提交微信审核（1-7个工作日）。

发布上线

审核通过后，登录公众平台点击【发布】。

五、进阶功能

自定义组件

创建复用组件：components/my-component，在页面中引入。

分包加载

优化首屏加载速度，拆分代码包：
json
“subPackages”: [{

“root”: “subpackage”,
“pages”: [“pageA”]
}]

数据缓存

使用wx.setStorageSync本地存储用户数据。

第三方库

引入npm包（需在工具中构建）：如vant-weappUI组件库。

六、注意事项

限制

代码包大小≤2MB（主包），总分包≤20MB。
个人账号无法开通支付、直播等功能。

优化建议

减少setData频率，避免性能问题。
使用CDN加速图片加载。

学习资源

官方文档：微信开放文档
社区：CSDN、掘金小程序专栏。

通过以上步骤，你可以完成一个基础小程序的开发和上线。如需复杂功能（如电商系统），建议结合后端开发或使用现成SaaS平台（如微盟、有赞）。

---