第2章：微信小程序开发基础_第1页
第2章：微信小程序开发基础_第2页
第2章：微信小程序开发基础_第3页
第2章：微信小程序开发基础_第4页
第2章：微信小程序开发基础_第5页
已阅读5页，还剩9页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

微信小程序入门与实战第2章：小程序开发基础本章目录01.小程序项目结构解析了解小程序的文件组织方式和全局配置02.WXML核心语法详解掌握数据绑定、列表渲染、条件渲染等关键技术03.WXSS样式设计与适配学习小程序的样式语言和屏幕适配方案04.实战：个人名片页面开发综合运用所学知识，完成一个完整页面的开发05.常见问题与总结解答开发中的常见问题，巩固学习成果小程序项目结构总览标准项目目录结构示意图根目录核心文件app.js：小程序逻辑入口，管理应用生命周期与全局状态。app.json：全局配置文件，定义页面路径、窗口样式及底部导航。app.wxss：全局样式文件，作用于所有页面，统一视觉风格。页面目录(pages)文件组成：每个页面包含四个基础文件：•.js：页面逻辑与交互处理•.json：页面个性化配置•.wxml：页面结构与组件布局•.wxss：页面专属样式表提示：所有页面路径必须在app.json的pages数组中注册，否则无法访问。全局配置文件(app.json)pages定义小程序所有页面路径，数组第一项为首页入口。["pages/index/index","pages/logs/logs"]window设置状态栏、导航条、标题、窗口背景色等全局样式。{"navigationBarTitleText":"我的小程序","backgroundColor":"#f0f0f0"}tabBar配置小程序底部或顶部的tab栏，包括文字、图标及选中状态。{"color":"#7A7E83","selectedColor":"#007AFF","list":[...]}networkTimeout设置各类网络请求的超时时间，如request、connectSocket等。{"request":60000,"connectSocket":60000,"downloadFile":60000}注：所有配置项均为JSON格式，需严格遵循语法规范，否则会导致小程序运行异常。WXMLvsHTML：核心差异对比对比维度WXML(小程序)HTML(网页)根节点<page><html>数据绑定{{message}}(双大括号){{message}}(框架实现)列表渲染wx:for="{{array}}"v-for(Vue)/map(React)条件渲染wx:if="{{condition}}"v-if(Vue)/{condition&&...}事件绑定bindtap="handleTap"onClick={handleClick}自定义组件支持，需在json中声明原生支持，或通过框架实现WXML借鉴了HTML语法，但针对小程序环境进行了优化，拥有更轻量的运行时和更强的原生能力调用。WXML核心语法：数据绑定与列表渲染数据绑定(DataBinding)WXML：<text>{{message}}</text>JS：Page({data:{message:'HelloWorld'}})列表渲染(wx:for)语法：使用wx:for遍历数组，需配合wx:key提升性能。WXML：<viewwx:for="{{array}}"wx:key="*this">{{item}}</view>JS：Page({data:{array:[1,2,3,4,5]}})效果预览：数据绑定HelloWorld效果预览：列表渲染123...WXML核心语法：条件渲染条件渲染(wx:if)使用wx:if,wx:elif,wx:else控制组件的显示与隐藏。<viewwx:if="{{condition}}">内容A</view><viewwx:elif="{{another}}">内容B</view><viewwx:else>内容C</view>性能对比：wx:ifvshiddenwx:if(销毁/重建)条件为false时，组件会被销毁，不占用渲染资源。hidden(隐藏)条件为true时，仅设置display:none，组件仍在结构中。最佳实践：频繁切换用hidden，控制复杂组件显示隐藏用wx:if。WXSSvsCSS：核心差异对比对比维度WXSS(小程序)CSS(网页)样式导入@import"common.wxss";@importurl("common.css");尺寸单位rpx(响应式像素),pxpx,em,rem,vw/vh选择器支持大部分，不支持:nth-child等高级选择器支持所有CSS选择器全局样式app.wxss中的样式作用于所有页面全局CSS文件作用于所有页面局部样式页面.wxss仅作用于当前页面，优先级高需通过CSSModules等方式实现作用域小程序开发核心知识点总结WXSS样式设计与屏幕适配(rpx)rpx核心概念与换算定义：小程序独有的响应式像素单位，规定屏幕宽度为750rpx。换算：以iPhone6为基准，屏幕宽375px=750rpx，即1rpx=0.5px。系统会自动适配不同分辨率。适配实战示例设计基准：通常以iPhone6（750px宽）作为设计稿标准。应用：设计稿上量出的宽度数值，直接对应小程序中的rpx值。例如：设计稿宽300px→代码写300rpx。核心原则：设计稿1px=小程序1rpx，无需手动计算，自动适配所有机型。使用rpx单位可以极大减少开发中因屏幕尺寸差异带来的适配工作量，提升开发效率。实战案例：个人名片页面开发最终效果预览包含头像、姓名、职位等信息布局简洁，信息清晰1.准备页面结构(WXML)使用<view>、<image>、<text>等基础组件搭建页面骨架，构建语义化结构。2.添加样式(WXSS)采用rpx适配不同屏幕，利用Flex布局实现居中对齐，设置圆角和间距提升美观度。3.绑定数据(JS)在Page的data中定义姓名、职位等数据，通过数据绑定动态渲染到页面视图中。常见问题排查Q1:数据绑定不生效，页面显示`{{message}}`？检查JS文件中是否在Page({})的data对象中定义了`message`属性。Q2:wx:for渲染列表时出现性能警告？为`wx:for`组件添加wx:key属性，建议使用数据中唯一的id，如`wx:key="id"`。Q3:页面样式不生效？检查样式文件路径及WXML类名引用是否正确，注意WXSS作用域限制问题。Q4:rpx设置的尺寸在不同手机显示不一致？确保设计稿基于750px宽度，并且所有尺寸都统一使用rpx单位进行适配。本章总结掌握小程序项目结构理解了app.js,app.json,app.wxss的作用，以及页面四个文件的组成逻辑。理解WXML核心语法掌握数据绑定、列表渲染(wx:for)及条件渲染(wx:if)等核心指令的使用。掌握WXSS样式设计了解WXSS与CSS的区别，学会使用rpx单位进行多屏幕适配。完成个人名片页面开发通过实战综合运用本章知识，实现了完整的页面开发流程与效果。小程序开发基石·理论与实战结合课后实操任务：美化你的个人名片任务步骤01.添加背景图片在页面最外层view中，通过WXSS设置一张背景图片。02.使用flex布局利用justify-content和align-items属性，让名片内容水平垂直

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论