微信小程序学习笔记(黑马)

1. 小程序-起步

1.1 小程序简介

1.1.1 小程序与普通网页开发的区别

1. 运行环境不同：网页运行在浏览器环境中，小程序运行在微信环境中
2. API不同：由于运行 环境的不同，小程序无法调用DOM和BOM的API
3. 开发模式不同：网页的开发模式–>浏览器+代码编辑器；小程序的开发模式–>申请小程序开发账

1.2 第一个小程序

1. 注册小程序开发账号：使用浏览器打开: https://mp.weixin.qq.com 网址，点击右上角的"立即注册"，即可进入小程序开发账号的注册流程，完成相关流程。
2. 获取小程序的AppID：扫码登入网址后->点击开发->开发设置->AppID
3. 下载开发者工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html
4. 安装成功后，扫码登录

1.3 小程序代码的构成

1.App.json 文件

app.json是当前⼩程序的全局配置，包括了⼩程序的所有⻚⾯路径、界⾯表现、⽹络超时时间、底部tab等。普通快速启动项⽬⾥边的app.json配置

字段的含义:

• pages字段⽤于描述当前⼩程序所有⻚⾯路径，这是为了让微信客⼾端知道当前你的⼩程序⻚⾯定义在哪个⽬录。
• window字段定义⼩程序所有⻚⾯的顶部背景颜⾊，⽂字颜⾊定义等。
• style：全局定义小程序组件所使用的样式版本
• sitemapLocation：用来指明sitemap.json的位置

2. sitemap.json文件

 sitemap的索引提示是默认开启的，如需要关闭sitemap的索引提示，可在小程序项目配置文件project.config.json的setting中配置字段checkSiteMap为false

3.页面的.json文件 

 页面中的配置会覆盖app.json的window中相同的配置项

1.4 小程序的宿主环境 

 1.4.1 什么是宿主环境

  宿主环境：指的是程序运行所必须的依赖环境，脱离了宿主环境的软件是没有任何意义的

 1.4.2 小程序的宿主环境

​ 手机微信就是小程序的宿主环境，小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能

1.4.3 小程序宿主环境包含的内容

1. 通信模型

• 小程序通信的主体是逻辑层和渲染层，其中：WXML模板和WXSS样式工作在渲染层，JS脚本工作在逻辑层
• 小程序的通信模型：逻辑层和渲染层之间的通信(由微信客户端进行转发)；逻辑层和第三方服务器之间的通信(由微信客户端进行转发)

    2.运行机制

• 小程序启动过程：下载代码包到本地–>解析app.json全局配置文件–>执行app.js小程序入口文件，调用App()创建小程序实例–>渲染小程序首页–>小程序启动完成
• 页面渲染过程：加载解析页面的.json配置文件–>加载页面的.wxml模板和.wxss样式–>执行页面的.js文件，调用Page()创建页面实例–>页面渲染完成

    3.组件

容器类组件：view(普通视图区域，类似于div，是块级元素，用来实现页面的布局效果)；scroll-view:(可滚动的视图区域，常用来实现滚动列表效果)；swiper和swiper-item(轮播图组件和轮播图item组件)

如下是swiper的属性：

• 基础类组件：text(文本文件，类似于span，是行内元素，text的selectable属性，实现长按选中文本内容)；rich-text(富文本文件，通过组件的nodes属性结点，把HTML字符串渲染为对应的UI结构)

       nodes属性设置：<rich-text nodes="<h1 style='color:red'>提示</h1>"></rich-text>

•  button(按钮组件，通过open-type属性可以调用微信提供的各种功能)

•  img(图片组件，默认width=300px,height=240px，支持懒加载) 

•  navigator(页面导航组件，类似于a标签)

4. API 

• 事件监听API：以on开头，用来监听某些事件的触发，如：wx.onWindowResize(function callback)监听窗口尺寸变化的事件
• 同步API：以Sync结尾的API，同步API的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常，如：wx.setStorageSync(‘key’,‘value’) 向本地存储中写入内容
• 异步API：类似jquery中的**$.ajax(options)**函数，需要通过success、fail、complete接收调用的结果，如：wx.request() 发起网络数据请求，通过success回调函数接收数据

2. 小程序-模板与配置

2.1 使用WXML模板语法渲染页面结构

2.1.1 数据绑定

1. 数据绑定的基本原则

• 在data中定义数据
• 在WXML中使用数据

    2.在data中定义页面的数据：在页面对应的js文件中，把数据定义到data对象中即可

  3. Mustache语法的格式：把data中的数据绑定到页面中渲染，使用Mustache语法(双大括号)将变量包起来即可

 <view>{ {info}}</view>

 4.Mustache语法的应用场景：绑定内容、绑定属性、运算

 5.动态绑定内容：<view>{ {info}}</view>

 6.动态绑定属性

 7.三元运算：<view hidden="{ {flag ? true : false}}"> Hidden </view>

 8.算数运算：randomNum:Math.random().toFixed(2)

2.1.2 事件绑定 

1. 常用事件

   2.事件对象的属性列表

 

 其中，target是触发该事件的源头组件，而currentTarget则是当前事件所绑定的组件

3.bindtap的语法格式 

 4.在事件处理函数中为data中的数据赋值 

 通过调用this.setData(dataObject)方法，可以给页面data中的数据重新赋值，实例如下

5.事件传参

不能在绑定事件的同时为事件处理函数传递参数，可以通过为组件提供data-*自定义属性传参，其中的*代表的是参数的名字，在事件处理函数中，可以通过even.target.dataset.参数名即可获取到具体参数的值，实例代码如下：

 注意：data-后面的参数不能写驼峰

 6.bindinput的语法格式

7. 实现文本框