《微信小程序程序设计与开发》课件 第一章 微信小程序起步

第一章

主讲人：XX微信小程序起步课程目标第一章微信小程序起步第二章文章列表功能实现第三章欢迎页面&文章功能列表功能升级第四章文章详情页面功能实现第五章背景音乐播放与页面分享功能实现第六章电影首页功能实现第七章更多电影、电影详情功能实现第八章我的功能实现第九章基于云开发的功能升级微信小程序课程项目介绍文章首页文章列表页文章详情页微信小程序课程项目介绍更多电影列表页面电影首页我的页面本章目标了解微信小程序相关概念掌握微信小程序环境搭建与开发工具了解微信小程序的基本文件结构掌握微信小程序支持的CSS选择器与尺寸单位熟悉使用组件构建页面（view、text、image组件的使用）了解小程序的全局配置文件，全局样式和应用程序级别JS文件完成第一个简单的“Welcome”页面应用的开发一、微信小程序介绍微信产品创始人小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关系是否安装太多应用的问题。应用即将无处不在，及时可用，但无需安装。微信小程序特点：无需安装与卸载。开放注册范围（个人、企业、政府、媒体、其他组织）。可以快速开发且参与开发者比较多、便于传播且用户体验比较出色。一、微信小程序介绍小程序与原生App的比较属性微信小程序iOS、Android相关基础语言JavaScript和cssObjective-C、Java性能较好极好成本低高开发效率低较高开发环境配置简单较复杂新手入手入门速度快慢适合应用业务简单，使用频率不高业务逻辑复杂，使用频率高新版审核周期较短较长跨平台（对于iOS和Android两个平台只需要开发一套程序）。具备接近于原生App的体验。对原生组件有访问能力。具备缓存能力。上手容易，开发逻辑较为简单。小程序具有比较显著的一些优势如下：微信小程序开发与Web前端开发区别微信小程序工程师这个职位在短期之内不会成为独立的一类职位，绝大数的小程序都是有Web前端工程师来开发，所以我们现在可以看到在Web前端岗位要求添加一项：熟悉微信小程序开发者优先。微信小程序开发流程注册小程序信息完善开发小程序提交审核和发布微信小程序环境搭建-工具下载下载地址：/miniprogram/dev/devtools/download.html如果选Windows64的版本安装包，这里小程序开发工具不支持Windows7以下的操作系统项目搭建前准备1：注册小程序AppId注册地址：/cgibin/wx?token=&lang=zh_CN项目搭建前准备2：获取AppId注册完成登录到微信后台管理，获得AppIDAppID是与微信号关联，AppID不能共享。微信小程序搭建-1完成安装微信小程序开发工具，第一次运行，需要登录登录进入页面微信小程序搭建-2创建项目首页把申请的AppID复制到输入框微信小程序搭建-3第一个小程序创建成功页面微信开发者工具介绍-1微信开发者工具介绍-常规设置微信小程序课程项目介绍微信小程序贯穿项目整体功能与技术栈微信小程序的贯穿项目，从整体分为三大模块分别为：文章模块、电影模块、小程序设置模块，主要使用的技术栈有：原生JavaScript（包括ES6语法)、CSS、微信小程序API、LinUI(第三方插件)第一个微信小程序页面构建-目录结构文件必须作用app.js是小程序逻辑文件app.json是小程序配置文件app.wxss否全局公共样式文件文件类型必填作用js是页面逻辑wxml是页面结构,如HTMLwxss否页面样式，如CSSjson否页面配置小程序应用文件小程序页面文件小程序所支持的CSS选择器与尺寸单位WXSS（WeiXinStyleSheets）是一套用于小程序的样式语言，用于描述WXML的组件样式，也就是视觉上的效果。WXSS与Web开发中的CSS类似。在前端开发中样式编写一般单位使用px单位，但在WXSS中，引入了rpx（responsivepixel）尺寸单位。引用新尺寸单位的目的是，适配不同宽度的屏幕，开发起来更简单小程序页面创建步骤1-页面元素步骤一：创建页面，在页面文件wxml编写元素运行效果小程序页面创建步骤2-设置样式步骤二：在wxss样式文件设置页面样式运行效果/*设置页面整体背景颜色*/page{background-color:#ECC0A8;}/*设置图片的样式*/.avatar{width:200rpx;height:200rpx;border-radius:50%;}/*设置文本的样式*/.motto{margin-top:100rpx;font-size:32rpx;font-weight:bold;color:#9F4311;}小程序页面创建步骤3-配置页面步骤三：在json配置文件中配置页面运行效果{"usingComponents":{},"backgroundColor":"#eeeeee","navigationBarBackgroundColor":"#ECC0A8","navigationBarTitleText":"基本组件使用测试演示"}Welcome页面构建-需求代码演示Welcome页面构建-实现思路Welcome页面构建思路：1、在page目录创建welcome目录，并创建page页面；2、在welcome.wxml文件编写页面结构，根据需求分析这里页面构建组件：view组件、text组件、image组件；3、在welcome.wxss文件编写对应样式，页面使用flex布局；4、在welcome.json文件配置导航背景颜色和导航标题样式微信小程序编译与测试完成页面开发，微信开发工具提供在真机测试方式：1、二维