微信小程序

主要内容：

1. 微信小程序是什么？
2. 开发环境准备
3. 小程序的目录结构
4. 小程序配置文件
5. 模板语法

微信小程序是什么？

微信小程序，简称小程序，英文名Mini Program，是一种不需要安装即可使用的应用，它实现了应用“触手可及”的梦想。

开发环境准备

1. 注册账号
2. 获取APPID（开发者唯一的身份验证）（wx38a02966954367a1）
   • 点击开发
   • 点击开发设置
   • 复制AppID并保存
3. 开发工具（集开发、预览、调试、发布于一身的完整环境）

小程序目录结构

小程序框架提供了自己的视图层描述语言WXML（即类HTML）和WXSS（即类CSS），以及JavaScript，并在视图层与逻辑层间提供了数据传输和事件系统（即编写代码的时候不用关心操作页面结构，只需要关心数据本身），让开发者能够专注于数据与逻辑。

1. pages->index 首页文件
   • index.js js文件
   • index.json 配置文件
   • index.wxml 类似于html文件
   • index.wxss 类似于css文件
2. pages->logs 日志文件
3. utils->util.js 帮助文档的js（可以删除）
4. app.js 小程序的入口文件 全局文件
5. app.json 全局配置文件
6. app.wxss 全局样式文件
7. project.config.json 项目的配置文件
8. sitemap.json 微信索引配置文件

注：传统web项目文件结构为三层（即HTML、CSS、Javascript）。而小程序是四层结构（即WXML、WXSS、Javascript、JSON），多出了一层.json配置文件。

小程序配置文件

1. 全局配置app.json

   • pages字段 表明当前项目有几个子页面，配置项与pages文件夹一一对应，通过添加配置项可在pages文件夹中直接添加子文件夹，任意配置项如果出现在首行，则模拟器默认显示该配置项对应pages下的文件。
   • window字段 用于设置小程序的状态栏、导航条、标题、窗口背景色，全局配置。
     • navigationBarBackgroundColor HexColor 设置导航栏背景颜色，十六进制表示的颜色
     • navigationBarTitleText string 设置导航栏标题文字内容
     • navigationBarTextStyle string 设置导航栏标题颜色，仅支持 black / white
     • enablePullDownRefresh boolean 设置小程序下拉刷新功能是否开启
     • backgroundTextStyle string 设置小程序下拉刷新小圆点的背景颜色，仅支持 dark / light
     • backgroundColor HexColor 设置小程序下拉刷新区域的背景颜色，十六进制表示的颜色
   • tabbar 如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
     • color HexColor tab 上的文字默认颜色，仅支持十六进制颜色
     • selectedColor HexColor tab 上的文字选中时的颜色，仅支持十六进制颜色
     • backgroundColor HexColor tab 的背景色，仅支持十六进制颜色
     • position string tabBar 的位置，仅支持 bottom / top
     • custom boolean 自定义 tabBar
     • borderStyle
     • list Array tab 的列表
       • pagePath string 页面路径，必须在 pages 中先定义
       • text string tab 上按钮文字
       • iconPath string 未选中图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。
       • selectedIconPath string 选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。

2. 页面配置page.json

   用于设置小程序的状态栏、导航条、标题、窗口背景色，局部配置，部分字段同全局配置的window字段的属性。

3. sitemap.json配置

   sitemap.json用于配置小程序及其页面是否允许被微信索引。

模板语法

1. 数据绑定

   • 数据定义：js文件data字段中定义属性 属性名：属性值
   • 数据绑定：{{属性名}}

2. 运算=>表达式

   花括号中可以加入表达式，不可以加入语句，例如：算数运算、字符串拼接运算等。

3. 列表渲染

   • wx:for数组循环
     • wx:for="{{数组}}" wx:for-item=“循环项名称” wx:for-index=“循环项的索引”
     • wx:key="唯一的值"用来提高列表渲染的性能
       • wx:key 绑定一个普通字符串的时候，那么这个字符串名称肯定是循环数组中的对象的唯一属性
       • wx:key="*this"表示数组是一个普通的数组 *this表示是循环项
     • 当出现数组的嵌套循环的时候，尤其要注意以下绑定的名称不要重名
       • wx:for-item=“item” wx:for-index=“index”
     • 如果我们不写wx:for-item=“item” wx:for-index=“index”，默认情况下，小程序会把循环项的名称和索引的名称设置为item和index，即只有一层循环的时候（wx:for-item=“item” wx:for-index=“index”）可以不写。
   • wx:for对象循环
     • wx:for="{{对象}}" wx:for-item=“对象值” wx:for-index=“对象的属性”
     • 循环对象的时候最好把item和index的名称都改一下 wx:for-item=“value” wx:for-index=“key”
   • block标签
     • 占位符的标签
     • 写代码的时候可以看到这标签的存在
     • 页面渲染的时候会将其移出
     • 应用场景：当需要循环输出数据，但是又不想页面渲染时多出一层结构，可以使用block标签

4. 条件渲染

   • wx:if="{{true/false}}"
   • if else if else
     • wx:if
     • wx:elif
     • wx:else
   • hidden
     • 在标签上直接加入属性hidden
     • hidden="{{true}}"
   • wx:if、hidden都有显示、隐藏元素的效果，该如何抉择呢？
     • 当标签不是频繁的切换显示时，优先使用wx:if(直接将标签从页面上移除，以达到隐藏元素的目的)
     • 当标签频繁切换显示时优先使用hidden（通过添加样式的方式来切换显示，hidden属性不要和dispaly一起使用）

