一、微信小程序的优势：
1、微信有海量用户，且粘性很高，在微信里开发产品更容易触达用户；
2、推广app或公众号的成本太高；
3、开发适配成本低；
4、容易小规模试错，然后快速迭代；
5、跨平台
事实上，应用号并非微信首创，之前百度推出过应用号，搜狐退出过快站，但是腾讯将这件事情做成功的概率确是最大的
二、微信小程序对于创业者的优势：
1、APP流量成本的急剧攀升；
2、移动互联网格局基本已定，用户需求场景已被巨头把持；
3、面向所有产品对用户时间的竞争；
三、开发环境准备
1、注册账号：官网注册
2、获取APPID，由于调用微信小程序的接口等功能，需要索取开发者的小程序中的APPID，所以注册成功后，可登录，然后获取APPID。登录，在设置页面将APPID保存>下来，方便后期使用
3、开发工具
vs cod下载地址：官网下载
微信小程序开发工具（微信官方工具，用于查看小程序UI） 下载地址>：官网>下载
四、其他小程序（和微信小程序开发很相似）
1、支付宝小程序
2、百度小程序
3、QQ小程序
4、今日头条 + 抖音小程序
五、大项目–黑马优购电商项目（十二大模块）
1、商>品首页
2、商品列表
3、购物车
4、授权页面
5、商品搜索
6、商品收藏
7、商品分类
8、商品详情
9、结算页面
10、订单列表
11、个人中心
12>、意见反馈
六、官方开发文档：API文档
PS：写全局配置文件用微信开发者工具比较快捷，其他用vscode
七、小程序>结构目录
小程序框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生app体验的服务
小程序内部原生框架名称：MINA
标签：wxml
样式：wxss
逻辑：JS
配置：JSON
sitemap配置：小程序根目录下的sitemap.json文件用来配置小程序及其页面是否允许被微信索引
>八、全局配置app.json
app.json是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间>、底部tab等
1、pages字段：API
PS：在vscode中通过字段新建页面，在微信小程序开发者工具中，必须产生保存行为，才能成功新建页面
2、window字段：API
导航栏属性：
navigationBarTextStyle 字段需为 black,white
enablePullDownRefresh：下拉刷新，默认为false
backgroundTextStyle：下拉刷新显示三个点，字段需为light, dark
backgroundColor：下拉刷新背景色
3、tabbar字段：API
pagePath：页面跳转
text：页面标题
iconPath：未被选中图标
selectedIconPath：当前选中图标
PS：该字段下的部分color属性仅支持十六进制
完整的配置信息请参考app.json
九、页面配置page.json
page.json用来表示页面目录下的page.json这类和小程序页面相关的配置。开发者可以独立定义每个页面的一些属性，如：颜色、是否允许下拉刷新等。
PS：页面配置只能设置app.json中部分window配置项内容，页面中配置项会覆盖app.json的window中相同的配置项
| navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色，如 #000000 | |
|---|---|---|---|---|
| navigationBarTextStyle | string | white | 导航栏标题颜色，仅支持 black / white | |
| navigationBarTitleText | string | 导航栏标题文字内容 | ||
| backgroundColor | HexColor | #ffffff | 窗口的背景色 | |
| backgroundTextStyle | string | dark | 下拉 loading 的样式，仅支持 dark / light | |
| enablePullDownRefresh | boolean | false | 设置为 true 则页面整体不能上下滚动。只在页面配置中有效，无法在 app.json 中设置 |
十、sitemap配置—了解即可 API
该配置文件用于配置小程序及其页面是否允许被微信索引
十一、模板语法
WXML（weixin Markup language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出>页面的结构。
1、数据绑定
渲染object类型，需要单独属性渲染，否则只会出现object
text 相当于以前web中的 span标签 行内元素 不会换行
view 相当于以前web中的 div标签 块级元素 会换行
cheekbox 以前的复选框标签
字符串和花括号之间一定不要存在空格 否则会导致识别失败
以下写法就是错误的示范
十二、运算 => 表达式API
1.可以在花括号中 加入 表达式 – “语句”
2.表达式
指的是一些简单运算 数字运算 字符串拼接 逻辑运算…
·数字的加减乘除
·字符串拼接
·三元表达>式
3.语句
·复杂的代码段
☆ if else
☆switch
☆do while…
☆for…
PS:”===” 表示全等,即类型和值都相等
十三、列表渲染API
1、wx:for=”“ wx:for-item=”循环项的名称” wx:for-index=”循环项的索引”
2、wx:key=”唯一的值” 用来提高列表渲染的性能
·wx:key 绑定一个普通的字符串的时候 那么这个字符串名称 肯定是循环数组 中的 对象的 唯一属性
·wx:key=”*this” 就表示你的数组 是一个普通的数组 *this表示是 循环项
[1, 2, 3, 44, 5]
[“1”, “222”, “adfdf”]
3、当出现 数组的嵌套循环的时候 尤其要注意 一下绑定的名称 不要重名
wx:for-item=”item” wx:for-index=”index”
4、默认情况下 我们 不写wx:for-item=”item” wx:for-index=”index”小程序也会把 循环项的名称 和 索引的名称 item 和 index
即 只有一层循环的话(wx:for-item=”item” wx:for-index=”index”) 可以省略
5、对>象循环
·wx:for=”“ wx:for-item=”对象的值” wx:for-index=”对象的属性”
·循环对象的时候 最好把 item 和 index 的名称修改一下
wx:for-item=”value” wx:for-index=”key”
注：block
·占位符的标签
·写代码的时候 可以看到这标签的存在
·页面渲染 小程序会把它移除掉
十四、条件渲染 API
1、wx:if
在框架中，使用 wx:if=”” 来判断是否需要渲染该代码块 condition:true/false
wx:if
wx:elif
wx:else
2、hidden
类似 wx:if
频繁切换 用 hidden
通过添加样式的方式来切换
PS：hidden 属性 不要和 样式 display 一起使用
hidden=”false“显示标签
>不常使用 用wx:if
直接把标签从 页面结构给移除掉
十五、事件绑定
小程序中的事件绑定，通过bind>关键字来实现。如bindtap、bindinput、bindchange等 不同的组件支持不同的事件，具体看组件的说明即可
1 需要给 input 标签绑定 input 事件
绑定关键字 bindinput
2 如何获取 输入框的值
通过事件源对象来获取
e.detail.value
3 把输入框的值 赋值到 data 当中
不能直接
· this.data.num = e.detail.value
· thie.num = e.detail.value
正确写法
this.setData({
num:e.detail.value
})
需要加入一个点击事件
1 bindtap
2 无法在小程序当中的 事>件中 直接传参
3 通过自定义属性的方式来传递参数
4 事件源中获取自定义属性
4、特别注>意
·绑定事件时不能带参数 不能带括号
·事件传值 通过标签自定义属性的方式和value
十六、样式wxss API
wxss是一套样式语言，用于描述wxml的组件样式
与CSS相比 WXSS扩展的特性有：
·响应式长度单位rpx
·样式导入
1、尺寸单位
rpx（responsive pixel）：可以根据屏幕宽度进行自适应，规定屏幕宽度为750rpx
建议：开发微信小程序是， 用iPhone6作为视觉稿的标准
使用步骤：
·确定设计稿宽度pageWidth
·计算比>列 750rpx = pageWidth px， 因此 1px = 750rpx / pageWidth
·在less文件中，只要把设计稿中的 px => 750 / pageWidth rpx即可
利用 一个属性 calc属性 css 和 wxss 都支持 一个属性
· 750 和 rpx 中间不要留空格
· 运算符的两边也不要留空格
2、样式导入
wxss中直接支持 样式导入功>能
也可以和 less中的导入混用
使用 @import语句可以导入外联样式表，只支持相对路径
3、选择器
特别需要注意的是 小程序 不支持通配符 *
目前支持的选择器有：
| 选择器 | 样例 | 样例描述 |
|---|---|---|
| .class | .intro | 选择所有拥有 class=”intro” 的组件 |
| #id | #firstname | 选择拥有 id=”firstname” 的组件 |
| element | view | 选择所有 view 组件 |
| element, element | view, checkbox | 选择所有文档的 view 组件和所有的 checkbox 组件 |
| ::after | view::after | 在 view 组件后边插入内容 |
| ::before | view::before | 在 view 组件前边插入内容 |
4、小程序中使用less
原生小程序不支持less 其他基于小程序的框架大体都支持， 如：wepy、mpvue、taro等 但是仅仅因为一个less功能，而去引入一个框架，肯定是不可取的 因此可用以下方式来实现
·在vscode中安装插件 easy less
·在vscode的设置中加入如下，配置
“less.compile”: {
“outExt”: “.wxss”
}
·在要编写样式的地方，新建less文件，如index.less即可
十七、常见组件 API
1、view
代替原>来的div标签
2、text
·文本标签
·只能嵌套text
·长安文字可以复制（只有改标签有这个功能）
·可以对空格 回车 进行编码
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| selectable | boolean | false | 否 | 文本是否可选 | 1.1.0 |
| decode | boolean | false | 否 | 是否解码 |
3、image
·图片标签 image组件默认宽度320px 高度240px
·支持懒加载
PS：lazy-load 会自己判断 当 图片 出现在 视口 上下三屏的高度之内的时候 自己开始加载图片
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| src | string | 否 | 图片资源地址 | 1.0.0 | |
| mode | string | scaleToFill | 否 | 图片裁剪、缩放的模式 | 1.0.0 |
| lazy-load | boolean | false | 否 | 图片懒加载 | 1.5.0 |
mode有效值：
mode有14种模式 其中5种是缩放模式，9种是裁剪模式
| 模式 | 值 | 说明 |
|---|---|---|
| 缩放 | scaleToFill | 不保持纵横比缩放图片，使图片的宽高完全拉伸至填image元素 |
| 缩放 | aspectFit | 保持纵横比缩放图片，使图片的长边能完全显示出来。 |
| 缩放 | aspectFill | 保持纵横比缩放图片，只保证图片的短边能完全显示出来。 |
| 缩放 | widthFix | 宽度不变，高度自动变化，保持原图宽高比不变 |
| 缩放 | heightFix | 高度不变，宽度自动变化，保持原图宽高比不变 |
| 裁剪 | top | 不缩放图片，只显示图片的顶部区域 |
| 裁剪 | bottom | 不缩放图片，只显示图片的底部区域 |
| 裁剪 | center | 不缩放图片，只显示图片的中间区域 |
| 裁剪 | left | 不缩放图片，只显示图片的左边区域 |
| 裁剪 | right | 不缩放图片，只显示图片的右边区域 |
| 裁剪 | top left | 不缩放图片，只显示图片的左上边区域 |
| 裁剪 | top right | 不缩放图片，只显示图片的右上边区域 |
| 裁剪 | bottom left | 不缩放图片，只显示图片的左下边区域 |
| 裁剪 | bottom right | 不缩放图片，只显示图片的右下边区域 |
4、swiper（轮播图组件）
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| indicator-dots | boolean | false | 否 | 是否显示面板指示点 |
| indicator-color | color | rgba(0, 0, 0, .3) | 否 | 指示点颜色 |
| indicator-active-color | color | #000000 | 否 | 当前选中的指示点颜色 |
| autoplay | boolean | false | 否 | 是否自动切换 |
| interval | number | 5000 | 否 | 自动切换时间间隔 |
| circular | boolean | false | 否 | 是否循环轮播 |
5、navigator（导航组件）
类似超链接标签
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| target | string | self | 否 | 在哪个目标上发生跳转，默认当前小程序，可选值self/miniProgram |
| url | string | 否 | 当前小程序内的跳转链接 | |
| open-type | string | navigate | 否 | 跳转方式 |
open-type有效值
| 值 | 说明 |
|---|---|
| navigate | 保留当前页面，跳转到应用内某个页面，但是不能跳到tabBar页面 |
| redirect | 关闭当前页面，跳转到应用内某个页面，但是不允许跳到tabBar页面 |
| switchTab | 跳转到tabBar页面，并关闭其他所有非tabBar页面 |
| reLaunch | 关闭所有页面，打开应用内的某个页面 |
| navigateBack | 关闭当前页面，返回上一页面或多级页面。可通过getCurrentPages()获取当前的页面栈，决定需要返回几层 |
| exit | 退出小程序，target="miniProgram"时生效 |
6、rich-text(富文本标签)
可以将字符解析成 对应标签 类似vue 中 v-heml 功能
7、button
size的合法值
| 值 | 说明 |
|---|---|
| default | 默认大小 |
| mini | 小尺寸 |
type的合法值
| 值 | 说明 |
|---|---|
| primary | 绿色 |
| default | 白色 |
| warn | 红色 |
form-type的合法值
| 值 | 说明 |
|---|---|
| submit | 提交表单 |
| reset | 重置表单 |
open-type的合法值
| 值 | 说明 |
|---|---|
| contact | 打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，具体说明 |
| share | 触发用户转发，使用前建议先阅读使用指引 |
| getPhoneNumber | 获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息，具体说明 |
| getUserInfo | 获取用户信息，可以从bindgetuserinfo回调中获取到用户信息 |
| launchApp | 打开APP，可以通过app-parameter属性设定向APP传的参数具体说明 |
| openSetting | 打开授权设置页 |
| feedback | 打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容 |
open-type 的 contact 的实现过程
² 将小程序的appid 由测试后改为自己的appid
² 登录微信小程序官网，添加 客服-微信
² 准备两个账号
i. 普通用户A
ii. 客服->微信B
² 就是干
8、icon
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| type | string | 是 | icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear | |
| size | number/string | 23 | 否 | icon的大小 |
| color | string | 否 | icon的颜色，同css的color |
9、radio（单选框）
可以通过color属性来修改颜色
需要搭配radio-group 一起使用
10、checkbox（复选框）
可以通过color属性来修改颜色
需要搭配checkout-group 一起使用
十八、自定义组>件
类似于vue或者react中的自定义组件
小程序允许我们使用自定义组件的方式来构建页面
1、创建自定义组件
类似于页面，一个自定义组件由json wxml wxss js 4个文件组成
可以在微信开发者工具中快速创建组件的文件结构
在文件夹内 components/myHeader 创建组件 名为 myHeader
² 声明组件
首先要在组件的json文件中进行>自定义组件声明
² 编辑组件
同时 还要在组件的wxml文件中编写组件模板 在wxss文件中加入组件样式
slot 表示插槽 类似vue中的slot
² 注册组件
PS： 1 页面.js 文件中 存放事件回调函数的时候 存放在data同层级下！！！
2 组>件.js 文件中 存放事件回调函数的时候 必须要存放在methods中！！！
1 绑定点击事件 需要在methods中绑定
2 >获取被点击的索引
3 获取原数组
解构 对 复杂类型进行解构的时候 复制了一份 变量的引用而已
最严谨的做法 重新拷贝一份 数组， 再对这个数组的备份进行处理
let tabs = JSON.parse(JSON.stringify(this.data.tabs));
不要直接修改 this.data.数据
4 对数组循环
1 给每一个循环项 选中属性 改为false
2 给 当前的索引的 项 添加激活选中效果就可以了
[ ].forEach 遍历数组的时候 修改了 v 也会导致原数组被修改
5 点击事>件触发的时候
触发父组件中的自定义事件 同时传递数据给 父组件
this.triggerEvent(“父组件自定义事件的名称”, 要传递的参数)
Component 构造器
可用于定义组件，调用 Component 构造器时可以指定组件的属性>、数据、方法等。
| 定义段 | 类型 | 是否必填 | 描述 |
|---|---|---|---|
| properties | Object Map | 否 | 组件的对外属性，是属性名到属性设置的映射表 |
| data | Object | 否 | 组件的内部数据，和 properties 一同用于组件的模板渲染 |
| observers | Object | 否 | 组件数据字段监听器，用于监听 properties 和 data 的变化，参见 数据监听器 |
| methods | Object | 否 | 组件的方法，包括事件响应函数和任意的自定义方法，关于事件响应函数的使用，参见 组件间通信与事件 |
| created | Function | 否 | 组件生命周期函数-在组件实例刚刚被创建时执行，注意此时不能调用 setData ) |
| attached | Function | 否 | 组件生命周期函数-在组件实例进入页面节点树时执行) |
| ready | Function | 否 | 组件生命周期函数-在组件布局完成后执行) |
| moved | Function | 否 | 组件生命周期函数-在组件实例被移动到节点树另一个位置时执行) |
| detached | Function | 否 | 组件生命周期函数-在组件实例被从页面节点树移除时执行) |
十九、小程序生命周期
分为应用生命周期和页面生命周期
1. 应用生命周期
| 属性 | 类型 | 必填 | 说明 |
|---|---|---|---|
| onLaunch | function | 否 | 监听小程序初始化。 |
| onShow | function | 否 | 监听小程序启动或切前台。 |
| onHide | function | 否 | 监听小程序切后台。 |
| onError | function | 否 | 错误监听函数。 |
| onPageNotFound | function | 否 | 页面不存在监听函数。 |
2. 页面生命周期
| 属性 | 类型 | 说明 |
|---|---|---|
| data | Object | 页面的初始数据 |
| onLoad | function | 生命周期回调—监听页面加载 |
| onShow | function | 生命周期回调—监听页面显示 |
| onReady | function | 生命周期回调—监听页面初次渲染完成 |
| onHide | function | 生命周期回调—监听页面隐藏 |
| onUnload | function | 生命周期回调—监听页面卸载 |
| onPullDownRefresh | function | 监听用户下拉动作 |
| onReachBottom | function | 页面上拉触底事件的处理函数 |
| onShareAppMessage | function | 用户点击右上角转发 |
| onAddToFavorites | function | 用户点击右上角收藏 |
| onPageScroll | function | 页面滚动触发事件的处理函数 |
| onResize | function | 页面尺寸改变时触发，详见 响应显示区域变化 |
| onTabItemTap | function | 当前是 tab 页时，点击 tab 时触发 |
 |
|---|
页面生命周期图解
