1.初识小程序 1.1小程序历史
- 2017 年度百度百科十大热词之一
- 微信小程序,简称小程序,英文名 Mini Program,是一种不需要下载安装即可使用的应用 (
张小龙对其的定义是无需安装,用完即走,实际上是需要安装的,只不过小程序的体积特别小,下载速度很快,用户感觉不到下载的过程
) - 小程序刚发布的时候要求压缩包的体积不能大于 1M,,否则无法通过,在2017年4月做了改进,由原来的1M提升到2M;
- 2017年1月9日0点,万众瞩目的微信第一批小程序正式低调上线。
- 微信有海量??,?且粘性很?,在微信?开发产品更容易触达??;
- 推?app 或公众号的成本太?。
- 开发适配成本低。
- 容易?规模试错,然后快速迭代。
- 跨平台。
- 安装微信小程序开发工具,安装稳定版进行开发
- 注册小程序账号
- 使用注册的appid进行使用,如果是测试号会限制很多功能
【微信小程序|微信小程序(一)】
文章图片
2.小程序基础知识储备 2.1flex布局 flex布局
2.2移动端相关知识 物理像素
1屏幕的分辨率2设备能控制显示的最小单元,可以把物理像素看成是对应的像素点 设备独立像素 & css 像素
设备独立像素 ( 也叫密度无关像素 ) ,可以认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用并控制的 虚拟像素 ( 比如: CSS像素 , 只是在android机中CSS像素就不叫 ”CSS像素 ” 了而是叫 ” 设备独立像素 ”) ,然后由相关系统转换为物理像素。 dpr 比 & DPI & PPI
1) dpr:设备像素比,物理像素 / 设备独立像素= dpr , 一般以Iphon6的dpr为准dpr =22) PPI:一英寸显示屏上的像素点个数3) DPI :最早指的是打印机在单位面积上打印的墨点数,墨点越多越清晰 移动端适配方案
1.为什么做viewport适配a)手机厂商在生产手机的时候大部分手机默认页面宽度为980pxb)手机实际视口宽度都要小于980px ,如 : iphone6为375pxc)开发需求: 需要将980的页面完全显示在手机屏幕上且没有滚动条2.实现:
rem 适配
1.为什么做rem适配a)机型太多,不同的机型屏幕大小不一样b)需求: 一套设计稿的内容在不同的机型上呈现的效果一致,根据屏幕大小不同的变化,页面中的内容也相应变化2.实现:
function remRefresh() {
let clientWidth = document.documentElement.clientWidth;
// 将屏幕等分 10 份
let rem = clientWidth / 10;
document.documentElement.style.fontSize = rem + 'px';
document.body.style.fontSize = '12px';
}
window.addEventListener('pageshow', () => {
remRefresh()
})
// 函数防抖
let timeoutId;
window.addEventListener('resize', () => {
timeoutId && clearTimeout(timeoutId);
timeoutId = setTimeout(() =>{
remRefresh()
}, 300)
})
3.第三方库实现lib-flexible + px2rem-loader 3.小程序特点概述 1.没有DOM2.组件化开发: 具备特定功能效果的代码集合3.体积小,单个压缩包体积不能大于2M ,否则无法上线4.小程序的四个重要的文件a) *.jsb) *.wxml ---> view结构----> htmlc) *.wxss ---> view样式-----> cssd) *. json ----> view数据-----> json文件小程序适配方案: rpx (responsive pixel 响应式像素单位) a)小程序适配单位:rpxb)规定任何屏幕下宽度为750rpxc)小程序会根据屏幕的宽度不同自动计算rpx值的大小d) Iphone6下:1rpx = 1物理像素= 0.5px
文章图片
4.小程序准备 4.1创建小程序
文章图片
4.2微信开发者工具介绍
文章图片
通过点击可依次指定模拟器 编辑器调试器的显示和隐藏
文章图片
小程序网络请求只接受https类型的请求 开发时对于http请求可设置不检验合法域名
想要https类型请求也需要到官网进行配置
文章图片
文章图片
4.3小程序配置文件 ?个?程序应?程序会包括最基本的两种配置?件。?种是全局的app.json 和 ????的page.json
全局配置
app.json是当前?程序的全局配置,包括了?程序的所有??路径、界?表现、?络超时时间、底部tab等。普通快速启动项??边的 app.json 配置
文章图片
详细配置在文档查看
文章图片
页面配置
- 这?的
page.json
其实?来表????录下的 page.json 这类和?程序??相关的配置。 开发者可以独?定义每个??的?些属性,如顶部颜?、是否允许下拉刷新等等。 ??的配置只能设置 app.json 中部分 window 配置项的内容,??中配置项会覆盖 app.json 的 window 中相同的配置项。
- 常用配置属性列举:
推荐阅读
- 微信小程序|微信小程序 lookup 联表查询
- 微信小程序|微信小程序 聚合查询
- 微信小程序|微信小程序 自定义tabBar
- 微信小程序开发流程
- 微信小程序|微信小程序根据经纬度获取省市区信息
- 零基础微信小程序入门开发系列|【零基础微信小程序入门开发一】小程序介绍及环境搭建
- #|微信小程序 + 腾讯位置服务获取全国城市列表
- 微信小程序|毕业论文-基于微信小程序的图书馆管理系统设计与实现
- 小程序|微信小程序云开发 | 城市信息管理