小程序云开发1.从0开始构建项目
正常的开发分为前端和后端
传统的小程序开发完成之后需要进行一个上线部署,而传统部署的基本步骤有:购买服务器、域名,备案,网络防护,负载均衡,监控警告等。这些事情非常的繁琐,让人头疼。
传统模式.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创建小程序的时候自带样式(可以全部删除)
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;