正常的开发分为前端和后端
传统的小程序开发完成之后需要进行一个上线部署，而传统部署的基本步骤有：购买服务器、域名，备案，网络防护，负载均衡，监控警告等。这些事情非常的繁琐，让人头疼。
传统模式.png
小程序云开发，弱化了后端和运维的工作，不需要搭建服务器。
云开发赋予了开发者稳定，安全的读取数据，上传文件的能力。
云开发模式.png
serverless=》无服务开发=》小程序的云开发
在云开发的核心理念中，函数即服务，依托腾讯端提供的后端服务，我们通过函数就可以实现调用，从而实现serverless
云开发提供的五大基础能力
- 1.云函数：在云端运行代码，并且具有天然的鉴权机制。
- 2.云数据库：既可以在云函数端操作，又可以在小程序端操作的非关系型json数据库（类似moongodb）
- 3.云调用：基于云函数免鉴权使用小程序开放接口的能力
- 4.HTTP API：可以让第三方服务很方便的在已有服务器上访问云资源，实现与云开发的互通。
- 5.云存储：在云端存储文件，可以在云端控制台可视化管理
我们可以通过云函数去定期的去第三方数据服务器拿数据，然后更新到云数据库中
1.什么是小程序的云开发？
传统模式：小程序端展现的数据是发请求给后端拿到的
云开发模式：小程序端提供的原生接口可以直接去操作远程的云数据库，云函数，云存储。而我们根本根本不知道后端部署在那里。
2.什么是serverless？
打破前端和后端的物理隔离
当我们使用后端服务的时候，不需要关注后端的ip地址是什么等等
在小程序官网上注册账号，然后下载开发者工具，打开开发者工具，创建一个新项目。
需要注意一点，APPID是每一个小程序的唯一标识，这个ID在官网账号中的“开发”界面可以查看到。
进入项目之后，第一次使用云开发的用户需要点击界面上方的“云开发”按钮去开通服务。
首先可以选择创建一个test作为开发环境的云服务，等到项目上线再创建一个生产环境进行使用。
基本结构分析：
cloudfunctions=》云函数部分
miniprogram=》前端部分代码
- images图片资源
- pages创建小程序的时候自带文件夹和文件（可以全部删除）
- style创建小程序的时候自带样式（可以全部删除）
项目文件结构.png
app.js全局js文件
onLaunch:function(){}
//当小程序启动的时候触发的钩子函数
wx.cloud.init({ env:"在此处填入环境ID",
这个地方填入的是哪个ID，小程序自动连接的就是对应的环境，先填开发环境，上线的时候把这个地方改成生产环境就可以了。
traceUser: true
设置为true的时候，每一个访问过我们的小程序的用户都会被记录，并且以倒序的顺序进行显示
})
app.json全局配置文件
pages
//文件的路径
window
//窗口的一些配置（页面的最上方）
“sitemapLocation”:sitemap.json
//小程序开放的内部搜索，对应的配置文件sitemap.json，决定了我们的小程序界面是否能被搜索到，在小程序优化中可以用到
tabBar
//小程序封装的一个对象，有color，selectedColor，list等常用属性。
//对应的小程序页面下方的导航，最少两个，最多五个
app.wxss全局样式
README.md小程序的开发说明
project.config小程序项目的配置文件，突出为整个项目
iconfont下载图标很方便，可以自由选择格式，大小，以及颜色（点击下载，直接下载到本地就可以直接使用了）
把style文件夹中的guide.wxss和app.wxss中的小程序自带样式都去除掉，样式都是我们自定义
写最初的几个主页面：
先在app.json中的“pages”中把框架自带的页面全部删除，然后加上自己要写的几个页面路径，保存之后在对应的路径就会自动生成页面文件。（手动把框架自带的页面文件删除掉）
写轮播图
小程序原生自带swiper组件，里面的项目swiper-item，在swiper-item里放image标签
小程序自带的block标签，建议把wx:for写在block上面，block不会真实渲染，在轮播图这里我们在swiper-item外面包裹一层block，然后wx:for渲染写在block标签上
swiper的常用属性：
- indicator-dots="true"，显示导航的小点，默认为flase
- autoplay=“true”自动播放
- interval=“2000”自动播放的间隔是2000ms
- duration=”1000“滑动播放时长为1000ms
小程序自带的image标签的常用属性
- mode=”scaleToFill“，保证图片完全覆盖当前image容器，这种缩放模式下图片非常有可能会产生变形，实际效果不好
- mode=”aspectFit“，让图片能够完整的显示在容器中，缺点是有可能会让容器留白
- mode=”widthFix“，让图片能够完全覆盖容器，同时保持图片的宽高比不变，同时给image标签增加width100%height100%的样式，保证image能够完整覆盖父元素。这个缩放模式是实际项目中最常用的。
组件化开发
组件：在用户界面开发领域，组件是一种面向用户的，独立的，可复用的交互元素的封装。
组件的组成：
结构=》wxml
逻辑=》js
样式=》wxss
组件的设计原理：高内聚，低耦合，单一职责，避免过多参数
封装第一个组件：歌曲列表组件
1.创建
首先在项目的miniprogram文件夹下新建一个文件夹components，然后在components中右键创建对应的组件（这里是playlist）
2.在页面中引用和使用
在页面的json中进行引用
在页面的wxml中进行使用
3.传递数据，这里想把页面中的歌曲数据playlist传递给组件
4.组件接收页面传递过来的数据
在组件的js文件中使用properties进行接收（需要指定所接收到的数据的类型，不指定的话会报错）
5.组件把接收到的数据进行使用（渲染数据）
在小程序中的背景图片只能使用本地图片，不允许使用网络图
如何把小图片转换成base64？在百度上搜索“在线制作base64”，很多网站都可以转换
让文本超过2行就在第2行的末尾显示为省略号的方法（存在兼容性问题）
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp:2;
overflow: hidden;
text-overflow: ellipsis;
网友评论