微信小程序

一、小程序简介

        1 小程序与普通网页开发的区别
                ① 运行环境不同：
                        网页运行在浏览器环境中，而小程序运行在微信环境中。
                ② API不同：
                        由于运行环境的不同，所以小程序中,无法调用 DOM 和 BOM 的 API。
                        但是，小程序中可以调用微信环境提供的各种API，例如：地理定位，扫码，支付
                ③ 开发模式不同：
                        网页的开发模式：浏览器＋代码编辑器。
                        小程序有自己的一套标准开发模式：申请小程序开发账号，安装小程序开发者工具，创建和配置小程序项目。

二、注册小程序开发账号

        1 点击注册按钮
                使用浏览器打开 https://mp.weixin.qq.com/ 网址，点击右上角的 “立即注册” 即可进入到小程序开发账号的注册流程。
        2 选择注册账号的类型
        3 填写账号信息

三、安装开发者工具

        1 了解微信开发者工具
                微信开发者工具是官方推荐使用的小程序开发工具，它提供的主要功能如下：
                        ① 快速创建小程序项目
                        ② 代码的查看和编辑
                        ③ 对小程序功能进行调试
                        ④ 小程序的预览和发布
        2 下载
                推荐下载和安装最新的稳定版 (Stable Build) 的微信开发者工具，下载页面的链接如下：
                        https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html

四、小程序的项目结构

        1 了解项目的基本组成结构
                ① pages用来存放所有小程序的页面
                ② utils 用来存放工具性质的模块（例如:格式化时间的自定义模块)
                ③ app.js 小程序项目的入口文件
                ④ app.json小程序项目的全局配置文件
                ⑤ app.wxss 小程序项目的全局样式文件
                ⑥ project.config.json项目的配置文件
                ⑦ sitemap.json用来配置小程序及其页面是否允许被微信索引
        2 小程序页面的组成部分
                小程序官方建议把所有小程序的页面，都存放在 pages目录 中，以单独的文件夹存在。其中，
                其中，每个页面由4个基本文件组成，它们分别是：
                        ① .js 文件（页面的脚本文件，存放页面的数据、事件处理函数等)
                        ② .json 文件（当前页面的配置文件，配置窗口的外观、表现等)
                        ③.wxml 文件（页面的模板结构文件)
                        ④ .wxss 文件（当前页面的样式表文件)

五、小程序的宿主环境–通信模型

        1 通信的主体
                小程序中通信的主体是渲染层和逻辑层，其中：
                        ① wxml 模板和 wxss 样式工作在渲染层
                        ② JS脚本工作在逻辑层
        2 小程序的通信模型
                小程序中的通信模型分为两部分：
                        ① 渲染层和逻辑层之间的通信：
                                由微信客户端进行转发
                        ② 逻辑层和第三方服务器之间的通信：
                                由微信客户端进行转发

六、wxml 数据绑定

        1 数据绑定的基本原则
                ① 在 data 中定义数据
                ② 在 wxml 中使用数据
        2 在 data 中定义页面的数据
                在页面对应的 js 文件中，把数据定义到 data 对象中即可(与vue相同)
                注意：
                        data 里的数据可以点击调试器，在 AppData 里可以看见
        3 Mustache 语法的格式
                把 data 中的数据绑定到页面中渲染，使用 Mustache 语法 (也称插值表达式) 将变量包起来即可(与vue相同)。
        4 Mustache 语法的应用场景
                ① 绑定内容：
                        Page({
                                data: {
                                        info: 'love'
                                }
                        })
                        <view>{ { info }}</view>
                ② 绑定属性：
                        Page({
                                data: {
                                        imgSrc: 'http://www. itheima.com/images/logo.png'
                                }
                        })
                        <image src="{ {imgSrc}}"></image>   // 这里就与vue不同
                ③ 运算（三元运算、算术运算等)：
                        (1) 三元运算
                                Page({
                                        data: {
                                                randomNum1: Math.random() * 10  // 生成10以内的随机数
                                        }
                                })
                                <view>{ { randomNum1 >= 5 ? '随机数字大于或等于5' : '随机数字小于5'}}</view>
                        (2) 算术运算
                                Page({
                                        data: {
                                                randomNum2: Math.random().toFixed(2)   // 生成一个带两位小数的随机数，例如0.34
                                        }
                                })
                                <view>生成100以内的随机数: { {randomNum2 * 100}}</view>

七、wxml 事件绑定

        1 小程序中常用的事件
                类型                                    绑定方式                                                       事件描述
                tap                                      bindtap 或 bind:tap                                       手指触摸后马上离开，类似于HTML中的click 事件
                input                                   bindinput 或 bind:input                                  文本框的输入事件
                change                               bindchange 或 bind:change                          状态改变时触发
        2 事件对象的属性列表
                当事件回调触发的时候，会收到一个事件对象 event，它的详细属性如下链接查看：
                        事件 | 微信开放文档
                其中，比较重要的属性是：target，detail
        3 target和currentTarget的区别
                target 是触发该事件的源头组件，而 currentTarget 则是当前事件所绑定的组件。举例如下：