5. 小程序事件绑定

   • 绑定事件：标签中添加bind+事件名=“事件处理函数”
   • input事件与web中一样
   • tap事件相当于web中的click事件
   • data字段中的值只可以通过this.setData({属性名:属性值})进行修改
   • 无法在小程序事件中直接传参
   • 通过自定义属性的方式来传参
   • 自定义属性传参通过事件对象获取

6. WXSS

   WXSS样式语言（同CSS,在原来的基础上新增及优化了一些东西），用于描述WXML的组件样式。

   • 尺寸单位：rpx(responsive pixel)，可以根据屏幕宽度进行自适应。规定屏幕宽度为750rpx。如在iPhone6上，屏幕宽度375px，共有750个物理像素，则750rpx=375px=750物理像素，1rpx=0.5px=1物理像素。
   • 小程序中的样式和css基本相同，但是它不支持通配符“*”语法
   • 小程序中使用less的步骤
     • 编辑器是vscode
     • 安装插件easy less
     • 在vscode设置中加入"less.compile": {“outExt”: “.wxss”}配置
     • 在要编写样式的地方，新建less文件，如index.less，然后正常编辑即可。

7. 常见组件

   • view组件类似于div标签
   • text组件类似于span标签
     • 文本标签
     • 只能嵌套text
     • 长按文字可以复制（只有该标签有这个功能）
     • 可以对空格、回车进行编码
   • img组件图片标签不同于html
     • 图片标签，image组件默认宽度320px，高度240px
     • 支持懒加载
   • swiper组件
     • 轮播图外层容器 swiper
     • 每一个轮播项 swiper-item
     • swiper标签存在默认样式
       • width 100%
       • height 150px
       • swiper高度无法由内容撑开
     • 计算swiper高度
       • 先找出原图的宽度和高度，等比例给swiper定宽度和高度
     • swiper属性
       • autoplay boolean 自动轮播
       • interva number 自动切换时间间隔
   • navigator导航组件
     • navigator组件类似html中的a标签
     • url 要跳转的页面路径 绝对路径 相对路径
     • 块级元素 可以设置宽、高 默认会换行
     • target 要跳转到当前的小程序 还是其它的小程序
       • self 默认值 自己的小程序页面
       • miniProgram 其他的小程序页面
     • open-type 跳转的方式
   • rich-text 富文本标签 类似vue中的v-html功能
     • node属性
       • 接收标签字符串
       • 接收对象数组
   • button组件
     • size控制按钮大小
     • type控制按钮的颜色
     • plain控制按钮是否镂空
     • loading名称前是否添加loading图标
     • open-type：
       • contact 直接打开客服对话功能，需要在微信小程序的后台配置
       • share 转发当前的小程序到微信朋友中，不能把小程序分享到朋友圈
       • getPhoneNumber 获取当前用户的手机号码信息，结合一个事件来使用，不是企业的小程序账号，没有权限获取用户的手机号码
         • 绑定一个事件bindgetPhonenumber
         • 在事件的回调函数中通过参数获取用户的手机信息
         • 获取到的信息已经加密过了
         • 注意：需要用户自己搭建小程序的后台服务器，在后台服务器中进行解析手机号码，返回到小程序中就可以看到信息了
       • getUserInfo 获取当前用户的个人信息
         • 使用方法，类似获取用户的手机号码
         • 可以直接获取，不存在加密的字段
       • launchApp 在小程序当中直接打开app
         • 需要在app中通过app的某个链接打开小程序
         • 在小程序中再通过这个功能重新打开app
       • openSetting 打开小程序内置的授权页面
         • 授权页面只会出现用户曾经点击过的权限
       • feedback 打开小程序内置的意见反馈页面
   • icon组件用于设置字体图标
     • type 图标类型
     • size 图标尺寸
     • color 图标颜色
   • radio单选按钮
     • 可以通过color属性改变颜色
     • value 选中单选框的值
     • 需要搭配radio-group一起使用
   • checkbox复选框标签
     • 可以通过color属性来修改颜色
     • 需要搭配checkbox-group一起使用

8. 自定义组件

   • 组件的使用过程
     • 创建组件
     • 声明组件，在需要使用组件页面的json文件引入组件
     • 使用组件
   • 组件通信
     • 父组件向子组件传递数据通过标签属性进行传递
     • 子组件可通过properties属性进行接收
     • 子组件向父组件传递数据是通过事件的方式传递的，triggerEvent
     • 在子组件的标签上加入一个自定义事件
     • 子组件通过bind+事件名="函数名"进行接收

9. 组件生命周期

   组件生命周期即小程序内置事件，这些事件在特定的时刻触发，组件生命周期分为应用生命周期及页面生命周期。

   • 应用生命周期即小程序的入口文件app.js
     • onLaunch()应用第一次启动的时候就会触发事件，可以用来获取用户信息
     • onShow()应用显示时触发，可以对应用的数据或页面效果重置
     • onHide()应用被隐藏时触发，可以暂停或者清除定时器
     • onError()在应用发生代码报错的时候，收集用户的错误信息，通过异步请求，将错误的信息发送后台
     • onPageNotFound页面找不到就会触发
       • 应用第一次启动的时候，如果找不到第一个入口页面，就会触发
   • 页面生命周期