1. 什么是微信小程序微信小程序是一种不需要下载安装即可使用的应用它实现了应用“触手可及”的梦想用户扫一扫或搜一下即可打开应用。小程序也体现了“用完即走”的理念用户不用关心是否安装太多应用的问题。1.1 小程序的特点无需安装不占用手机存储空间即用即走使用方便无需下载开发门槛低基于前端技术栈HTMLCSSJS跨平台一次开发多端运行iOS、Android微信生态天然拥有微信的社交能力和用户基础2. 开发环境搭建2.1 准备工作注册微信小程序账号访问微信公众平台点击“立即注册”选择“小程序”按照指引完成注册流程获取AppID登录小程序后台在“开发”-“开发设置”中获取AppIDAppID是小程序的唯一标识开发调试需要用到2.2 安装开发者工具下载微信开发者工具根据操作系统选择对应版本Windows/Mac安装并启动开发者工具2.3 创建第一个小程序项目打开微信开发者工具点击“”新建项目填写项目信息项目名称MyFirstMiniProgram目录选择本地文件夹AppID填写获取的AppID或使用测试号开发模式小程序后端服务不使用云服务点击“新建”完成创建3. 小程序项目结构创建成功后你会看到以下目录结构my-first-miniprogram/ ├── pages/ # 页面目录 │ ├── index/ # 首页 │ │ ├── index.js # 页面逻辑 │ │ ├── index.json # 页面配置 │ │ ├── index.wxml # 页面结构 │ │ └── index.wxss # 页面样式 │ └── logs/ # 日志页 ├── utils/ # 工具类 ├── app.js # 小程序逻辑 ├── app.json # 小程序公共配置 ├── app.wxss # 小程序公共样式 └── project.config.json # 项目配置3.1 核心文件说明app.js小程序入口文件注册小程序生命周期函数app.json全局配置文件设置页面路径、窗口样式等app.wxss全局样式文件pages/存放所有小程序页面utils/工具函数目录4. 小程序基础语法4.1 WXMLWeiXin Markup LanguageWXML是小程序的标签语言类似于HTML!-- pages/index/index.wxml --viewclasscontainertextHello, 小程序!/textbuttonbindtaphandleClick点击我/buttonimagesrc/images/logo.pngmodeaspectFit/image/view4.2 WXSSWeiXin Style SheetsWXSS是小程序的样式语言基于CSS扩展/* pages/index/index.wxss */.container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;}text{font-size:24px;color:#333;margin-bottom:20px;}button{background-color:#07c160;color:white;padding:10px 20px;border-radius:5px;}4.3 JavaScript逻辑层// pages/index/index.jsPage({data:{message:欢迎使用小程序},handleClick:function(){wx.showToast({title:按钮被点击了,icon:success})},onLoad:function(){console.log(页面加载完成)}})5. 小程序生命周期5.1 应用生命周期app.js// app.jsApp({// 小程序初始化完成时触发onLaunch:function(options){console.log(小程序启动)},// 小程序显示到前台时触发onShow:function(options){console.log(小程序显示)},// 小程序隐藏到后台时触发onHide:function(){console.log(小程序隐藏)}})5.2 页面生命周期// 页面.js文件Page({// 页面加载时触发onLoad:function(options){console.log(页面加载,options)},// 页面初次渲染完成时触发onReady:function(){console.log(页面渲染完成)},// 页面显示时触发onShow:function(){console.log(页面显示)},// 页面隐藏时触发onHide:function(){console.log(页面隐藏)},// 页面卸载时触发onUnload:function(){console.log(页面卸载)}})6. 常用API示例6.1 网络请求// 发起GET请求wx.request({url:https://api.example.com/data,method:GET,success:function(res){console.log(请求成功,res.data)},fail:function(err){console.log(请求失败,err)}})6.2 本地存储// 存储数据wx.setStorageSync(userInfo,{name:张三,age:25})// 读取数据constuserInfowx.getStorageSync(userInfo)console.log(userInfo)// 异步存储wx.setStorage({key:token,data:abc123,success:function(){console.log(存储成功)}})6.3 界面交互// 显示提示框wx.showToast({title:操作成功,icon:success,duration:2000})// 显示加载框wx.showLoading({title:加载中...,mask:true})// 隐藏加载框wx.hideLoading()// 显示模态对话框wx.showModal({title:提示,content:确定要删除吗,success:function(res){if(res.confirm){console.log(用户点击确定)}}})7. 实战创建一个待办事项小程序7.1 项目结构todo-miniprogram/ ├── pages/ │ ├── index/ # 首页 │ └── add/ # 添加页面 ├── app.js ├── app.json └── app.wxss7.2 app.json配置{pages:[pages/index/index,pages/add/add],window:{navigationBarTitleText:待办事项,navigationBarBackgroundColor:#07c160,navigationBarTextStyle:white},tabBar:{list:[{pagePath:pages/index/index,text:首页,iconPath:images/home.png,selectedIconPath:images/home-active.png},{pagePath:pages/add/add,text:添加,iconPath:images/add.png,selectedIconPath:images/add-active.png}]}}7.3 首页实现!-- pages/index/index.wxml --viewclasscontainerviewclassheadertext我的待办事项/texttextclasscount共{{todos.length}}项/text/viewviewclasstodo-listblockwx:for{{todos}}wx:keyidviewclasstodo-item {{item.completed ? completed : }}checkboxchecked{{item.completed}}bindtaptoggleTododata-id{{item.id}}/checkboxtextclasstodo-text{{item.text}}/textbuttonclassdelete-btnbindtapdeleteTododata-id{{item.id}}删除/button/view/block/viewviewclassemptywx:if{{todos.length 0}}text暂无待办事项点击下方添加/text/view/view8. 调试与发布8.1 调试技巧Console面板查看日志和错误信息Sources面板调试JavaScript代码Network面板监控网络请求Storage面板查看本地存储数据AppData面板实时查看页面数据8.2 真机调试点击开发者工具右上角的“预览”按钮使用微信扫描二维码在手机上查看小程序效果开启“真机调试”模式可以在手机上查看Console日志8.3 发布流程代码上传点击“上传”按钮填写版本号和备注提交审核在小程序后台提交审核等待审核通常需要1-7个工作日发布上线审核通过后点击“发布”即可上线9. 常见问题与解决方案9.1 页面白屏原因页面路径配置错误解决检查app.json中的pages配置9.2 网络请求失败原因未配置合法域名解决在小程序后台配置request合法域名9.3 样式不生效原因选择器权重问题或样式文件未引入解决检查WXSS文件引入使用!important提高权重9.4 真机与模拟器表现不一致原因设备差异或权限问题解决使用真机调试功能检查权限配置10. 学习资源推荐10.1 官方文档微信小程序官方文档微信开发者工具文档10.2 学习社区CSDN小程序专栏掘金小程序话题微信开放社区10.3 实战项目仿豆瓣电影小程序天气查询小程序电商购物小程序新闻阅读小程序总结微信小程序开发门槛相对较低但功能强大。通过本文的学习你应该已经掌握了小程序的基本概念和特点开发环境的搭建方法小程序的项目结构和核心语法常用API的使用方式完整的开发调试发布流程建议从简单的项目开始实践逐步掌握更复杂的功能。小程序生态不断完善持续学习新的API和最佳实践才能开发出更优秀的小程序应用。下一步建议尝试开发一个完整的小程序项目如个人博客小程序或工具类小程序将理论知识转化为实践经验。