微信小程序 (2)

合集下载

小程序面试题目(3篇)

第1篇第一部分：基础知识1. 请简要介绍小程序的概念、特点以及与App的区别。

解析：- 概念：小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的概念，用户扫一扫或者搜一下即可打开应用。

- 特点：- 即用即走：无需下载安装，快速启动。

- 轻量级：体积小，启动快。

- 便捷性：用户使用方便，无需关心版本更新。

- 平台兼容：支持微信、支付宝等多个平台。

- 与App的区别：- 安装方式：App需要下载安装，小程序无需。

- 运行环境：App运行在操作系统上，小程序运行在微信、支付宝等平台。

- 更新方式：App更新需要用户手动下载，小程序更新自动推送。

2. 请说明小程序的运行机制。

解析：- 小程序分为客户端和服务端两部分。

- 客户端负责展示界面和用户交互，服务端负责数据处理和业务逻辑。

- 客户端通过API与服务端进行数据交互。

3. 小程序的生命周期有哪些？请分别说明。

解析：- 页面生命周期：- onLoad：页面加载时触发。

- onShow：页面显示时触发。

- onHide：页面隐藏时触发。

- onUnload：页面卸载时触发。

- 小程序生命周期：- onLaunch：小程序初始化完成时触发。

- onShow：小程序显示时触发。

- onHide：小程序隐藏时触发。

- onError：小程序发生脚本错误时触发。

第二部分：技术实现4. 请简述小程序的页面结构。

解析：- 小程序页面由以下几部分组成：- WXML（微信标记语言）：用于描述页面的结构。

- WXSS（微信样式表）：用于描述页面的样式。

- JS（JavaScript）：用于描述页面的逻辑。

5. 如何在小程序中实现页面跳转？请举例说明。

解析：- 页面跳转可以通过`wx.navigateTo`、`wx.redirectTo`、`wx.switchTab`等方法实现。

- 示例：```javascript// 页面Awx.navigateTo({url: '/pages/pageB/pageB'// 页面Bwx.redirectTo({url: '/pages/pageC/pageC'});// 页面Cwx.switchTab({url: '/pages/pageD/pageD'});```6. 如何在小程序中实现数据绑定？请举例说明。

什么是小程序？

什么是小程序?
1，微信小程序，可以看作是一款简易的APP，但不需要下载，也不需要安装，直接能用。

而且还能免费让你附近5公里的人看到你的广告，助力商户畅享小程序流量红利。

2，微信小程序，也可以看作是一款手机网站，除具备传统网站的所有功能，另外可以沉淀粉丝，利用微信自身通知体系，优惠活动可以推送给用户。

安卓手机用户还可以象使用APP一样，把小程序固定在手机桌面上，便于下次使用。

3，小程序的应用目前已经超过三百个行业，如餐饮、电商、商超便利、美妆护理、服饰箱包、母婴、旅游、教育培训、健身等。

以企业展示、线下扶持、线上营销（会员卡、优惠券、团购、秒杀、分销等）、社区互动、品牌打造为核心。

小程序功能强大又简约，可以助力企业及商户业绩腾飞。

微信小程序合同(两篇)

小程序合同（二）一、背景与目的二、合同主体合同双方：三、合作内容1.甲方将提供乙方在小程序中展示和推广的空间和权益。

2.乙方将为甲方的小程序提供相关的推广和营销资源，包括但不限于广告投放、推广策划、用户引流等。

3.甲方与乙方将共同制定推广和营销的计划、策略和目标，确保合作的效果和成果。

4.双方将按照协商一致的方式进行合作费用的支付，包括广告费用、推广费用等。

四、合作期限本次合作期限自双方签署本合同之日起，至合同终止之日止。

合同期限为（具体期限）。

五、权益与义务1.甲方的权益与义务：（1）提供乙方在小程序中的展示和推广空间；（2）与乙方共同制定推广和营销计划，并按计划执行；（3）提供乙方所需的技术支持和合作资源。

2.乙方的权益与义务：（1）享有在甲方的小程序中进行推广和营销的权益；（2）提供相关的推广和营销资源；（3）按时支付合作费用。

六、违约与责任1.若甲方或乙方违反本合同规定，未能履行其应尽的义务，应承担相应的违约责任，并赔偿对方因此造成的损失。

2.若因不可抗力因素导致本合同无法履行，双方应及时通知对方，并协商解决方案，以减少损失。

七、保密条款双方在合作过程中可能互相了解对方的商业秘密和合作信息。

双方应对此类信息保密，并不得向任何第三方透露或使用，除非经对方书面同意。

八、争议解决本合同的建立、解释和履行应适用相关法律法规。

若发生争议，双方应首先通过友好协商解决；若协商不成，可向有管辖权的法院提起诉讼。

九、其他事项1.本合同一式两份，甲乙双方各执一份，具有同等法律效力。

2.本合同的任何修改或补充，须经甲乙双方协商一致，并以书面形式作出。

3.本合同自双方签字/盖章之日起生效。

甲方（签字/盖章）：乙方（签字/盖章）：日期：日期：微信小程序合同随着移动互联网的快速发展，智能手机成为人们生活中不可或缺的一部分。

在这种趋势下，微信小程序应运而生。

微信小程序是一种基于微信平台的轻量级应用程序，具有快速加载、无需下载安装的特点，为用户提供了更加便捷的移动端应用体验。

微信小程序设计规范(二)

引言概述小程序作为一种小型应用程序，具有快速开发、高用户粘度、跨平台等优势，因此在移动应用开发领域广受欢迎。

为了使小程序能够正常运行、良好的用户体验，设计规范起着至关重要的作用。

本文将深入探讨小程序设计规范，为开发者提供详细的指导和建议。

正文内容一、页面设计规范1.网格系统设计使用明确的网格系统布局，确保页面排版整齐有序。

遵循一致的网格间距和元素大小规则，保证页面风格统一。

考虑不同屏幕尺寸下的适配性，确保元素在各种设备上显示正常。

2.色彩搭配制定明确的色彩搭配规则，避免使用过多颜色，以免造成视觉混乱。

选用明亮且饱和度适中的颜色，使用户感觉舒适。

注意色彩对比度，确保文字和背景能够清晰地展现。

3.图标和按钮设计使用简洁明了的图标和按钮设计，使用户能够直观地理解其功能。

避免使用过多图标和按钮，以免页面过于复杂。

考虑到触摸屏的操作特性，确保图标和按钮的大小适中，并且能够容易。

4.图片和多媒体素材使用高清晰度的图片和多媒体素材，确保内容展示的质量。

选择合适的图片格式和压缩算法，以减少加载时间。

注意版权问题，尽量使用合法的图片和多媒体素材。

5.导航和布局统一导航和布局风格，确保用户在不同页面之间能够快速切换。

遵循常用的导航和布局模式，不要过于创新，以免造成用户迷惑。

考虑页面的深度和层次结构，合理安排导航和布局的层级关系。

二、交互设计规范1.页面加载速度优化代码和资源加载顺序，尽量减少页面加载时间。

前端缓存技术的应用，使得页面加载更加快速。

考虑网络环境差的情况下，合理处理页面加载的过程。

2.用户引导和反馈提供清晰明了的用户引导，告诉用户如何操作和使用小程序。

给予用户及时的反馈，例如加载进度条、按钮效果等。

