小程序学习笔记

---

小程序-起步

手册网站

https://developers.weixin.qq.com/miniprogram/dev/framework/

1. 小程序介绍

01-小程序与普通页面开发区别

1. 运行环境不同

2. API不同

   无法调用DOM与BOM的API

   自己提供的API：地理定位，扫码，支付

3. 开发者模式不同

   申请小程序开发账号。安装小程序开发者工具，创建和配置小程序项目

2. 第一个小程序

01-注册账号

网站：https://mp.weixin.qq.com/

02-获取AppID

小程=>开发=>开发设置

3. 项目结构

01-了解项目的基本组成结构

1. pages：用来存放所有小程序页面
2. utils：用来存放工具性质的模块
3. app.js：小程序项目的入口文件
4. app.json：小程序项目的全局配置文件
5. app.wxss：小程序项目的全局样式文件
6. project.config.json：项目的配置文件
7. sitemap.json：用来配置小程序以及其页面是否允许被微信索引

02-小程序页面的组成部分

小程序官方建议所有小程序页面都放在pages项目中，以单独的文件夹存在

四个基本文件组组成

1. .js文件：页面的脚本文件
2. .json文件：当前文件的配置文件
3. .wxml文件：页面模板结构文件
4. .wxss文件：当前页面的样式文件

4. JSON配置文件

01-JSON配置文件的作用

JSON是一种数据格式，以配置文件形式存在

四种配置文件

1. app.json：项目根目录下的配置文件
2. project.config.json：项目根目录下的配置文件
3. sitemap.json：项目根目录下的配置文件
4. 每个页面文件夹下.json配置文件

02-app.json文件

app.json是当前小程序的全局配置，包括小程序的所有页面路径、窗口外观、页面表现、底部tab等

四个配置项作用

1. pages：用来记录当前小程序的所有页面路径
2. window：全局定义小程序所有页面的背景颜色、文字颜色等
3. style：全局定义小程序组件所使用的样式版本
4. sitemapLocation：用来指明sitemap.json的位置

03-project.config.json文件

project.config.json是项目配置文件，用来记录对小程序开发工具所做的个性化配置

1. setting：保存相关相关的配置
2. projectname：保存项目名称
3. appid：保存小程序账号ID

04-sitemap.json文件

sitemap.json用来配置小程序是否允许微信索引

05-新建小程序页面

app.json->pages中新增页面存放路径，小程序开发者工具会自动创建对应的页面文件

06-修改项目首页

app.json->pages数组中页面路径的前后顺序，即可修改目的首页

5. wxml模板

01-什么是wxml

WXML是小程序框架设计的一套标签语言，用来构件小程序页面的结构

02-wxml和html的区别

1. 标签名称不同

HTML（div，span，img，a）

WXML（view，text，image，navigator）

2. 属性节点不同

HTML：a里面的href跳转

wxml：navigator里面的url跳转

3. 提供了类似于Vue中的模板语法

数据绑定，列表渲染，条件渲染

6. wxss样式

01-什么是wxss

wxss是一套样式语言，用于描述wxml组件样式

02-wxss与css区别

1. 新增了rpx尺寸单位

css中需要手动进行像素单位换算，如rem

wxss在底层支持新的尺寸单位rpx，在不同大小的屏幕上小程序会自动进行换算

2. 提供了全局样式和局部样式
3. wxss仅支持部分css选择器

wxss支持的选择器

1. class和#id
2. element
3. 并集选择器、后代选择器
4. ::after 和 ::before等伪类选择器

7. 小程序中的js文件

01-js文件作用

小程序中，通过js文件来处理用户的操作。例如：响应用户的点击、获取用户的位置等等

02-js文件分类

三大类

1. app.js

是整个小程序项目的入口文件，通过调用App()函数来启动整个小程序

2. 页面的js文件

是页面的入口文件，通过调用Page()函数来创建并运行页面

3. 普通js文件

是普通的功能模块文件，封装公共的函数或属性供页面使用

8. 小程序的宿主环境

01-什么是宿主环境

宿主环境是程序运行所必须的依赖环境

Android和ios系统是两个不同的宿主环境，脱离了宿主环境的软件是没有任何意义的

02-小程序的宿主环境

手机微信是小程序的宿主环境

小程序借助宿主环境提供的能力，可以完成许多普通网页完成不了的功能

03-小程序宿主环境包含内容

1. 通信模型
2. 运行机制
3. 组件
4. API

04-通信模型

通信主体：渲染层和逻辑层

1. wxml和wxss工作在渲染层
2. js脚本工作在逻辑层

通信模型分为两部分，由微信客户端进行转发

1. 渲染层和逻辑层之间的通信
2. 逻辑层和第三方服务器之间通信

05-小程序的启动过程

启动分为五部分

