互联网小程序培训课件.pptVIP

微信小程序开发培训课件

第一章小程序概述与发展趋势什么是微信小程序微信小程序是一种轻量级应用程序,无需下载安装即可使用。它依托于微信生态系统,为用户提供即用即走的便捷体验。小程序结合了原生App的流畅性和Web应用的灵活性,成为移动互联网时代的重要应用形态。核心特点轻量级架构,启动速度快无需安装,节省手机存储空间依托微信12亿+用户生态开发成本低,维护便捷跨平台兼容,一次开发多端运行8.5亿日活跃用户2025年小程序日活跃用户数750万小程序数量已上线小程序总数突破2.3万亿交易规模年度小程序电商交易额

小程序与传统App、Web的核心区别vs原生App无需下载安装,即开即用体积更小,通常不超过2MB开发周期短,成本降低60%更新无感知,自动同步最新版本依赖微信环境,功能受限vsWeb网页性能更优,接近原生体验离线缓存,支持弱网环境调用更多原生能力(相机、位置等)更流畅的动画与交互效果受微信平台规则约束技术栈对比对比维度小程序Web原生App标记语言WXMLHTMLXML/SwiftUI样式语言WXSSCSS原生样式系统脚本语言JavaScriptJavaScriptJava/Kotlin/Swift包大小限制主包2MB无限制通常50-200MB开发周期1-2个月2-4周

第二章开发准备与环境搭建01注册小程序账号访问微信公众平台(),选择小程序类型注册。填写邮箱、密码等基本信息,完成邮箱验证。需要准备企业营业执照或个人身份信息进行主体认证。02获取AppID登录小程序后台,在开发-开发管理-开发设置中获取AppID。这是小程序的唯一标识符,用于开发调试和发布上线。同时可以配置服务器域名、业务域名等关键信息。03下载开发者工具访问微信官方开发者工具下载页面,根据操作系统(Windows/Mac/Linux)下载对应版本。安装完成后,使用微信扫码登录,即可开始创建项目。04创建第一个项目打开开发者工具,点击+号新建项目。填入AppID、项目名称、本地目录,选择不使用云服务(初学阶段),点击新建即可生成默认模板项目。

小程序项目结构详解全局配置文件app.js-小程序逻辑入口app.json-全局配置app.wxss-全局样式sitemap.json-搜索配置页面文件组成每个页面由4个同名文件组成:.wxml-页面结构.wxss-页面样式.js-页面逻辑.json-页面配置miniprogram/

├──pages/#页面目录

│├──index/#首页

││├──index.wxml

││├──index.wxss

││├──index.js

││└──index.json

│└──logs/#日志页

│├──logs.wxml

│├──logs.wxss

│├──logs.js

│└──logs.json

├──utils/#工具函数目录

│└──util.js

├──app.js#小程序逻辑

├──app.json#小程序配置

├──app.wxss#小程序样式

└──sitemap.json#搜索配置

1app.json核心配置定义小程序页面路径、窗口表现、底部tab栏等全局配置项。pages数组第一项为首页,window对象设置导航栏样式。2页面配置优先级页面级.json配置会覆盖app.json中的window配置。这种设计允许不同页面拥有独特的导航栏样式和交互行为。

第三章小程序基础语法与核心概念WXML标签体系WXML是微信小程序的标记语言,类似HTML但使用自定义组件标签。它支持数据绑定、列表渲染、条件渲染等特性,让页面结构更加灵活。容器组件view-块级容器,类似divscroll-view-可滚动视图swiper-滑块视图容器基础内容text-文本组件rich-text-富文本显示progress-进度条媒体组件image-图片显示video-视频播放器camera-相机组件表单组件button-按钮input-输入框picker-选择器WXSS样式特性rpx响应式单位rpx是小程序专用的响应式长度单位。规定屏幕宽度为750rpx,可根据屏幕宽度自适应。例如在iPhone6上,1rpx=0.5px,在iPhone6Plus上,1rpx=0.6px。Flex布局优先小程序推荐