微信小程序开发项目实战教程 课件 项目2：小程序开发技术基础

项目2：小程序开发技术基础项目管理、框架结构与MVVM模式详解微信小程序开发项目实战教程CONTENTS01小程序的项目管理开发者工具项目管理项目创建与成员权限02小程序开发框架目录结构与文件组成全局配置与资源管理03小程序的MVVM模式MVVM原理机制页面数据绑定与生命周期PART01小程序的项目管理从零开始创建与管理你的小程序项目开发者工具的项目管理面板首次启动登录首次使用开发者工具时，需要使用微信扫码完成登录授权，确保账号安全。项目列表管理集中展示已创建的小程序项目，提供便捷的导入、删除及搜索功能，方便管理。创建新项目点击界面显眼的“+”号按钮，即可快速进入新项目创建流程，开始开发之旅。小程序的项目创建（一）：参数设置步骤1：新建项目点击界面左上角的“+”号，在弹出菜单中选择“小程序”类型。步骤2：填写基本信息填写项目名称，选择本地存放目录，并填入已申请的AppID。步骤3：选择后端服务根据项目需求，选择“微信云开发”或“不使用云服务”。步骤4：选择开发模板选择合适的初始化模板，如“基础模板”或“云开发模板”。小程序的项目创建（二）：项目主界面资源管理器展示项目完整的文件结构，方便文件管理与导航。模拟器区实时预览小程序在不同设备上的运行效果。编辑器区编写和编辑小程序代码（JS,WXML,WXSS等）。调试器区查看运行日志、网络请求及数据，辅助排查问题。项目成员与权限（一）：登录管理平台登录入口以管理员身份访问微信公众平台()进行登录。操作路径登录后，在左侧菜单栏找到“管理”选项，点击进入“成员管理”页面。核心功能支持添加、删除项目成员，并为不同角色分配相应的系统权限。项目成员与权限（二）：添加成员与分配权限步骤1：添加成员点击“添加”按钮，输入需要授权的成员微信号进行搜索。步骤2：分配权限根据成员角色，勾选相应权限（运营者、开发者、数据分析者）。步骤3：扫码确认管理员使用微信扫码进行身份验证，确认后完成添加。项目成员与权限（三）：权限清单详解权限项运营者开发者数据分析者登录管理后台√√√版本发布与审核√--查看数据分析报表--√代码开发与调试-√-修改小程序基础信息√--PART02小程序开发框架深入理解小程序的目录结构与文件组成小程序的目录结构解析pages/-页面文件目录存放小程序所有的页面文件，每个页面通常包含.js,.json,.wxml,.wxss文件。utils/-公共工具库存放通用的JavaScript工具函数，用于代码复用和逻辑抽离。app.js-逻辑主文件小程序的入口文件，用于注册小程序实例，处理生命周期回调。app.json&app.wxss-全局配置与样式app.json配置页面路径、窗口表现等；app.wxss定义全局样式。一个页面的四个核心文件page.js-页面逻辑文件负责页面的逻辑处理，包括数据请求、用户交互事件处理以及页面生命周期管理。page.json-页面配置文件用于配置当前页面的窗口表现，例如导航栏标题、背景颜色等个性化设置。page.wxml-页面结构文件定义页面的结构布局，类似于网页中的HTML，通过标签语言构建用户界面。page.wxss-页面样式文件负责页面的视觉样式，类似CSS，用于定义组件的外观、布局和动画效果。全局配置：定制你的小程序外观配置代码(app.json)"window":{"navigationBarTitleText":"小程序开发基础","navigationBarBackgroundColor":"#FF0000","navigationBarTextStyle":"white"}navigationBarTitleText:设置导航栏标题文字navigationBarBackgroundColor:设置导航栏背景色navigationBarTextStyle:设置导航栏文字颜色(白/黑)模拟器实时效果资源部署与体积限制小程序体积限制普通项目包：≤2M分包项目：≤30M资源分离部署方案将静态资源（图片、视频）部署至独立存储服务器，业务数据存入数据库，小程序仅保留核心代码，通过接口交互。系统架构交互图小程序客户端接口服务器(API)数据/存储服务器PART03小程序的MVVM模式数据驱动视图的核心原理MVVM：Model-View-ViewModelModel(模型)数据层，负责数据的存储和处理，是应用的核心数据来源。ViewModel(视图模型)连接层，监听数据变化并更新视图，同时处理视图交互逻辑。View(视图)UI层，用户可见的界面，负责数据展示和响应用户交互。核心思想：数据驱动视图开发者只需关注数据和视图，无需手动操作DOM，ViewModel自动完成数据与视图的双向绑定。数据渲染：将数据展示到视图1.定义数据(page.js)Page({

data:{info:'HelloWorld'}})2.绑定数据(page.wxml)<!--使用Mustache语法--><view>{{info}}</view><!--渲染结果:HelloWorld-->更新数据：this.setData方法核心调用方法使用this.setData({key:newData})语法更新数据。数据驱动视图修改逻辑层的data数据，框架自动通知ViewModel更新对应视图。典型交互场景用户点击按钮触发onTap事件，在回调函数内调用setData实现页面实时刷新。页面的生命周期onLoad页面加载时触发，只调用一次。通常用于请求初始化数据。onShow页面显示时触发，每次打开页面都会调用。onReady页面初次渲染完成时触发，只调用一次。此时可以和视图层进行交互。onHide页面隐藏时触发。例如当navigateTo或底部tab切换时。onUnload页面卸载时触发。用于清理定时器等资源。页面导航：不同的跳转方式wx.navigateTo保留当前页面，跳转到新页面。

特点：页面栈保留，用户可以点击左上角返回按钮回到原页面。wx.redirectTo关闭当前页面，跳转到新页面。

特点：页面栈替换，用户无法返回原页面，常用于登录后跳转。wx.switchTab跳转到tabBar页面，并关闭其他所有非tabBar页面。

特点：专门用于底部导航栏切换，会清空页面栈。总结：掌握基础，迈向开发项目管理与权限配置学会使用开发者工具快速创建项目，掌握在公众平台管理成员权限的流程，确保开发协作的安全性。开发框架与目录结构深入理解小程序的目录结构，掌握app.json全局配置文件的作用，以及页面四文件（js/json/wxml/wxss）的分工与协作。MVVM数据驱动视图理解数据驱动视图的原理，熟练使用data定