合理利用交互动画和过渡效果，增加用户体验的乐趣。

3.用户输入和表单设计简化用户输入，减少输入步骤和复杂性。

提供明确的表单验证提示，帮助用户正确填写信息。

考虑不同设备屏幕的尺寸，避免输入框过小或过大。

4.页面导航和跳转提供明确的页面导航和跳转功能，帮助用户快速切换页面。

小程序介绍

பைடு நூலகம்
APP、小程序的优劣势比较 ○ 手机APP:
优势:APP可实现功能多，而且是自己的平台，自己做主，不用太担心第三方的审核等问题。而且不需要花费多余的营销费用，从前期的引流、蓄客，到后期的老用户的维护，都有专门的手段，变现手段多种多样。在使用上，用户的体验最佳，流畅度高、反应速度快。目前，手机APP已经是企业移动电商最极致的体验，作用已经超过传统的电商。
04 4.小程序需启用https站点，相比http站点，这将使用户与服务器之间，
收发的消息数据传输更加安全
小程序的商业价值
小程序的商业价值
小程序的商业价值
一．用户角度对于用户来说，微信小程序触及到了PC网页、公众号、H5、APP无法触及到的地方，概括来说它诞生就是帮助用户解决一些特殊需求的，比如在用户没有时间、想控制手机内存空间、不想下APP下载的时候，小程序就可以发挥它的价值了，概括起来有三点： ① 使用刚需低频服务时。小程序降低了低频服务类APP的使用门槛，需要使用时打开小程序，用完了就可以关掉，不会一直占手机内存，不想用了还可以删掉。这用完即走的特点正好满足用户使用低频服务类 APP时的需求，比如要买车票时打开小程序，买完票就关闭它，等要用时再打开，避免APP一直在手机里占内存却又很少用。 ② 使用线下的服务时。小程序在线下的价值是最值得关注的，因为用户在线下消费的需求正是“快捷”、 “灵活”、“用完即走”。比如在餐馆点菜，只需扫描二维码，就可以接入小程序，立马就能完成点菜，不必下载APP，也不必关注公众号，也不用排队等餐馆的服务员，同时加载速度比H5快，付款方式比 H5方便，对用户来说，可以说是最方便的方式。 ③ 满足特殊场景下的个性化需求时。个性化的需求可能只会持续一小段时间，而为了这一小段时间要去下载APP常常让用户觉得心累，比如大家肯定都有这样的遭遇，今天想看这部电影，下了一个播放器，明天想看那个电影，又下了另一个播放器，这时候如果使用小程序看电影，就可以完美切换了，不必在手机里下一堆视频播放器。

微信小程序开发实战(第2版)-教学大纲

《微信小程序开发实战（第2版）》课程教学大纲（课程英文名称）课程编号：学分：学分课时：86课时（其中：讲课55课时上机31课时）先修课程：计算机基础、计算机网络、HTML、CSS、JavaScript适用专业：信息技术及其计算机相关专业一、课程的性质与目标微信小程序是一门面向Web前端开发人员的课程，用于快速掌握微信小程序的开发。

本课程以案例驱动模式，循序渐进地讲解了微信小程序的相关知识，包括微信小程序项目的创建方法、页面组成、发布流程、常用组件、导航栏、标签栏、数据绑定、事件绑定、this 关键字、列表渲染、常用API、Vant Weapp组件库、WeUI组件库、uni-app框架等内容以及两个综合项目。

另外，本课程秉承立德树人理念，在案例中融入了许多思想政治内容。

通过本课程的学习，不仅可以让学生掌握微信小程序的核心知识，还可以培养学生的家国情怀、责任担当、敬业精神等。

二、课程设计思路和教学要求课程设计理念：通过学习本课程，使学生掌握如何将微信小程序与项目开发相结合。

按照学习的难易程度及先后顺序安排具体的内容，可以有效地将学生所学的内容串联起来，从而培养学生分析问题和解决问题的能力。

课程设计思路：本课程根据知识点难易的先后顺序进行讲解。

采用案例驱动式体例，主要包括“案例分析”“知识储备”“案例实现”等，在每个案例中，先对案例进行需求分析，然后在知识储备中讲解实现这个案例需要使用到的知识，并结合示例代码帮助学生理解，最后通过案例实现达到学以致用的目标。

学完微信小程序的基础知识后，通过两个项目实战将所学内容全部串联起来，培养学生分析和解决问题的能力。

