微信小程序
微信小程序详细介绍ppt课件
音频与视频播放
使用微信小程序的音频和视频组 件，如`audio`和`video`，实现 音频和视频的播放、暂停、快进
等控制。
动画效果
借助微信小程序的动画API，如 `wx.createAnimation`，为页面 元素添加丰富的动画效果，提升
用户体验。
04
微信小程序运营推广 策略
用户获取途径及留存方法
确保数据传输的安全性，微信小程 序强制要求使用HTTPS协议进行网 络通信。
数据格式处理
对传输的数据进行格式化处理，如 JSON格式，以确保数据的准确性和 可读性。
多媒体内容展示技巧
图片展示
利用微信小程序的图片组件和 API，如`image`组件和
`wx.getImageInfo`，实现图片 的加载、预览和缩放序安全与性 能保障措施
数据加密传输和存储安全策略
数据传输加密
01
采用HTTPS协议对传输的数据进行加密，确保数据在传输过程
中的安全性。
数据存储加密
02
对敏感数据进行加密存储，如用户密码、支付密码等，防止数
据泄露。
访问控制
03
严格控制数据的访问权限，确保只有授权的用户或系统才能访
类似于HTML的标记语言，用于 描述页面结构
WXSS
类似于CSS的样式语言，用于描 述页面样式
编程语言及框架选择
• JavaScript：用于处理页面逻辑和交互
编程语言及框架选择
01
02
03
原生开发
直接使用微信提供的API 进行开发，适合简单的小 程序
WePY
一个类Vue.js的开发框架 ，提供了更优雅的编程体 验和更高的开发效率
内容更新与活动策划建议
介绍小程序的使用流程
介绍小程序的使用流程小程序简介小程序是一种可以在微信中使用的应用程序，具有轻量、便捷、易扩展等特点。
用户无需下载安装，即可在微信中直接使用小程序，提供了更加灵活多样的功能和服务。
使用小程序的流程使用小程序主要包括以下几个步骤：1.在微信中打开小程序：–打开微信，进入聊天界面；–在输入框中输入小程序的名称或关键词，进行搜索；–在搜索结果中找到对应的小程序，并点击进入。
2.进入小程序主界面：–进入小程序后，会显示小程序的主界面；–主界面通常包括顶部导航栏、底部导航栏和中间的内容区域。
3.浏览小程序内容：–在小程序的主界面，可以浏览小程序提供的各种内容和功能；–可以通过滑动、点击等方式来浏览具体的内容。
4.进行操作和交互：–根据小程序提供的功能，进行相应的操作和交互；–例如，填写表单、浏览商品、下单购买等。
5.退出小程序：–退出小程序可以通过以下方式实现：•点击顶部导航栏的返回按钮，返回到上一个界面；•在底部导航栏中选择其他功能，切换到其他界面。
6.关注小程序：–如果对小程序感兴趣，可以选择关注该小程序，以便获取最新的更新和信息。
使用小程序的注意事项在使用小程序的过程中，需要注意以下几点：1.遵守小程序的规则：–对于不同的小程序，可能有不同的规则和要求；–用户在使用小程序时，需要遵守相应的规则和用户协议。
2.保护个人信息：–在使用小程序时，要注意个人信息的保护；–不要随意填写个人敏感信息，避免个人信息泄露。
3.注意小程序的权限申请：–在使用小程序时，可能会申请一些权限，如获取手机通讯录、定位等；–用户需要根据自己的需求和信任度，决定是否授权给小程序相应的权限。
4.注意小程序的安全性：–使用小程序时，要确保手机系统及微信版本是最新的，以获得最新的安全更新；–不要下载和使用不明来源或不具备信任度的小程序。
5.及时更新小程序：–在小程序更新后，可能会有新的功能和修复的问题；–用户应及时更新小程序，以获得更好的体验和安全性。
微信小程序基础ppt课件
色彩搭配与字体选择建议
色彩搭配
色彩搭配应和谐、自然，避免过于刺 眼或混乱的颜色组合。
字体选择
字体选择应清晰易读，避免使用过于 花哨或难以阅读的字体。同时，应根 据内容选择合适的字体大小和样式， 以增强可读性和易用性。
05
微信小程序功能实现 方法与技巧
页面跳转逻辑实现方法介绍
页面路径规划
页面参数传递
基础内容包括文本、图片、图标 等，用于展示基本信息
导航包括navigator和tabBar，用 于页面跳转和底部导航栏
小程序页面由多个组件组成，包 括视图容器、基础内容、导航、 表单、底部tab等
表单包括button、form、input 等，用于收集用户输入和提交数 据
小程序数据绑定与事件处理机制
数据读取方式
使用wx.getStorage、wx.getStorageSync等方法读取存储的数据 。
数据同步问题
注意数据同步问题，确保在多设备或不同环境下数据01
了解微信小程序自定义组件开发流程，包括注册、使用、样式
、事件等。
自定义组件使用场景
02
一致性
设计风格和元素应保持一 致，避免给用户带来混乱 和困惑。
用户体验
设计应注重用户体验，提 供良好的交互和反馈，使 用户能够轻松完成任务。
界面布局与排版技巧分享
布局合理
界面布局应合理，使用户 能够快速找到所需信息。
排版清晰
文字、图片等元素应排版 清晰，避免拥挤和重叠。
图标与文字
图标与文字应清晰易懂， 避免使用过于复杂或难以 理解的图标。
跨平台使用：微信小程序可以在微信平台上使用，也可 以在其他平台上使用。
特点
占用存储空间小：无需下载可快速使用，减少用户手机 存储空间的占用。
什么是微信小程序
什么是微信小程序？微信小程序是什么意思？微信小程序（wei xin xiao cheng xu），简称小程序，缩写XCX，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。
微信小程序特点：这小程序与APP非常不同，因为小程序无需下载安装、无需卸载、用完即走，那么意味着也不占手机内存，对于手机没内存的人来说，可谓是一大福音啊！此外，也不会推送信息骚扰你，只能用户触发！不同的小程序，能帮你实现不同的功能。
例如，买电影票、餐厅排号、餐馆点菜、查询公交、查询股票信息、查询天气、收听电台、预定酒店、共享单车、打车、查汇率、查单词、买机票、网购……当然，作为微信的新产品，小程序只能在微信里使用。
对于微信小程全面开放申请后，主体类型为企业、政府、媒体、其他组织或个人的开发者，均可申请注册小程序。
小程序、订阅号、服务号、企业号是并行的体系。
微信小程序的到来为我们带来了什么好处？一、少了安装App 的麻烦在app 时代，如果我们要使用一项功能，通常需要完成以下步骤:1. 在App Store 或Android 应用市场，寻找能实现相应功能的应用;2. 下载并安装该应用;3. 在手机桌面，找到应用;4. 打开并使用应用。
而在小程序时代，只需要搜索或者「扫一扫」，即可打开应用。
没有了下载安装环节，人和功能的连接变得更加简单直接。
二、释放手机内存除了使用更加便捷之外，小程序的「小体积」，也能为大家的手机大大减轻负担。
相信大家手机里都装了不少app。
一般情况下，安装一个app，得花上几十MB、上百MB，甚至几GB 的内存。
手机容量小的人，一旦多装了几个app，就要面临内存不够的困扰。
在这种情况下，大小不超过1 M 的小程序，就成了手机内存不够用的救星。
而且，小程序还不需要安装，那些平时大部分时间用不上，又不得不装的app，一旦变身小程序，就可以彻底地从你的手机中移除了。
微信小程序PPT课件
使用ES6语法可以让代码更简洁、易读和易于维护，同时提高 开发效率和代码质量。例如，使用箭头函数可以简化回调函 数，使用Promise可以优化异步操作等。
04
微信小程序核心组件与API详解
视图容器类组件（View、Scroll-View等）
01
02
03
View
最基础的容器组件，类似 于HTML中的div元素，用 于布局和展示内容。
响应式布局与移动端适配方法
响应式布局
一种设计和开发应对不同屏幕尺 寸的方法，通过媒体查询、流式 布局和弹性图片等技术实现。
移动端适配方法
包括视口设置、百分比布局、 rem/vw/vh单位、flex布局和 grid布局等技术和方法。
ES6新特性及其在小程序中应用
ES6新特性
包括let/const声明、箭头函数、模块化、解构赋值、扩展运 算符、Promise等。
06
实战案例：从零开始开发一个微信 小程序
需求分析和功能规划
01
02
03
04
确定目标用户群体和使用场景
梳理核心功能和附加功能
设计用户体验流程和交互逻辑
制定开发计划和时间表
界面设计和原型制作
选择适合的设计风格和色彩搭配 制作高保真原型，呈现最终效果
设计各个页面的布局和元素 与开发团队沟通和确认设计细节
03
在开发者工具中，选择 “本地设置”，配置代 理、端口号、网络等相 关参数。
04
确保电脑已安装Node.js 环境，以便后续进行小 程序的开发和调试。
使用官方开发工具进行开发
选择项目目录、填写项目 名称和AppID，点击确定
后开始创建项目。
利用开发者工具的模拟器 功能，预览和调试小程序
微信小程序申请流程
微信小程序申请流程微信小程序是一种轻量级应用，用户无需下载安装即可使用，具有快速打开、用完即走的特点，因此备受用户青睐。
对于开发者来说，申请成为微信小程序的开发者，可以让他们在微信生态系统中开发应用，实现自己的商业价值。
下面将详细介绍微信小程序的申请流程。
首先，开发者需要在微信公众平台上注册账号。
如果已经有微信公众号的开发者，可以直接使用该账号登录；如果没有，需要先注册一个微信公众号的开发者账号。
注册账号时，需要填写相关的个人信息和企业信息，并进行身份验证。
其次，开发者需要登录微信公众平台，在“设置”中选择“开发者中心”，然后点击“成为开发者”按钮。
接着，需要阅读并同意《微信小程序开发协议》，并填写开发者信息，包括开发者类型、开发者名称、联系人信息等。
接下来，开发者需要进行实名认证。
实名认证是为了保障小程序的安全和用户权益，需要提供相关的个人或者企业证件信息。
个人开发者需要提供身份证信息，企业开发者需要提供营业执照等相关证件信息。
完成实名认证后，开发者就可以开始创建自己的小程序了。
在创建小程序之前，开发者需要先了解一些相关的规范和要求，包括小程序命名规范、小程序代码规范、小程序服务类目等。
了解清楚这些规范和要求后，开发者可以开始创建小程序，包括填写小程序基本信息、设置小程序服务器域名、上传小程序代码等。
最后，开发者需要提交小程序审核。
在提交审核前，需要对小程序进行全面的测试，确保小程序的功能完善、用户体验良好。
审核通过后，开发者就可以在微信中发布自己的小程序了。
总的来说，申请成为微信小程序的开发者并不复杂，只需要按照规定的流程和要求进行操作即可。
希望开发者们可以根据以上流程顺利申请成为微信小程序的开发者，开发出更多优质的小程序，为用户带来更好的体验。
微信小程序开发基础及实战
微信小程序开发基础及实战随着互联网的发展，人们的生活离不开移动设备，而移动应用也越来越受到人们的欢迎。
微信小程序作为一种轻量级应用，无需下载和安装，通过微信扫一扫即可打开，因此成为了越来越多企业和个人选择的应用开发方式。
本文将从微信小程序的基础知识开始，介绍如何开发微信小程序，以及实战案例分析。
一、微信小程序基础知识1.1 微信小程序的概念与特点微信小程序，是一种应用开发平台，是基于微信公众号开发的一种轻量级应用，具有轻便，无需下载和安装，无缝衔接微信社交生态等特点。
微信小程序可以直接在微信中使用，无需下载安装，用户只需要扫描二维码或者搜索即可使用，微信小程序的目前常见分类有8种，应用的覆盖面最有限为硬件控制小程序，最广为地铁购票、城市服务等。
在微信中，微信小程序的使用场景包括企业办公、教育学习、公共服务、生活服务等等，可以说微信小程序的潜力还有待挖掘。
1.2 微信小程序的优势微信小程序开发的优势在于以下几点:1）无需下载和安装，方便快捷。
2）适用于多种场景，例如商业、教育、生活服务、公共服务等。
3）应用功能丰富，包括图文、音视频、地图等多种媒体类型，具有较好的应用体验。
4）不需要消耗手机存储空间，企业可以通过微信公众号的方式推广自己的小程序。
5）高效的开发成本，企业在小程序开发上可以减少大量的开发成本和时间，不需要针对多个不同系统进行开发。
二、微信小程序的开发流程在微信小程序中创建一个小程序的整体开发流程包括开发工具的安装，代码编写、测试调试、部署发布等多个步骤，由一个整体的流程组成。
具体流程如下：2.1 安装开发工具在微信小程序项目中，开发者需要安装微信小程序开发工具，该工具提供了小程序的创建、编译、调试、发布功能，操作简单快捷。
下载后，打开开发工具并登录到微信的开发者中心。
2.2 创建小程序开发者通过工具创建项目并添加相应的信息，如小程序的名称，logo，作者等等，创建成功后便可以看到小程序的具体设置信息。
微信小程序登录流程
微信小程序登录流程微信小程序作为一种轻量级的应用形式，受到了越来越多用户的喜爱。
在使用微信小程序的过程中，登录是一个基本且必不可少的功能。
下面，我们将介绍微信小程序的登录流程，帮助您更好地理解和使用微信小程序。
1. 打开微信小程序。
首先，用户需要在微信中打开所需的小程序。
在微信的底部菜单中，点击“发现”，然后选择“小程序”即可进入小程序页面。
在小程序页面中，用户可以搜索或者浏览推荐的小程序，找到需要登录的小程序并点击进入。
2. 选择登录方式。
进入小程序后，用户会看到登录的入口。
通常情况下，小程序会提供多种登录方式，比如手机号登录、微信账号登录、QQ账号登录等。
用户可以根据自己的需求和习惯，选择合适的登录方式进行登录。
3. 输入登录信息。
根据所选择的登录方式，用户需要输入相应的登录信息。
如果选择手机号登录，用户需要输入自己的手机号码并且接收验证码进行验证；如果选择微信账号登录，则需要确认微信账号信息并授权登录；如果选择其他方式登录，则需要按照相应的流程进行操作。
4. 验证身份。
在输入登录信息后，小程序会对用户的身份进行验证。
这是为了确保用户输入的信息是准确且真实的，从而保障用户的账号安全。
验证身份的方式通常是发送验证码、微信授权登录、手机短信验证等。
5. 登录成功。
经过验证身份后，如果用户输入的信息无误，小程序会提示登录成功，并且跳转到相应的页面。
在登录成功后，用户可以进行个性化的操作，比如查看个人信息、进行交互、进行购物等。
6. 退出登录。
在使用小程序的过程中，用户也可以选择退出登录。
退出登录可以有效地保护用户的隐私和账号安全。
通常情况下，小程序会在个人中心或者设置页面提供退出登录的入口，用户可以点击退出登录并进行确认操作。
通过以上的介绍，相信大家对微信小程序的登录流程有了更清晰的认识。
登录作为用户与小程序交互的第一步，对于用户体验和账号安全至关重要。
希望大家在使用微信小程序的过程中，能够更加便捷、安全地进行登录操作，享受小程序带来的便利和乐趣。
微信小程序上线流程
微信小程序上线流程微信小程序是一种轻量级的应用程序，用户可以在不下载安装的情况下直接使用。
对于企业或个人来说，开发一个微信小程序可以提升品牌曝光度，增加用户粘性，提供更便捷的服务。
那么，接下来我们将介绍微信小程序上线的具体流程。
第一步，注册小程序账号。
首先，你需要拥有一个微信公众号的主体资格，然后在微信公众平台上注册小程序账号。
在注册过程中，你需要提供相关的企业或个人信息，包括营业执照、身份证等。
注册完成后，你将获得一个AppID，这是小程序的唯一标识。
第二步，开发小程序。
在注册小程序账号后，你需要进行小程序的开发工作。
你可以选择自主开发，也可以委托第三方开发公司进行开发。
在开发过程中，你需要按照微信小程序的开发规范进行开发，包括页面布局、交互逻辑、数据请求等。
同时，你还需要进行小程序的测试工作，确保小程序的稳定性和用户体验。
第三步，提交审核。
当小程序开发完成后，你需要将小程序提交到微信公众平台进行审核。
在提交审核前，你需要确保小程序的内容符合相关法律法规，不包含违法违规内容。
审核通过后，你可以进行小程序的发布工作。
第四步，发布上线。
在审核通过后，你可以选择发布小程序到线上环境。
在发布过程中，你需要填写小程序的基本信息，包括小程序名称、图标、简介等。
同时，你还需要设置小程序的类目和服务范围。
发布完成后，你的小程序将在微信平台上线，用户可以通过搜索或扫描二维码进行访问和使用。
第五步，运营推广。
小程序上线后，并不意味着工作的结束，相反，这才是工作的开始。
你需要进行小程序的运营推广工作，包括推送活动、引流转化、数据分析等。
通过不断的优化和改进，提升小程序的用户体验和活跃度，实现小程序的商业化价值。
总结。
微信小程序的上线流程包括注册账号、开发小程序、提交审核、发布上线和运营推广等步骤。
每一步都需要认真对待，确保小程序的质量和用户体验。
希望以上内容对你有所帮助，祝你的小程序上线顺利，取得成功！。
微信小程序的功能和应用分析
微信小程序的功能和应用分析微信小程序是在微信社交平台上推出的一种轻量级应用。
相较于传统的手机应用，微信小程序不需要下载，即可直接在微信中使用。
微信小程序的优点是用户无需下载，装载速度快，节省流量和空间。
因此，微信小程序在移动互联网应用领域有着广泛的应用。
一、微信小程序的基本功能1.1 互联网的基本功能微信小程序和传统的互联网应用一样，具有浏览器、搜索引擎及网站相似的基本功能。
用户可以在微信小程序中搜索网站、访问网页、下载文件等。
1.2 社交媒体功能微信小程序基于微信社交平台，拥有微信的社交媒体功能。
用户可以在微信小程序中和好友聊天，分享动态，发送语音、视频、图片、文本等信息。
1.3 地理位置功能微信小程序可以定位用户的当前位置，依据地理位置为用户提供不同的服务。
例如附近的商家、旅游景点、医院等。
1.4 电商功能微信小程序可以显示和销售产品，进行在线支付，消费者可以通过微信小程序获得物流信息。
二、微信小程序的应用场景2.1 电商微信小程序在电商领域的应用日益广泛，用户可以在微信小程序中购买商品。
诸如淘宝、京东、拼多多、美团等电商平台都在微信小程序中开设了店铺。
2.2 金融服务微信小程序还可以应用于金融服务。
这些金融服务包括门户网站、证券券商、贷款平台、在线支付接口等。
2.3 医疗服务微信小程序在医疗领域的应用也一直在加强。
通过微信小程序，用户可以向医生咨询，并得到准确的诊断和治疗方案。
2.4 旅游微信小程序在旅游行业上也有很大潜力。
景区、民宿、旅游平台都可以通过微信小程序进行线上预订，提高用户的旅游体验。
三、微信小程序的优势3.1 无需下载微信小程序无需下载，不占用手机内存，能够快速访问。
3.2 操作简单微信小程序采用微信的操作界面，对用户十分友好。
新用户也能快速上手。
3.3 体积小微信小程序的体积比较小，仅有几十KB，可以快速加载。
3.4 节约流量微信小程序只需要访问网页的部分数据，因此，相较于下载APP，微信小程序会大幅降低消耗的流量。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。 一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：
app.js
• 必需 • 小程序逻辑
app.json
• 必需 • 小程序公共设置
app.wxss
• 非必需 • 小程序公共样式
BREAD PPT DESIGN
组件
• scroll-view
• scroll-x(y)：横向（纵向）滚动 • scroll-top(left) ：设置竖向（横向）滚动条位置 • scroll-into-view：值应为某子元素id，则滚动到该元素，元素顶部对齐 滚动区域顶部
• bindscrolltoupper：滚动到顶部/左边，会触发 scrolltoupper 事件
• form
• input • picker
• slider
• textarea
BREAD PPT DESIGN
组件
• 导航 • navigator • 基础内容 • icon • text • progress • 媒体
• audio
• image • video
• 其他（画布SIGN
BREAD PPT DESIGN
window
• 用于设置小程序的状态栏、导航条、标题、窗口背景色 • navigationBarBackgroundColor：导航栏背景颜色 （十六进制） • navigationBarTextStyle：导航标题颜色（仅支持black/white） • navigationBarTitleText：导航标题 • backgroundColor：窗口背景色（十六进制） • backgroundTextStyle：下拉背景字体、loading 图的样式，仅支持 dark/light • enablePullDownRefresh：是否开启下拉刷新
• 其他：开发者可以添加任意的函数或数据到 Object 参数中，用 this 可
以访问
BREAD PPT DESIGN
Page
• Page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始
数据、生命周期函数、事件处理函数等。 • data：页面的初始数据 • onLoad：页面加载
BREAD PPT DESIGN
Page setData()
• setData函数用于将数据从逻辑层发送到视图层，同时改变对应
的 this.data 的值。
BREAD PPT DESIGN
WXML
• WXML（WeiXin Markup Language）是框架设计的一套标签语言，用于描
述页面的结构。 • 基本绑定
• bindscrolltolower：滚动到底部/右边，会触发 scrolltolower 事件 • bindscroll：滚动时触发
BREAD PPT DESIGN
组件
• button属性
• size：有效值 default, mini • type：按钮的样式类型，有效值 primary, default, warn
• 组件上支持使用 style、class 属性来控制组件的样式。
• 选择器 • .class • #id • element
• element,element
• ::after：组件后面 • ::before：组件前面
BREAD PPT DESIGN
组件
• 一个组件通常包括开始标签和结束标签，属性用来修饰这个组件
• 非必需 • 页面窗口表现
tabBar
• 非必需 • 设置tab
networkTimeout
• 非必需
• 设置各种网络请求的超 时时间
debug
• 非必需
• 可以在开发者工具中 开启 debug 模式
BREAD PPT DESIGN
pages
• 数组形式，每一项对应一个页面【路径+文件名】。 • 不需要后缀名。
• onReady：监听页面初次渲染完成
• onShow ：监听页面显示 • onHide ：监听页面隐藏 • onUnload：监听页面卸载 • onPullDownRefresh：监听用户下拉动作 • onReachBottom：页面上拉触底事件的处理函数 • onShareAppMessage ：用户点击右上角分享
BREAD PPT DESIGN
tabBar
• position ：可选值 bottom（默认）、top
BREAD PPT DESIGN
app.js App()
• App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生
命周期函数等。 • 全局的 getApp() 函数，可以获取到小程序实例 • onLaunch ：当小程序初始化完成时，会触发 onLaunch（全局只触发 一次） • onShow ：当小程序启动，或从后台进入前台显示，会触发 onShow onHide ：当小程序从前台进入后台，会触发 onHide • onError ：当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
BREAD PPT DESIGN
tabBar
• tabBar 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排
序。 • color： tab 上的文字默认颜色（十六进制） • selectedColor ： tab 上的文字选中时的颜色（十六进制） • backgroundColor ： tab 的背景色（十六进制） • borderStyle ： tabbar上边框的颜色， 仅支持 black/white • list ：数组 • pagePath：页面路径，必须在 pages 中先定义 • text： tab 上按钮文字 • iconPath：图片路径，icon 大小限制为40kb • selectedIconPath：选中时的图片路径，icon 大小限制为40kb
一个小程序页面由四个文件组成，分别是： （页面的这四个文件必须具有相同的路径与文件名）
js
• 必需
• 页面逻辑
wxml
• 必需
• 页面结构
wxss
• 非必需
• 页面样式
json
• 非必需
• 页面配置
BREAD PPT DESIGN
app.json 配置
pages
• 必需 • 页面路径
window
BREAD PPT DESIGN
组件
• input
• bindinput：当键盘输入时，触发input事件，event.detail = {value: value}，处理函数可以直接 return 一个字符串，将替换输入框的内容
• bindfocus：输入框聚焦时触发，event.detail = {value: value}
• plain：按钮是否镂空，背景色透明
• disabled：是否禁用 • loading：名称前是否带 loading 图标 • form-type：有效值：submit, reset，用于 <form/> 组件，点击分别 会触发 submit/reset 事件 • hover-class：指定按钮按下去的样式类。当 hover-class="none" 时， 没有点击态效果
• 所有组件和属性都是小写 • 基本属性： • id • class • style • hidden • data-*：自定义属性，以data-开头，多个单词由连字符-链接，不能有 大写(大写会自动转成小写)如data-element-type，最终在 event.target.dataset 中会将连字符转成驼峰elementType写法 • bind*/catch*：绑定事件
BREAD PPT DESIGN
组件
• input
• value：输入框的初始内容 • type：input 的类型，有效值：text, number, idcard, digit
• password：是否是密码类型
• placeholder：占位符 • placeholder-style（placeholder-class）：指定placeholder样式 • disabled：是否禁用 • maxlength：最大输入长度，设置为 -1 的时候不限制最大长度 • focus：获取焦点
BREAD PPT DESIGN
组件
• data-alpha-beta alphaBeta • data-alphaBetaalphabeta
BREAD PPT DESIGN
组件
• 视图容器 • view：基本视图 • scroll-view：滚动视图 • swiper：滑块视图 • 表单组件 • button • check
• 逻辑判断
• for循环
BREAD PPT DESIGN
WXSS
• WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式
• 尺寸单位：rpx，可以根据屏幕宽度进行自适应。1rpx = 0.5px（iphone6）。 • @import语句可以导入外联样式表的相对路径，用;表示语句结束。
• wx.login：登录
• wx.getUserInfo：获取用户信息 • wx.requestPayment：微信支付 • Page.onShareAppMessage：分享 • 。。。。。。
BREAD PPT DESIGN
完结
BREAD PPT DESIGN
• bindblur：输入框失去焦点时触发，event.detail = {value: value} • bindconfirm：点击完成按钮时触发，event.detail = {value: value}