1. 把小程序代码包下载到本地
2. 解析app.json全局配置文件
3. 执行app.js小程序入口文件，调用App()创建小程序实例
4. 渲染小程序首页
5. 小程序启动完成

06-页面渲染过程

分为四步

1. 加载解析页面的json配置文件
2. 加载页面的wxml模板和wxss样式
3. 执行页面js文件，调用Page()创建页面实例
4. 页面渲染完成

07-组件

小程序的组件也是由宿主环境提供的，分为9大类

1. 视图容器
2. 基础内容
3. 表单组件
4. 导航组件
5. 媒体组件
6. map地图组件
7. canvas画布组件
8. 开放能力
9. 无障碍访问

常用的视图容器类组件

1. view

普通视图区域

类似于div，是一个块级元素

常用来实现页面的布局效果

2. scroll-view

可滚动的视图区域

常用来实现滚动列表效果

3. swiper和swiper-item

轮播图容器组件和轮播图item组件

view组件的基本使用

实现flex横向布局效果

.container1 {
  display: flex;
  justify-content: space-around;
}

scroll-view组件的基本使用

<scroll-view class="container1" scroll-y>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>
//为了是竖向滚动时，必须给scroll-view一个固定的高度
.container1 {
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

swiper和swiper-item组件的基本使用

<swiper class="swiper-container">
  <!-- 第一项 -->
  <swiper-item>
    <view class="item">A</view>
  </swiper-item>
  <!-- 第二项 -->
  <swiper-item>
    <view class="item">B</view>
  </swiper-item>
  <!-- 第三项 -->
  <swiper-item>
    <view class="item">C</view>
  </swiper-item>
</swiper>

属性	类型	默认值	必填	说明
indicator-dots	boolean	false	否	是否显示面板指示点
indicator-color	color	rgba(0, 0, 0, .3)	否	指示点颜色
indicator-active-color	color	#000000	否	当前选中的指示点颜色
autoplay	boolean	false	否	是否自动切换
current	number	0	否	当前所在滑块的 index
interval	number	5000	否	自动切换时间间隔
circular	boolean	false	否	是否采用衔接滑动

常用基础内容组件

通过text组件的selectable属性，实现长按选中文本内容效果

<text selectable>12349201524</text>

通过rich-text组件的nodes属性节点，把HTML字符串渲染对应的UI结构

<rich-text nodes="<h1 style='color:red;'>标签</h1>"></rich-text>

其他组件

1. button

按钮组件

功能比HTML中的丰富

通过open-type属性可以调用微信提供的各种服务(客服、转发、获取用户权限、获取用户信息)

属性

size合法值	说明
mini	小尺寸
default	默认大小

type合法值	说明
primary	绿色
default	白色
warn	红色

属性	类型	值	必填	说明
plain	boolean	false	否	按钮是否镂空，背景色透明

2. image组件的基本使用

<image src="/"></image>

注意

1. image组件默认宽度320px、高度240px
2. image组件中二维码/小程序码图片不支持长按识别。仅在wx.previewImage中支持长按识别

mode属性用来指定图片的裁剪和缩放模式

合法值	说明	最低版本
scaleToFill	(默认)缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变	2.10.3

9. API

01-API概述

是由宿主环境提供的，可以方便调用微信提供的能力，eg：获取用户信息，本地存储，支付功能

02-API三大分类

1. 事件监听API

特点：以on开头，用来监听某些事件的触发

eg：wx.onWindowResize监听窗口尺寸变化的事件(wx相当于HTML的window)

2. 同步API

特点1：Sync结尾的都是同步API

特点2：同步API的执行结果可以通过函数返回值直接获取，如果执行出错会抛出异常

3. 异步API

特点：类似于jQuery的$.ajax(options)函数，通过success、fail、complete接受调用结果

协同工作和发布

1. 协同工作

01-了解权限管理需求

同一个小程序项目，一般会有不同岗位、不同角色的员工同时参与设计与开发

需要对不同岗位、不同角色的员工权限进行边界划分，使他们高效地进行协同工作

02-了解项目成员的组织结构

结构

1. 项目管理员
2. 产品组- 设计组 - 开发组 -测试组
3. 提需求-出设计方案-代码开发-项目测试

开发流程

1. 产品组：提出需求
2. 设计组：设计
3. 开发组：开发
4. 产品组、设计组：体验
5. 测试组：测试
6. 管理者：发布

2. 小程序成员管理

1. 成员管理两个方面

管理体现在管理员对小程序项目成员及体验成员的管理

2. 不同项目成员对应的权限
3. 开发者的权限说明

开发者权限：可使用小程序开发者工具及对小程序代码的功能进行代码开发

体验者权限：可使用体验版小程序

登录权限：可登录小程序管理后台，无需管理员默认

开发设置：设置小程序服务器域名、消息推送及扫描普通链接二维码打开小程序

腾讯云管理：云开发相关设置

3. 小程序版本

01-开发过程中的不同版本

1. 开发版本
2. 体验测试
3. 发布正式版

02-小程序的版本

1. 开发版本
2. 体验版本
3. 审核中的版本
4. 线上版本

4. 发布上线

01-整体步骤

1. 上传代码
2. 提交审核
3. 发布

02-上传

1. 点击开发者工具顶部工具栏的“上传”按钮
2. 填写版本号及项目备注

03-后台查看上传之后的版本

1. 登录小程序管理后台
2. 管理
3. 版本管理
4. 开发版本

04-提交审核

为了保证小程序质量，以及负荷相关规范

05-发布

收到小程序通过审核通知，在审核版本列表中，点击“发布”按钮，即可发布

06-基于小程序码进行推广

相对于普通二维码来说，小程序码优势

1. 样式上更加辨识度和视觉冲击力
2. 能够更加清晰的树立品牌形象
3. 可以帮助开发者更好推广小程序

获取小程序码的五个步骤

1. 登录小程序管理后台
2. 设置
3. 基本设置
4. 基本信息
5. 小程序码及线下物料下载

运营数据

查看小程序运营数据两种方式

1. 在小程序后台查看
2. 使用小程序数据助手查看

模板与配置

1. 数据绑定

01-数据绑定基本原则

1. data中定义数据
2. wxml中使用数据

02-data中定义页面的数据

在页面js文件中，把数据定义到data对象中即可

03-Mustache语法格式

把data中的数据绑定到页面中渲染，使用Mustache语法（双大括号）把变量包起来

<view>{
  {要绑定的数据名称}}</view>

04-Mustache语法应用场景

1. 绑定内容
2. 绑定属性
3. 运算（三元运算、算术运算等）

05-动态绑定内容

<view>{
  {要绑定的数据名称}}</view>

<image src="{
  {imgSrc}}"></image>