操作系统：Windows 7或更高版本开发工具：微信开发者工具、HBuilder X三、课程的主要内容及基本要求第1章微信小程序入门学习单元微信小程序入门课时6课时学习目标1.了解微信小程序，能够说出微信小程序的概念、特点、发展前景和宿主环境2.掌握微信小程序开发账号的注册方法，能够独立完成微信小程序开发账号的注册3.掌握获取微信小程序AppID的方法，能够从微信小程序管理后台获取AppID4.掌握微信开发者工具的安装方法，能够独立完成微信开发者工具的安装5.掌握微信小程序项目的创建方法，能够使用微信开发者工具创建项目6.熟悉微信小程序的项目结构，能够解释每个文件的作用7.熟悉微信小程序的页面组成，能够解释WXML、WXSS、JS和JSON文件的作用8.熟悉微信小程序的通信模型，能够解释微信小程序中渲染层、逻辑层及第三方服务器的通信方式9.熟悉微信开发者工具的主界面，能够说出工具栏中常用快捷按钮的功能10.掌握微信小程序的项目设置，能够根据需要对微信小程序进行设置11.了解微信小程序开发常用快捷键，能够列举4类常用快捷键12.了解项目成员，能够说出项目成员的组织结构、分工和权限13.掌握添加项目成员和体验成员的方法，能够在微信小程序管理后台中添加项目成员和体验成员14.熟悉微信小程序的版本，能够说明微信小程序的4种版本15.熟悉微信小程序发布上线的流程，能够归纳出微信小程序发布上线的步骤学习内容知识点掌握程度重点难点什么是微信小程序了解微信小程序的特点了解微信小程序的发展前景了解微信小程序的宿主环境了解注册微信小程序开发账号掌握获取微信小程序AppID 掌握√安装微信开发者工具掌握创建微信小程序项目掌握√微信小程序的项目结构熟悉微信小程序的页面组成熟悉微信小程序的通信模型熟悉认识微信开发者工具熟悉微信小程序的项目设置掌握微信小程序开发常用快捷键了解项目成员的组织结构了解项目成员的分工了解项目成员和体验成员的管理了解项目成员的权限了解添加项目成员和体验成员掌握微信小程序的版本熟悉微信小程序的上线流程熟悉第2章微信小程序页面制作学习单元微信小程序页面制作课时10课时学习目标1.了解WXML的概念，能够说出WXML的特点、WXML与HTML的区别2.了解WXSS的概念，能够说出WXSS的特点、WXSS与CSS的区别3.了解组件的概念，能够说出组件的特点及常用的组件4.掌握页面路径的配置方法，能够运用该方法进行页面管理5.掌握view组件的使用方法，能够灵活运用view组件实现页面的布局效果6.掌握image组件的使用方法，能够灵活运用image组件完成图片插入操作7.掌握rpx单位的使用方法，能够灵活运用rpx单位解决屏幕适配的问题8.掌握页面样式的导入方法，能够灵活运用该方法导入公共样式9.掌握swiper和swiper-item组件的使用方法，能够灵活运用swiper和swiper-item组件完成轮播图的制作10.掌握text组件的使用方法，能够灵活运用text组件定义行内文本11.掌握Flex布局的使用方法，能够使用Flex布局的相关属性完成页面布局12.掌握导航栏的配置方法，能够完成导航栏标题颜色、背景颜色等页面效果的设置13.掌握标签栏的配置方法，能够完成页面标签栏的配置14.掌握vw、vh单位的使用方法，能够灵活运用vw、vh单位设置宽度和高度15.掌握video组件的使用方法，能够灵活运用video组件实现页面中视频的处理16.掌握表单组件的使用方法，能够灵活运用表单组件完成表单页面的制作学习内容知识点掌握程度重点难点WXML简介了解WXSS简介了解常用组件了解页面路径配置掌握√view组件掌握√image组件掌握√√rpx单位掌握样式导入掌握【案例2-1】个人信息-准备工作掌握【案例2-1】个人信息-实现“个人信息”微掌握√信小程序的页面结构【案例2-1】个人信息-实现“个人信息”微掌握信小程序的页面样式swiper和swiper-item组件掌握√text组件掌握Flex布局掌握【案例2-2】本地生活-准备工作掌握【案例2-2】本地生活-实现“本地生活”微掌握信小程序的页面结构【案例2-2】本地生活-实现“本地生活”微掌握信小程序的页面样式导航栏配置掌握标签栏配置掌握vm、vh单位掌握video组件掌握表单组件掌握√【案例2-3】婚礼邀请函-准备工作掌握【案例2-3】婚礼邀请函-项目初始化掌握【案例2-3】婚礼邀请函-实现“邀请函”页掌握面的结构【案例2-3】婚礼邀请函-实现“邀请函”页掌握面的样式【案例2-3】婚礼邀请函-实现“照片”页面掌握的结构【案例2-3】婚礼邀请函-实现“照片”页面掌握的样式【案例2-3】婚礼邀请函-实现“美好时光”掌握页面的结构【案例2-3】婚礼邀请函-实现“美好时光”掌握页面的样式【案例2-3】婚礼邀请函-实现“宾客信息”掌握页面的结构【案例2-3】婚礼邀请函-实现“宾客信息”掌握页面的样式第3章微信小程序页面交互学习单元微信小程序页面交互课时10课时学习目标1.熟悉Page()函数，能够归纳Page()函数及其各个参数的作用2.掌握数据绑定，能够运用数据绑定实现页面中数据的显示与修改3.掌握事件绑定，能够在组件触发时执行对应的事件处理函数4.熟悉事件对象，能够总结事件对象的属性及其作用5.掌握this关键字的使用，能够运用this关键字访问当前页面中的数据或者函数6.掌握setData()方法的使用，能够完成数据的设置与更改7.掌握条件渲染，能够运用条件渲染根据不同的判断结果显示不同的组件8.掌握<block>标签，能够运用<block>标签同时显示或隐藏多个组件9.熟悉hidden属性，能够区分其与wx:if控制属性的区别10.掌握data-*自定义属性，能够完成data-*自定义数据的设置与获取11.掌握模块的使用，能够完成模块的创建和引入12.掌握列表渲染，能够运用列表渲染将数组中的数据渲染到页面中13.掌握网络请求的实现，能够通过网络请求与服务器进行交互14.掌握提示框的实现，能够在页面中显示消息提示框15.掌握WXS的使用，能够运用WXS处理页面中的数据16.掌握上拉触底的实现，能够运用上拉触底实现数据的动态加载17.掌握下拉刷新的实现，能够运用下拉刷新实现数据的重新加载18.掌握双向数据绑定，能够运用双向绑定实现数据的动态更改学习内容知识点掌握程度重点难点Page()函数熟悉√数据绑定掌握事件绑定掌握√事件对象熟悉this关键字掌握setData()方法掌握√条件渲染掌握√<block>标签掌握hidden属性熟悉【案例3-1】比较数字大小-准备工作掌握【案例3-1】比较数字大小-实现“比较数字大小”微信小程序的页面结构掌握【案例3-1】比较数字大小-获取并保存用户输入的数字掌握【案例3-1】比较数字大小-判断数字大小并显示结果掌握data-*自定义属性掌握模块掌握【案例3-2】计算器-准备工作掌握【案例3-2】计算器-实现“计算器”微信小程序的页面结构掌握【案例3-2】计算器-实现“计算器”微信小程序的页面逻辑掌握【案例3-2】计算器-特殊情况处理掌握√列表渲染掌握√网络请求掌握√提示框掌握WXS 掌握√上拉触底掌握下拉刷新掌握【案例3-3】美食列表-准备工作掌握【案例3-3】美食列表-获取初始数据掌握【案例3-3】美食列表-实现页面渲染掌握【案例3-3】美食列表-处理电话格式掌握【案例3-3】美食列表-实现上拉触底掌握【案例3-3】美食列表-实现下拉刷新掌握双向数据绑定掌握√【案例3-4】调查问卷-准备工作掌握【案例3-4】调查问卷-获取初始数据掌握【案例3-4】调查问卷-实现页面渲染掌握第4章微信小程序常用API（上）学习单元微信小程序常用API（上）课时9课时学习目标1.掌握scroll-view组件，能够运用scroll-view组件完成视图区域的横向滚动或者纵向滚动2.掌握slider组件，能够运用slider组件完成滑动选择器的制作3.掌握<include>标签，能够运用<include>标签引用其他文件中的代码4.掌握背景音频API，能够运用背景音频API实现音频后台播放、音频暂停等功能5.掌握录音API，能够运用录音API实现录音功能6.掌握音频API，能够运用音频API实现音频播放、暂停等功能7.掌握选择媒体API，能够运用wx.chooseMedia()方法选择图片或视频8.掌握图片预览API，能够运用wx.previewImage()方法预览图片9.掌握文件上传API，能够运用wx.uploadFile()方法实现将本地资源上传到服务器中10.掌握文件下载API，能够运用wx.downloadFile()方法实现资源文件的下载11.掌握canvas组件，能够灵活运用canvas组件创建画布12.掌握画布API，能够运用画布API完成图形的绘制学习内容知识点掌握程度重点难点scroll-view组件掌握√slider组件掌握√<include>标签掌握背景音频API 掌握√【案例4-1】音乐播放器-准备工作掌握【案例4-1】音乐播放器-实现“音乐播放器”掌握微信小程序的页面结构【案例4-1】音乐播放器-实现标签页切换掌握【案例4-1】音乐播放器-实现“音乐推荐”标签页掌握【案例4-1】音乐播放器-实现“播放器”标签页掌握【案例4-1】音乐播放器-实现播放器区域掌握【案例4-1】音乐播放器-实现播放进度的控制掌握【案例4-1】音乐播放器-实现“播放列表”标签页掌握录音API 掌握音频API 掌握【案例4-2】录音机-准备工作掌握【案例4-2】录音机-初始化录音功能掌握【案例4-2】录音机-实现“录音机”微信小程序的页面结构掌握【案例4-2】录音机-实现录音功能掌握【案例4-2】录音机-实现播放录音功能掌握√选择媒体API 掌握图片预览API 掌握文件上传API 掌握√文件下载API 掌握√【案例4-3】头像上传下载-准备工作掌握【案例4-3】头像上传下载-实现“头像上传下载”微信小程序的页面结构掌握【案例4-3】头像上传下载-实现“头像上传下载”微信小程序的页面逻辑掌握canvas组件掌握画布API 掌握√【案例4-4】模拟时钟-准备工作掌握【案例4-4】模拟时钟-初始化画布掌握【案例4-4】模拟时钟-绘制表盘掌握【案例4-4】模拟时钟-绘制指针掌握【案例4-4】模拟时钟-实现时钟走动效果掌握√第5章微信小程序常用API（下）学习单元微信小程序常用API（下）课时13课时学习目标1.掌握动画API，能够完成动画的制作2.熟悉登录流程时序，能够归纳微信小程序的登录流程3.掌握登录API，能够运用wx.login()方法实现用户登录4.掌握数据缓存API，能够对数据进行存储、获取和移除等操作5.掌握头像昵称填写功能，能够实现头像选择和昵称填写6.掌握腾讯地图SDK，能够实现腾讯地图SDK的接入和使用7.掌握map组件，能够灵活运用map组件实现地图效果8.掌握地图API，能够实现地图中地理位置的获取等功能9.掌握位置API，能够实现获取当前地理位置的功能10.掌握路由API，能够利用路由API实现页面跳转11.掌握WebSocket API，能够成功创建WebSocket连接12.掌握SocketTask，能够使用SocketTask管理WebSocket连接学习内容知识点掌握程度重点难点动画API 掌握√【案例5-1】罗盘动画-准备工作掌握【案例5-1】罗盘动画-实现“罗盘动画”微信小程序的页面结构掌握【案例5-1】罗盘动画-实现“罗盘动画”微信小程序的页面逻辑掌握登录流程时序熟悉登录API 掌握√数据缓存API 掌握√头像昵称填写掌握App()函数掌握√【案例5-2】用户登录-准备工作掌握【案例5-2】用户登录-实现用户登录掌握【案例5-2】用户登录-检查用户是否已经登录掌握【案例5-2】用户登录-获取用户的积分掌握【案例5-2】用户登录-获取用户头像和昵称掌握腾讯地图SDK 掌握map组件掌握地图API 掌握√位置API 掌握路由API 掌握√【案例5-3】查看附近美食餐厅-准备工作掌握【案例5-3】查看附近美食餐厅-获取初始数据掌握【案例5-3】查看附近美食餐厅-在页面中显示地图掌握【案例5-3】查看附近美食餐厅-实现跳转到优惠券页面掌握【案例5-3】查看附近美食餐厅-实现查找附近美食餐厅功能掌握WebSocket API 掌握√√SocketTask 掌握√√【案例5-4】在线聊天-准备工作掌握【案例5-4】在线聊天-实现WebSocket连接掌握【案例5-4】在线聊天-实现发送消息功能掌握【案例5-4】在线聊天-实现消息列表展示功能掌握第6章综合项目——“点餐”微信小程序学习单元综合项目——“点餐”微信小程序课时20课时学习目标1.掌握封装网络请求的方法，能够通过封装网络请求简化项目中网络请求的代码2.掌握用户登录的开发，能够独立实现用户登录3.掌握商家首页的开发，能够独立完成商家首页的编写4.掌握菜单列表页的开发，能够独立完成菜单列表页的编写5.掌握购物车的开发，能够独立实现购物车6.掌握订单确认页的开发，能够独立完成订单确认页的编写7.掌握订单详情页的开发，能够独立完成订单详情页的编写8.掌握订单列表页的开发，能够独立完成订单列表页的编写9.掌握消费记录页的开发，能够独立完成消费记录页的编写学习内容知识点掌握程度重点难点【任务6-1】项目开发准备-开发背景了解【任务6-1】项目开发准备-项目模块划分熟悉【任务6-1】项目开发准备-项目初始化掌握【任务6-2】封装网络请求-保存接口地址掌握【任务6-2】封装网络请求-封装网络请求函数掌握√【任务6-2】封装网络请求-请求失败时的处理掌握【任务6-2】封装网络请求-请求成功时的处理掌握【任务6-3】用户登录-判断登录状态掌握√【任务6-3】用户登录-执行登录操作掌握√【任务6-3】用户登录-记住登录状态掌握【任务6-4】商家首页-加载商家首页数据掌握【任务6-4】商家首页-实现商家首页的轮播图区域掌握【任务6-4】商家首页-实现商家首页的中间区域掌握【任务6-4】商家首页-实现商家首页的底部区域掌握【任务6-5】菜单列表页-加载菜单列表页数据掌握【任务6-5】菜单列表页-实现折扣信息区域掌握【任务6-5】菜单列表页-实现菜单列表区域掌握【任务6-5】菜单列表页-实现点击左侧菜单项滚动右侧商品列表掌握√【任务6-5】菜单列表页-实现滚动右侧商品掌握√列表激活左侧菜单项【任务6-6】购物车-实现底部购物车区域掌握【任务6-6】购物车-实现添加商品到购物车掌握√【任务6-6】购物车-实现小球动画效果掌握√【任务6-6】购物车-实现满减优惠信息区域掌握【任务6-6】购物车-实现购物车界面区域掌握【任务6-6】购物车-实现增加和减少商品数掌握量【任务6-6】购物车-实现清空购物车掌握【任务6-7】订单确认页-跳转到订单确认页掌握【任务6-7】订单确认页-加载订单确认页数掌握据【任务6-7】订单确认页-实现页面结构和页掌握面样式【任务6-7】订单确认页-实现订单信息区域掌握【任务6-7】订单确认页-实现备注区域掌握【任务6-7】订单确认页-实现支付区域掌握【任务6-8】订单详情页-加载订单详情页数掌握据【任务6-8】订单详情页-实现取餐信息区域掌握【任务6-8】订单详情页-实现订单详情区域掌握【任务6-8】订单详情页-实现订单信息区域掌握【任务6-9】订单列表页-加载订单列表页数掌握据【任务6-9】订单列表页-实现订单列表页的掌握页面结构【任务6-9】订单列表页-实现订单列表页的掌握页面样式【任务6-9】订单列表页-实现下拉刷新掌握√【任务6-9】订单列表页-实现上拉触底掌握√【任务6-9】订单列表页-跳转到订单详情页掌握【任务6-10】消费记录页-加载消费记录页数掌握据【任务6-10】消费记录页-实现消费记录页的掌握页面结构【任务6-10】消费记录页-实现消费记录页的掌握页面样式【任务6-10】消费记录页-获取头像掌握第7章微信小程序开发进阶学习单元微信小程序开发进阶课时9课时学习目标1.掌握自定义组件的创建方法，能够根据实际需要创建自定义组件2.掌握自定义组件的使用方法，能够使用自定义组件3.掌握使用自定义组件渲染标签栏的方法，能够使用自定义组件渲染标签栏4.掌握Vant Weapp组件库的使用方法，能够使用Vant Weapp组件库快速搭建微信小程序的页面5.掌握WeUI组件库的使用方法，能够使用WeUI组件库快速搭建微信小程序的页面6.掌握navigator组件的使用方法，能够利用navigator组件实现页面跳转7.了解uni-app框架的概念，能够说出使用uni-app框架开发项目的优势8.掌握HBuilder X开发工具的设置，能够完成HBuilder X的基本设置和个性化设置9.掌握uni-app项目的创建方法，能够完成uni-app项目的创建10.熟悉uni-app项目的目录结构，能够解释各个文件和文件夹的作用11.掌握uni-app项目运行至微信小程序的方法，能够将uni-app项目运行至微信小程序12.掌握uni-app项目的全局配置文件，能够对导航栏、底部标签栏、页面的文件路径等进行配置学习内容知识点掌握程度重点难点创建自定义组件掌握√使用自定义组件掌握√使用自定义组件渲染标签栏掌握Vant Weapp组件库掌握【案例7-1】自定义标签栏-准备工作掌握【案例7-1】自定义标签栏-项目初始化掌握【案例7-1】自定义标签栏-定义标签栏数据掌握【案例7-1】自定义标签栏-实现页面布局掌握【案例7-1】自定义标签栏-实现页面逻辑掌握WeUI组件库掌握√navigator组件掌握√√【案例7-2】电影列表-准备工作掌握【案例7-2】电影列表-实现标签栏掌握【案例7-2】电影列表-实现“正在热映”标签页掌握【案例7-2】电影列表-实现“搜索”标签页掌握【案例7-2】电影列表-实现“分类”标签页掌握uni-app框架概述了解HBuilder X开发工具掌握创建uni-app项目掌握uni-app项目的目录结构熟悉将uni-app项目运行至微信小程序掌握√uni-app项目的全局配置文件掌握【案例7-3】待办事项-准备工作掌握【案例7-3】待办事项-实现添加待办事项的掌握功能【案例7-3】待办事项-实现列表区域掌握第8章uni-app项目—— “短视频”微信小程序学习单元uni-app项目—— “短视频”微信小程序课时9课时学习目标1.掌握公共头部的开发，能够独立完成公共头部代码的编写2.掌握导航栏的开发，能够独立完成导航栏代码的编写3.掌握轮播图的开发，能够独立完成轮播图代码的编写4.掌握视频列表的开发，能够独立完成视频列表代码的编写5.掌握视频详情页的开发，能够独立完成视频详情页的编写学习内容知识点掌握程度重点难点【任务8-1】项目开发准备-项目展示掌握【任务8-1】项目开发准备-项目初始化掌握√【任务8-2】公共头部区域-实现公共头部区域的页面结构掌握【任务8-2】公共头部区域-实现公共头部区域的页面样式掌握【任务8-2】公共头部区域-在页面中显示公共头部区域掌握【任务8-3】导航栏区域-加载导航栏数据掌握√【任务8-3】导航栏区域-实现导航栏区域的页面结构掌握【任务8-3】导航栏区域-实现导航栏区域的页面样式掌握【任务8-3】导航栏区域-实现导航栏的切换效果掌握【任务8-4】轮播图区域-加载轮播图数据掌握【任务8-4】轮播图区域-实现轮播图区域的页面结构掌握【任务8-4】轮播图区域-实现轮播图区域的页面样式掌握【任务8-5】视频列表区域-加载视频列表数据掌握【任务8-5】视频列表区域-实现视频列表区域的页面结构掌握【任务8-5】视频列表区域-实现视频列表区域的页面样式掌握【任务8-5】视频列表区域-实现跳转到视频详情页掌握√【任务8-6】视频详情页-实现整体页面结构掌握【任务8-6】视频详情页-实现视频详情区域掌握【任务8-6】视频详情页-实现推荐视频区域掌握【任务8-6】视频详情页-实现评论列表区域掌握四、课时分配五、考核模式与成绩评定办法本课程为考试课程，期末考试采用百分制的闭卷考试模式。

