夜雨聆风
我用AI制作微信小程序,简易开发工具使用教程
我将从新手零基础角度，整理一套完整的微信小程序开发教程，包含开发准备、代码编写、图片资源配置、预览发布全步骤，手把手教你做出早安早上好图片小程序，步骤详细易懂。
微信小程序新手教程：早安早上好图片小程序
↓点击下面文字查看案件↓
一、前期准备（零基础必看）
1. 注册微信小程序账号
1. 打开微信公众平台（https://mp.weixin.qq.com/），点击右上角「立即注册」，选择「小程序」。
2. 按照提示填写邮箱、密码，完成邮箱激活，选择个人主体（新手优先），完成实名认证，即可获得小程序AppID（后续开发必备，在小程序后台「开发管理→开发设置」中查看）。
2. 安装开发工具
1. 下载微信开发者工具（官方唯一开发工具，免费）：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
2. 安装后打开，选择「小程序」项目，点击「+」新建项目：- 项目目录：新建一个空文件夹（存放小程序代码）
– AppID：填写刚才申请的小程序AppID
– 项目名称：自定义，比如「早安早上好图片」
– 选择「不使用云服务」（新手基础版），点击确定进入开发界面。
3. 开发界面基础认知
– 左侧：文件目录（小程序核心文件都在这里）
– 中间：模拟器（实时预览小程序效果）
– 右侧：编辑器（编写代码）、调试器（查看报错）
– 核心文件类型：- .js ：逻辑文件（写功能代码）
– .wxml ：结构文件（写页面布局，类似HTML）
– .wxss ：样式文件（写页面样式，类似CSS）
– .json ：配置文件（页面标题、权限等）
能开发微信小程序的软件/工具
1. 官方必用
微信开发者工具
官方专用，免费、必须装；写代码、预览、调试、上传发布一站式，原生小程序首选。
2. 代码编辑器（辅助写代码）
– VS Code：免费、插件多，写小程序代码提示超好用
– WebStorm：专业IDE，代码智能提示强，收费
3. 跨端框架（一套代码多端发布）
– uni-app：Vue语法，最火，一次开发打包微信/抖音/支付宝小程序、APP、H5
– Taro：支持React/Vue，大厂常用，性能好
– uniapp X：uni-app升级版，性能更强
4. 无代码/低代码（不用写代码）
微搭、即速应用、凡科
拖拽搭建，适合做商城、门店、展示类小程序，零基础能用。
二、项目文件搭建
打开微信开发者工具，默认生成的项目文件里，我们只保留pages文件夹、app.js、app.json、app.wxss，其余多余文件删除，按照以下步骤编写代码。
1. 全局配置app.json（设置小程序基础信息）
作用：配置小程序页面路径、导航栏标题、颜色等。
将以下代码复制替换原app.json内容：
json
{
“pages”: [
“pages/index/index”
],
“window”: {
“backgroundTextStyle”: “light”,
“navigationBarBackgroundColor”: “#ff9a9e”,
“navigationBarTitleText”: “早安早上好图片”,
“navigationBarTextStyle”: “white”,
“backgroundColor”: “#fef8f8”
},
“sitemapLocation”: “sitemap.json”
}
– navigationBarBackgroundColor ：导航栏颜色，可自行修改色值
– navigationBarTitleText ：小程序顶部标题
2. 新建页面文件
在 pages 文件夹里新建 index 文件夹，再在index文件夹里新建4个文件：
– index.js（页面逻辑）
– index.wxml（页面结构）
– index.wxss（页面样式）
– index.json（页面配置）
三、核心代码编写
1. 页面结构：index.wxml
作用：展示早安图片、图片切换按钮、分享按钮等布局，代码如下：
<!–pages/index/index<view
<!– 早安图片展示区<image class=”morning-img” src=”{{imgList[currentIndex]}}”</image<!– 操作按钮区 –>
<view class=”btn-box”><button bindtap=”prevImg” type=”</button<button bindtap=”nextImg” type=”primary”>下一张</view<view class=”share-box”>
<button open-type=”share” type=”default”>分享</button>
</view>
2. 页面样式：index.wxss
作用：美化页面布局，让图片、按钮更美观，代码如下：
css
/* pages/index/index.wxss */
.container {
padding: 20rpx;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
background-color: #fef8f8;
}
/* 早安图片样式 */
.morning-img {
width: 90%;
margin: 40rpx 0;
border-radius: 20rpx;
box-shadow: 0 8rpx 16rpx rgba(0,0,0,0.1);
}
/* 按钮盒子样式 */
.btn-box {
display: flex;
justify-content: space-between;
width: 80%;
margin: 20rpx 0;
}
.btn-box button {
width: 40%;
border-radius: 50rpx;
}
.share-box {
margin-top: 30rpx;
}
.share-box button {
border-radius: 50rpx;
width: 60%;
}
3. 页面逻辑：index.js
作用：实现图片切换、数据存储核心功能，先准备早安图片：
1. 在项目根目录新建 images 文件夹，把下载好的早安早上好图片（建议10张左右，尺寸统一，jpg/png格式）放入 images 文件夹；
2. 复制以下代码，替换图片路径即可直接使用：
javascript
// pages/index/index.js
Page({
/**
* 页面的初始数据
*/
data: {
// 早安图片列表，替换成自己的图片路径
imgList: [
“/images/morning1.jpg”,
“/images/morning2.jpg”,
“/images/morning3.jpg”,
“/images/morning4.jpg”,
“/images/morning5.jpg”,
],
// 当前显示的图片索引
currentIndex: 0
},
// 上一张图片
prevImg() {
let index = this.data.currentIndex;
if (index === 0) {
wx.showToast({
title: ‘已经是第一张啦’,
icon: ‘none’
})
return;
}
this.setData({
currentIndex: index – 1
})
},
// 下一张图片
nextImg() {
let index = this.data.currentIndex;
let len = this.data.imgList.length;
if (index === len – 1) {
wx.showToast({
title: ‘已经是最后一张啦’,
icon: ‘none’
})
return;
}
this.setData({
currentIndex: index + 1
})
},
/**
* 页面分享功能
*/
onShareAppMessage() {
return {
title: ‘超好看的早安早上好图片，快来看看～’,
path: ‘/pages/index/index’
}
}
})
4. 页面配置：index.json
作用：单独配置当前页面标题，可留空或自定义，代码如下：
json
{
“usingComponents”: {},
“navigationBarTitleText”: “早安图片”
}
四、图片资源替换
把你准备好的早安早上好图片，重命名为 morning1、morning2… 格式，放入项目根目录的 images 文件夹；
如果图片数量不一样，在 index.js 的 imgList 数组里，增减图片路径即可。
五、预览与调试
1. 代码编写完成后，点击开发者工具顶部「编译」，模拟器会实时显示小程序效果；
2. 点击「上一张/下一张」按钮，测试图片切换功能；
3. 点击「分享好友」，测试分享功能；
4. 若无报错，页面正常显示，说明基础功能完成。
六、小程序上传发布（新手可选）
1. 点击开发者工具右上角「上传」，填写版本号、项目备注，上传到微信小程序后台；
2. 登录微信公众平台小程序后台，进入「开发管理→开发版本」，找到上传的代码，提交审核；
3. 微信官方审核通过后，点击「发布」，小程序即可正式上线，所有人都能搜索使用。
七、新手常见问题
1. 图片不显示：检查图片路径是否正确，必须是 /文件夹/图片名.格式 ，不能有中文、特殊符号；
2. 按钮无反应：检查 bindtap 绑定的函数名和js里的函数名是否一致；
3. 编译报错：检查代码标点符号是否是英文格式，json文件不能有多余逗号。
八、功能拓展（进阶）
1. 增加图片收藏、保存到手机功能；
2. 添加每日自动更新一张早安图片；
3. 优化图片加载速度，添加加载动画；
4. 加入早安文案搭配图片。
教程全程零基础可直接复制代码使用，需要我帮你整理可直接导入的完整项目包，省去手动新建文件的步骤吗？