微信小程序开发栏目今天详细教大家写微信小程序。
小程序的历史介绍什么是微信小程序？
微信小程序，简称小程序。英文名mini program，是一种不需要下载安装就可以直接使用的应用。他实现了触手可及的梦想。用户扫一扫或搜一下就可以直接打开应用。
为什么是微信小程序微信有海量用户
推广app或公众号成本太高
开发适配成本低
容易小规模试错，然后快速迭代
跨平台
历史2016年1月11日，张小龙，微信内部研究新的形态，应用号，后改名小程序。
2016年8月12日，开始内测
2017年1月9日，上线
#环境规范
注册账号
mp.weixin.qq.com/ (帐号信息 --- 邮箱激活 --- 信息登记)
获取id
APPID （[登录微信公众平台](https://mp.weixin.qq.com/wxamp/devprofile/get_profile?token=942994743&lang=zh_CN) ---> 开发 ---> 开发设置）复制代码开发者工具
微信开发者工具下载
小程序开发者工具开发者工具介绍
快捷键：
1. ctrl + shift + F (搜索) 2. alt + shift + F (代码格式化---VSCode)复制代码小程序的原生框架，mina框架 框架详情
小程序配置文件（写配置文件在微信开发者工具工具写，有提示）app.json 全局配置文件
配置全局文件 * pages：添加要创建的文件项，保存后就会自动生成文件 * [windows](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html)：设置小程序的状态栏，网站建设，导航条，标题窗口颜色复制代码page.json 页面配置文件
sitemap
小程序的模板语法WXML ---> HTML (结合基础组件，事件系统，构件出页面结构)
相当于 ，行内标签，不会换行
相当于，块级元素，会换行
数据绑定{{ 数据 }}
运算 --> 表达式（ 数值计算，字符串拼接，三元表达式）
列表循环 （wx:for）
wx:key绑定的是数组中的为唯一属性，wx:key=this表示数组是普通数组，`this`是循环项
<view wx:for="{{ person }}" wx:for-item="item" wx:for-index="index"wx:key="id"> 索引： {{ index }} 名称： {{ item.name }}</view>复制代码标签 ---> 占位标签
条件渲染（wx:if）（wx:if, wx:elif, wx:else） (hidden 属性是通过添加样式的方式来呈现的)
当标签不是频繁的切换使用if，频繁切换使用hidden
事件绑定关键字：bind （bindinput，网站seo优化，bindtap【点击事件】）
获取事件源对象的值：
e.detail.value复制代码获取data中数据的值：
this.data.属性名复制代码将事件源对象的值设置回data中：
this.setData({ num: this.data.num + operation });复制代码事件绑定是不能直接传参，要通过自定义属性的方式传参（ {{ 传递的参数}} ）：
<button bindtap="bandletap" data-operation="{{ 1 }}">+</button> bandletap(e) { // console.log(e); const operation = e.currentTarget.dataset.operation; this.setData({ num: this.data.num + operation }); },复制代码样式尺寸单位当屏幕宽度等于 750px 时，1px = 1rpx
当屏幕宽度等于375px时， 1px =0.5rpx
样式导入只支持相对路径选择器（微信小程序不支持通配符）小程序的内置组件小程序中常用的布局组件：
view,text,rich-text,button,image,icon,swiper,radio,checkbox等。复制代码view标签 相当于 p标签
text标签 只能嵌套text标签 长按文字可以复制【selectable】（只有这个标签有这个功能） 可以对回车,空格进行编码 (decode)
image标签 （打包上线的大小不能超过2M，使用图片的时候统一使用外网图片）
图片存在默认的宽高（320px * 240px）
mode 决定 图片内容 和 图片标签 做适配
scaleToFill 默认值 不保持纵横比，拉伸至标签定义的宽高
aspectFit 保持宽高比，保证图片的长边完全显示（常用 轮播图）
aspectFill 短边完全显示
widthFix 宽度不变，高度自动变化，保持原宽高比不变
top，left，bottom，right 背景图定位
小程序中的图片 直接支持 懒加载
lazy-load 会自己判断 当图片出现在视口的上下三屏之内的时候，自己开始加载图片
swiper标签 ---》 轮播图