小程序使用指南说明书

小程序使用指南一份最最全面的小程序推广手册送给大家，助您成为企业赢家。

1. 发传单地推（传单、海报、易拉宝等）线下扫码是小程序最基础的获客方式之一，用户通过微信扫小程序码即可打开小程序。

商家可以将小程序码与营销活动相结合，比如发传单、印海报、在店面门口展示易拉宝等，以利益吸引用户主动扫码进入小程序。

2. 线下活动推广活动推广是营销的重要方式之一。

商家可以通过举办一些线下活动来推广自己的小程序，比如在商场、商业街等人流量多的地方举办活动，比如在店面举办「用小程序下单送XXX」等让利活动等。

3. 抢占小程序名称我们微信搜索是小程序一个很重要的入口，甚至在张小龙的计划中，搜索会成为微信小程序的主要入口，所以这么重要的“地方”我们不能不抢占啊。

而且小程序的名称具有唯一性，一个好用的名字被别人抢注了就没了。

所以，尽早注册符合自己的行业、用户习惯、产品特性的小程序很有必要。

4. 小程序名称搜索优化微信搜索支持关键词模糊匹配与搜索，所以自定义关键字也会影响到小程序的排名，在设置关键词时，可借鉴百度推广的投放技巧，结合微信指数进行考量，确保关键词符合微信使用场景。