06-三元运算

data: {
    randomNum1: Math.random() * 10
    
  }
  
//输出

<view>{
  {randomNum1 >= 5 ? '数字大于或等于5' : '数字小于5'}}</view>

07-算数运算

 data: {
    randomNum2: Math.random().toFixed(2)
  }
 //输出
 
 <view>{
  {randomNum2 * 100}}</view>

事件绑定

1. 什么是事件

事件是渲染层到逻辑层的通讯方式，通过事件可以将用户渲染层产生的行为，反馈到逻辑层进行业务处理

2. 小程序中的事件

类型	触发条件	最低版本
touchstart	手指触摸动作开始
touchmove	手指触摸后移动
touchcancel	手指触摸动作被打断，如来电提醒，弹窗
touchend	手指触摸动作结束
tap	手指触摸后马上离开
longpress	手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发	1.5.0
longtap	手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
transitionend	会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart	会在一个 WXSS animation 动画开始时触发
animationiteration	会在一个 WXSS animation 一次迭代结束时触发
animationend	会在一个 WXSS animation 动画完成时触发
touchforcechange	在支持 3D Touch 的 iPhone 设备，重按时会触发	1.9.90

常用事件

类型	绑定方式	事件描述
tap	bindtap或bind: tap	手指触摸后马上离开，类似click事件
input	bindinput或bind: input	文本框输入事件
change	bindchange或bind: change	状态改变时触发

3. 事件对象的属性列表

• type string 事件类型
• timeStamp inerger 页面打开到触发事件所经过的毫秒数
• target object 触发事件的组件的一些属性值集合
• currentTarget object 当前组件的一些属性值集合
• detail object 额外的信息
• touches array 触摸事件，当前停留在屏幕中的触摸点信息的数组
• changedTouches array 触摸事件，当前变化的触摸点信息的数组

4. target和currentTarget区别

target是触发该事件的源头组件

currentTarget是当前事件所绑定事件的组件

5. bindtap语法格式

小程序中不存在HTML中的onclick鼠标点击事件，而是通过tap事件来响应用户触摸行为

1. 通过bindtap，可以为组件绑定tap事件

<button type="primary" bindtap="btnTapHandler">按鈕</button>

2. 在页面js文件中定义对应的事件处理函数，事件参数通过形参evnet(一般写成e)来接收

$$

$$

btnTapHandler(e){
    console.log(e);
  },

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

通过this.setData(dataObject)方法，可以给页面data中数据重新赋值

<button type="primary" bindtap="CountChange">+1</button>

CountChange(e) {
    // console.log('ok');
    this.setData({
      count: this.data.count + 1
    })
  },

7. 事件传参

小程序事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数

可以为组件提供data-* 自定义属性传参，其中*代表的是参数的名字

<button bindtap="btnTapHandler" data-info="{
  {2}}">按鈕</button>

最终

1. info会被解析为参数名字
2. 数值2会解析成参数值

在事件处理函数中，通过event.target.dataset.参数名，即可获取到具体参数的值