关键词挑选：地域词、品牌词、人群词、产品词、行业词，且与主营业务相关等。

需要注意的是，关键词应尽量选择短词、热词等。

建议根据数据反馈每周进行关键词优化。

5. 附近的小程序入口我们都知道，微信小程序和支付宝小程序都有“附近的小程序”功能，当你的小程序展示在“附近的小程序”的时候，小程序自动展示给 5 公里范围内的所有微信用户。

还有，针对线下连锁门店，小程序支持 10 个地理位置展示，你想想看，10个地理位置，每个半径 5 公里，几乎整个城市都有你的小程序。

6. 卡券入口卡券是微信为线下商家推出的功能之一，在卡券界面中，我们可以点击相应的优惠券、会员卡等进入相应的小程序。

人具有贪小便宜的本性，所以我们在推广小程序的时候，不妨多送一些优惠券，以提高转化率。

7. 关联公众号公众号是最目前常规推广中涨粉最快、最稳定的一种方式。

微信小程序之在线答题（2）

微信⼩程序之在线答题（2）Tips:前端进阶的概念⼀直⽐较模糊，我们往往以掌握知识的多少来划分初级中级和⾼级，但这并不全⾯，谁都不能保证⾃⼰掌握的知识是最全最好的，尤其在前端⼯程师这个职业，每天都是⽇新⽉异。

所以，我认为要分辨⼀个前端⼯程师的境界，除了掌握知识的多寡，还要掌握前端的思想，以及对知识的应⽤程度，评判的标准简单划分初级就是页⾯与页⾯之间的交互，中级是页⾯与数据之间的交互，⾼级就是数据与数据之间的交互，微信⼩程序的设计思想就是基于数据与数据之间的交互，我们操作更多的是数据，⽽⾮document。

下⾯讲解⼀下在线答题的思路，为什么那这个模块来说，因为这是⼀个⽐较简单、典型⽽且⼜实际应⽤的案例。

⾸先，我们通过数据接⼝拿到试卷的试题，渲染到页⾯上之后，就可以答题了，⽽答题的过程，其实是操作从接⼝拿到的数据，这样我们每次操作改变的都是数据⽽⾮页⾯。

然后在通过页⾯调整传参的形式，把做题结果的数据传递到下⼀个⽬标页⾯，进⾏需要的数据操作（筛选，计算，渲染）等。

整个做题的过程，都发⽣在前端，发⽣在接⼝数据上，只有在最后⼀步，保存做题结果的时候才与服务端交互。

这个案例很简单，也很典型，没什么难度，就是想记录⼀下这种思想，为了便于运⾏，我先⽤模拟数据代替接⼝数据，下⾯请看代码：（1）开始答题<view class='exasw-com'><view class="cont-tit"><view class="L a-tit"><label wx:if="{{chckTypeNum==1}}">单项选择</label><label wx:if="{{chckTypeNum==2}}">多项选择</label><label wx:if="{{chckTypeNum==3}}">简答题</label></view><view class='L setTime'><image src='/images/sttime.png' class='sttimg' /><text>{{currentTime}}</text></view><view class="R aswNum"><text>{{currentTab+1}}</text>/{{page}}</view></view><swiper current="{{currentTab}}" duration="300" class='asw-box' bindchange="swiperTab" style='min-height:600px;'><block wx:for="{{subAswData}}" wx:key="{{subAswData.aswId}}"><swiper-item><view class='exam-com'><view class='exam-title'>{{item.aswTitle}}<text> {{item.aswType}}</text></view><block wx:if="{{item.chckType==1}}"><radio-group class="radio-group" bindchange="radioChange" data-idx="{{index}}"><label class="radio change-item" wx:for="{{item.aswItem}}" wx:key="{{item.aswId}}" wx:for-item="item2"><radio value="{{item2.value}}" name="{{}}" checked="{{item2.checked}}"/>{{item2.text}}</label></radio-group></block><block wx:if="{{item.chckType==2}}"><checkbox-group class="checkbox-group" bindchange="checkboxChange" data-idx="{{index}}"><label class="checkbox change-item" wx:for-items="{{item.aswItem}}" wx:key="{{item.aswId}}" wx:for-item="item2" data-index="{{index}}"><checkbox value="{{item2.value}}" name="{{}}" checked="{{item2.checked}}"/>{{item2.text}}</label></checkbox-group></block><block wx:if="{{item.chckType==3}}"><textarea class='aswTarea' maxlength="-1" bindinput="bindTextAreaBlur" auto-height placeholder="填写你的答案" data-idx="{{index}}"/></block></view></swiper-item></block></swiper></view><view class='page-footer'><view class='footer-item1'><image src='/images/zx.png' style='width:21px;height:18px;'/>咨询</view><view class='footer-item1'><image src='/images/sc.png' style='width:21px;height:18px;'/>收藏</view><view class='footer-btn-box'><view class='footer-btn' bindtap="actionSheetTap">答案解析</view><view class='footer-btn on' bindtap="subAswData">提交答卷</view></view></view><action-sheet hidden="{{actionSheetHidden}}" style="z-index: 999; "><block wx:for="{{analysisData}}" wx:key="{{analysisData.aswId}}" wx:for-index="indnum"><view class='exam-com'><view class='exam-bottom'><view class='exam-bootom-txt'>正确答案：<text class='exam-yes'>{{item.trueAsw}}</text></view><view class='exam-bootom-tip' ><text>答案解析：</text><label>{{item.analysisTxt}}</label></view></view></view></block><view class="closeAsw" bindtap="actionSheetTap"><image src='/images/close.png' style='width:30px;height:30px;'/></view></action-sheet>/* pages/examAsw/examAsw.wxss */.L,.R,.fl,.fr{display:inline;}.L ,.fl{float:left;}.R ,.fr{float:right;}.aswNum{text-align: right;}.exasw-com{padding: 10px 20px;}.cont-tit{font-size: 14px;color: #666; padding-bottom: 5px; border-bottom: 1px solid #ccc;clear: both;overflow: hidden;}.cont-tit .a-tit{ width: 40%;}.cont-tit .aswNum{ width: 30%;}.cont-tit .setTime{position: relative; width: 30%; font-weight: bold;color: #666;font-size: 16px; text-align: center;}.cont-tit .sttimg{width: 30px;height: 30px;display: block;}.cont-tit .setTime text{display: block;left: -5px;top: 5px; font-size: 14px;color: #2F99EB; position: absolute;}.asw-box{padding-top: 20px; font-size: 14px;}.exam-com{clear: both;}.exam-title{color: #333;line-height: 25px;}.exam-title text{font-size: 12px;color: #999;}.change-radio,.change-item{display: block;clear: both; padding: 5px 10px }.page-footer{position: fixed;z-index: 99; bottom: 0; height: 50px;line-height: 50px;padding: 10px 0; background-color: #eee;width: 100%;}.footer-item1{width: 25px;float: left;font-size: 12px; line-height: 20px; padding-left: 20px; padding-top: 5px;}.footer-item1 image{display: block;}.footer-btn-box{float: right;width: 240px; background-color: #7ABEF2;height: 50px;color: #fff; border-radius: 15px; margin-right: 15px;overflow: hidden;} .footer-btn-box .footer-btn{float: left;width: 50%; text-align: center;}.footer-btn-box .footer-btn.on{background-color:#2F99EB; }.aswTarea{border: 1px solid #ccc; min-height: 60px;padding: 10px;margin: 10px auto; width: 95%;}.exam-com{clear: both;padding: 20px;position: relative;}.exam-bottom{font-size: 14px;color: #666;}.exam-bottom .exam-bootom-txt{clear: both;padding: 10px 0;}.exam-bootom-txt text{font-weight: bold; padding-right: 20px;}.exam-bootom-txt .exam-yes{color: #00CC00;}.exam-bootom-txt .exam-you{color: #f00;}.exam-bootom-tip{clear: both;}.exam-bootom-tip text{font-weight: bold; font-size: 14px;}.exam-bootom-tip label{padding:10px 0; text-indent: 10px;line-height: 25px;font-size: 12px; display: block;}.closeAsw{position: absolute;z-index: 9991;right: 5px; bottom:5px;width: 30px;height: 30px;}.closeAsw image{display: block;}// pages/examAsw/examAsw.jsPage({/*** 页⾯的初始数据*/data: {currentTab:0,currentTime: "240:00",//分钟startTime: 240,//分钟setInter: '',//存储定时器page:0,chckTypeNum: 1,subAswData:[{aswId:"1",//试题IDchckType: 1,//试题类型（1单选，2多选，3简答题）aswTitle:" 根据现⾏《企业会计准则》，企业在财务报表显著位置⾄少应披露的项⽬有（）",//试题标题aswType:"(2014年《建设⼯程经济》真题)",//试卷名称aswItem:[//试题选项{ name: 'USA', value: 'A',text: 'A、编报企业名称' },{ name: 'CHN', value: 'B',text: 'B、资产负债表⽇或会计报表涵盖'},{ name: 'BRA', value: 'C',text: 'C、⼈民币⾦额单位' },{ name: 'JPN', value: 'D',text: 'D、企业财务负责⼈姓名' },{ name: 'ENG', value: 'E',text: 'E、是否合并会计报表' }trueAsw: "A",//正确答案analysisTxt: "我哦哦我我欧尼",//答案解析answerCenter: ""//答案容器},{aswId: "2",//试题IDchckType: 2,//试题类型（1单选，2多选，3简答题）aswTitle: " 下列不属于通过信息技术在⼯程管理中的开发和应⽤能实现的是（　）",//试题标题aswType: "(2014年《建设⼯程经济》真题)",//试卷名称aswItem: [//试题选项{ name: 'A', value:'A', text: 'A、信息获取便捷' },{ name: 'B', value: 'B',text: 'B、信息流扁平化' },{ name: 'C', value: 'C',text: 'C、BIM' },{ name: 'D', value: 'D',text: 'D、信息透明度提⾼' }],trueAsw: "A,B",//正确答案analysisTxt: "接⼝进⼝量进⼝量将",//答案解析answerCenter:""//答案容器},{aswId: "3",//试题IDchckType: 3,//试题类型（1单选，2多选，3简答题）aswTitle: " 下列不属于通过信息技术在⼯程管理中的开发和应⽤能实现的是，请简答！",//试题标题aswType: "(2014年《建设⼯程经济》真题)",//试卷名称aswItem:[],trueAsw: "",//正确答案analysisTxt: "根据我国现⾏财税制度，可以⽤来偿还贷款的资⾦有：利润，固定资产折旧费，⽆形资产和其他资产摊销费，减免的营业税⾦。

微信小程序开发官方文档二

小程序开发者文档：1. 获取微信小程序的AppID首先，我们需要拥有一个帐号，如果你能看到该文档，我们应当已经邀请并为你创建好一个帐号。

注意不可直接使用服务号或订阅号的AppID。

利用提供的帐号，登录微信公众号后台，就可以在网站的“设置”-“开发者设置”中，查看到微信小程序的AppID 了。

注意：如果我们不是用注册时绑定的管理员微信号，在手机上体验该小程序。

那么我们还需要操作“绑定开发者”。

即在“用户身份”-“开发者”模块，绑定上需要体验该小程序的微信号。

本教程默认注册帐号、体验都是使用管理员微信号。

2. 创建项目我们需要通过开发者工具，来完成小程序创建和代码编辑。

开发者工具安装完成后，打开并使用微信扫码登录。

选择创建“项目”，填入上文获取到的AppID，设置一个本地项目的名称（非小程序名称），比如“我的第一个项目”，并选择一个本地的文件夹作为代码存储的目录，点击“新建项目”就可以了。

为方便初学者了解微信小程序的基本代码结构，在创建过程中，如果选择的本地文件夹是个空文件夹，开发者工具会提示，是否需要创建一个quick start项目。

选择“是”，开发者工具会帮助我们在开发目录里生成一个简单的demo。

项目创建成功后，我们就可以点击该项目，进入并看到完整的开发者工具界面，点击左侧导航，在“编辑”里可以查看和编辑我们的代码，在“调试”里可以测试代码并模拟小程序在微信客户端效果，在“项目”里可以发送到手机里预览实际效果。

3. 编写代码创建小程序实例点击开发者工具左侧导航的“编辑”，我们可以看到这个项目，已经初始化并包含了一些简单的代码文件。

最关键也是必不可少的，是app.js、app.json、app.wxss这三个。

其中，.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件。

微信小程序会读取这些文件，并生成小程序实例。

下面我们简单了解这三个文件的功能，方便修改以及从头开发自己的微信小程序。

微信应用号(小程序)设计规范

微信应用号(小程序)设计规范概要微信小程序设计的基本原则是微信设计中心针对在微信内上线的小程序页面总结的设计指南及建议。

以下设计原则都是基于对用户的尊重的基础上的，旨在微信生态内建立友好、高效、一致的用户体验的同时，最大程度顺应和支持各业务需求设计，实现用户与程序的共赢。

一、友好礼貌为了避免用户在微信中使用小程序服务时，注意力被周围复杂环境干扰，小程序在设计时应该注意减少无关的设计元素对用户目标的干扰，礼貌地向用户展示程序侧提供的服务，友好地引导用户进行操作。

1. 重点突出每个页面都应有明确的重点，以便于用户每进入一个新页面的时候都能快速地理解页面内容，在确定了重点的前提下，应尽量避免页面上出现其他干扰项影响用户的决策和操作。

反例示意此页面的主题是查询，却添加了诸多与查询不相关的业务入口，与用户的预期不符，易造成用户的迷失。

纠正示意去掉任何与用户目标不相关的内容，明确页面主题，在技术和页面控件允许的前提下提供有助于用户目标的帮助内容，比如最近搜索词，常用搜索词等。

反例示意操作没有主次，让用户无从选择纠正示意首先要避免并列过多操作让用户选额，在不得不并列多个操作时，需区分操作主次，减轻用户的选择难度。

2. 流程明确为了让用户顺畅地使用页面，在用户进行某一个操作流程时，应避免出现用户目标流程之外的内容而打断用户。

反例示意用户本打算进行搜索，在进入页面时却被突如其来的抽奖弹窗所打断；对于抽奖没有兴趣的用户是非常不友好的干扰，平添一份对开发团队的恼怒；而即便有部分用户确实被“诱人”的抽奖活动所吸引，离开主流程去抽奖之后可能就遗忘了原本的目标，进而失去了对产品真正价值的利用和认识。

二、清晰明确作为一个负责任的开发者，一旦用户进入我们的小程序页面，就有责任和义务清晰明确地告知用户身在何处、又可以往何处去，确保用户在页面中游刃有余地穿梭而不迷路，这样才能为用户提供安全的愉悦的使用体验。

1. 导航明确，来去自如导航是确保用户在网页中浏览跳转时不迷路的最关键因素。

微信小程序开发（二）图片上传+服务端接收详解

微信⼩程序开发（⼆）图⽚上传+服务端接收详解这次介绍下⼩程序当中常⽤的图⽚上传。

前⼏天做了图⽚上传功能，被坑了⼀下。

接下来我们来看⼀下微信的上传api。

这⾥的filePath就是图⽚的存储路径，类型居然是个String，也就是只能每次传⼀张图⽚，我以前的接⼝都是接收⼀个array，我本⼈⼜是⼀个半吊⼦的PHP，只能⾃⼰去改接收图⽚的接⼝。

看⼀下页⾯效果图⼀个很常见的修改头像效果，选择图⽚（拍照），然后上传。

下⾯就是贴代码了⾸先是⼩程序的wxml代码<view class="xd-container"><form bindsubmit="bindSaveTap"><image class="xd-img-user1" catchtap="chooseImageTap" src="{{logo}}"></image><view class="xd-view-section"><text class="xd-abs xd-flex-left xd-text-nick">昵称</text><input name="nick_name" placeholder="请输⼊昵称" class="xd-input" value="{{er_name}}"/></view><view class="xd-view-section1"><text class="xd-abs xd-flex-left xd-text-nick">宝宝性别</text><radio-group class="xd-abs xd-radio-group" name="baby_sex"><label class="xd-label-radio" wx:for="{{sex_items}}" wx:key="item"><radio color="#3cc975" value="{{}}" wx:if="{{==userInfo.baby_sex}}" checked="true"/><radio color="#3cc975" value="{{}}" wx:else checked="false"/><text class="xd-radio-text">{{item.value}}</text></label></radio-group></view><view class="xd-view-section1"><text class="xd-abs xd-flex-left xd-text-nick">宝宝年龄</text><input placeholder="请输⼊年龄" wx:if="{{userInfo.baby_age != 0}}" value="{{userInfo.baby_age}}" class="xd-input"/> <input name="baby_age" placeholder="请输⼊年龄" wx:else value="" class="xd-input"/></view><button size="default" class="xd-abs xd-subBtn" formType="submit" hover-class="xd-subBtn-hover">保存</button> </form></view>css代码我就不贴了，⼀些样式⽽已。

课程设计微信小程序

课程设计微信小程序一、课程目标知识目标：1. 学生能理解微信小程序的基本概念、功能特点及其在生活中的应用。

2. 学生能掌握微信小程序的开发流程，了解前端和后端的基本技术。

3. 学生能运用所学的编程知识，设计并实现一个简单的微信小程序。

技能目标：1. 学生具备使用微信开发者工具进行小程序开发的能力。

2. 学生能够运用编程语言（如JavaScript、WXML、WXSS等）进行小程序的前端设计。

3. 学生能够使用微信小程序API进行数据交互，实现前后端的数据连接。

情感态度价值观目标：1. 学生培养对编程的兴趣，增强对信息技术的热爱和求知欲。

2. 学生通过小组合作，培养团队协作精神和沟通能力。

3. 学生认识到科技对社会发展的作用，激发创新精神，提高社会责任感。

课程性质：本课程为信息技术学科，结合当前热门的微信小程序，旨在培养学生的编程兴趣，提高实践能力。

学生特点：六年级学生具备一定的计算机操作能力，对新事物充满好奇，喜欢挑战性任务。

教学要求：课程要求学生在掌握基础知识的同时，注重实践操作，通过小组合作完成一个小程序的设计与实现。

教学过程中，教师需关注学生的个体差异，提供有针对性的指导。

二、教学内容1. 微信小程序概述- 了解微信小程序的发展历程、应用场景和优势特点。

- 学习微信小程序的架构和开发环境。

2. 微信小程序开发基础- 掌握WXML、WXSS、JavaScript等编程语言的基本语法和应用。

- 学习小程序的组件、API的使用方法。

3. 微信小程序开发流程- 了解小程序的注册、配置和发布流程。

- 学习使用微信开发者工具进行小程序的调试、预览和发布。

4. 小程序项目实践- 分析项目需求，进行功能设计。

- 分组合作，进行前端和后端开发。

- 完成小程序的测试、优化和发布。

5. 教学内容的安排和进度- 微信小程序概述（1课时）- 微信小程序开发基础（4课时）- 微信小程序开发流程（2课时）- 小程序项目实践（5课时）教材章节关联：本教学内容与教材中“第三章网页设计与制作”和“第四章程序设计基础”相关，通过学习，学生可以掌握微信小程序的基本知识和开发技能。

微信小程序开发实战教程第2章基本页面和底部导航

添加编译模式
2.1.2 设置启动页面
13
如图所示，在“启动页面”下拉列表中选择某个页面，这里选择 “pages/p2/p2”页面
选择启动页面
2.1.2 设置启动页面
如图所示，单击“确定”按钮，完成设置。
自行观察运行结果，这里为p2页面的内容，再检查一下app.json文件的内容，发现项目的启动页面仍然为p1。
2.2.2 设计底部导航
21
保存文件，底部导航运行结果如图所示。注意，可观察到底部有2个标签，选中“页面1”标签页，将显示“p1”对应的内容，选中“页面2”标签页，将显示“p2”对应的内容，并可观察到图标的变化。
底部导航运行结果
2.2.2 设计底部导航
22
下面介绍微信开发者工具中集成开发环境（Integrated Development Environment，IDE）的部分功能，如图所示。自行单击“模拟器”“编辑器”“调试器”按钮可打开或关闭对应窗口。
新建Page
2.1 基本页面
5
如图所示，在“p1”文件夹下将自动生成4个文件，分别为 “p1.js”“p1.json”“p1.wxml”“p1 .wxss”。
一个页面的4个文件
2.1.1 创建页面
6
如图所示，在目录树中选中 “p1.wxml”文件，查看其内容，可以看到文件内容为text 标签中包含的一段纯文本 “pages/p1/p1.wxml”，这段纯文本默认是文件的路径。
微信小程序开发实战教程（PHP+Laravel+MySQL）
第2章基本页面和底部导航
学习目标
1 熟练掌握创建新页面的方法 2 熟练编写底部导航代码。 3 理解底部导航各属性的含义。 4 进一步熟悉微信开发者工具界面。

2024版(完整版)微信小程序详细介绍ppt模板

鼓励用户将小程序分享至微信好友或朋友圈，扩大品牌曝光度。
微信公众号关联推广
通过微信公众号与小程序关联，实现内容互通、粉丝共享，提高小程序曝光率。
微信广告投放
利用微信广告平台进行小程序广告投放，精准触达目标用户群体。
17
数据分析与优化调整方法
2024/1/29
数据监控与统计
建立数据监控机制，定期统计小程序访问量、用户留存率、转化率等关键指标。
创建小程序项目
使用开发者工具创建新的小程序项目，填写相关信息如小程序名称、AppID 等。
8
编程语言及框架介绍
编程语言
微信小程序主要使用JavaScript 作为编程语言，用于实现小程序
的逻辑和交互功能。
框架介绍
微信小程序采用MINA框架，包括视图层（WXML和WXSS）和逻辑层（JavaScript），通过数据绑定和事件处理实现界面与逻
20
创新应用场景探讨
智能家居控制
通过微信小程序，实现远程控制智能家居设备，
提高生活便利性。
2024/1/29
健康管理
结合智能穿戴设备，通过小程序实时监测用户健康状况，提供个性化
健康建议。
社交互动
基于微信小程序的社交功能，开发具有特色的社交应用，满足用户社
交需求。
21
企业内部管理
针对企业内部管理需求，开发相应的小程序，提高管理效率和员工协作
跨界合作与创新
未来，微信小程序将积极寻求与其他领域的跨界合作，探索更多创新应用场景，为用户带来更多便利和惊喜。
22
06
微信小程序开发技巧与注意事项
2024/1/29
23
提高用户体验的设计原则

微信小程序——引入WeUI组件库（二）

微信⼩程序——引⼊WeUI组件库（⼆）
摘要
上⼀篇写的是如何⽤npm构建的⽅式引⼊WeUI组件库，这次说的是⽤来引⼊WeUI组件库。

推荐理由：这种⽅式是微信⼩程序推荐的引⼊⽅式，这样引⼊的组件将不会计⼊代码包⼤⼩
可以看到微信⼩程序开发增加了引⽤扩展库的功能，使⽤扩展库的优点就是不占⽤⼩程序的包体积。

虽然微信⼩程序开发提供给我们的代码包在不断的提升，但对于开发⼈员来说，能省则省，毕竟还不是⽆限的，再过⼀段时间说不定就是按量付费了。

如何使⽤userExtendedLib扩展库功能？
1、⾸先需要在app.json配置⽂件中添加
// ⽬前仅⽀持kbone和weui扩展库
{
"useExtendedLib": {
"kbone": true,
"weui": true
}
}
2、配置好之后，就可以在页⾯的json配置⽂件中引⽤
{
"usingComponents": {
"mp-badge": "weui-miniprogram/badge/badge",
"mp-dialog": "weui-miniprogram/dialog/dialog"
}
}
使⽤扩展库引⽤weui不能和构建npm使⽤weui同时使⽤，如果同时使⽤会报错
miniprogram_npm ⽬录下的 weui-miniprogram 包与扩展库 weui 发⽣冲突，请移除 weui-miniprogram 包或者删除
`useExtendedLib.weui` 配置。