微信小程序起步

微信小程序起步

什么是微信小程序？

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

为什么要使用微信小程序？

​ 在我们的日常生活中，每个人的手机里都安装了许多的应用app，这使得许多用户手机内存不够，而且每款应用都需要安装卸载很麻烦。但使用微信小程序后，用户就不用关心是否安装太多应用的问题。应用将无处不在，随时可用，而且又无需安装卸载。它能够满足简单的基础应用，适合生活服务类线下商铺以及非刚需低频应用的转换。微信小程序能够实现消息通知、线下扫码、公众号关联等七大功能。其中，通过公众号关联，用户可以实现公众号与微信小程序之间相互跳转。

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

1. 运行环境不同

   网页运行在浏览器环境中

   小程序运行在微信环境中

2. API 不同

   由于运行环境的不同，所以小程序中，无法调用 DOM 和 BOM 的 API。但是，小程序中可以调用微信环境提供的各种 API，例如：地理定位、扫码、支付

3. 开发模式不同

   网页的开发模式：浏览器 + 代码编辑器

   小程序有自己的一套标准开发模式：

   申请小程序开发账号

   安装小程序开发者工具

   创建和配置小程序项目

小程序开发前储备

小程序注册介绍

小程序官网

微信小程序开发工具下载

微信开发者工具详细使用

微信官方文档

开发小程序预先储备知识

• 1.Flex 布局

学习地址：http://www.runoob.com/w3cnote/flex-grammar.html

• 2.移动端相关知识

物理像素：

1. 屏幕的分辨率

2. 设备能控制显示的最小单元，可以把物理像素看成是对应的像素点

设备独立像素& css 像素：

​ 设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用并控制的虚拟像素(比如：CSS 像素,只是在 android 机中 CSS 像素就不叫”CSS 像素”了而是叫”设备独立像素”)，然后由相关系统转换为物理像素。

dpr：设备像素比，物理像素/设备独立像素 = dpr， 一般以 Iphon6 的 dpr 为准 dpr = 2

PPI: 一英寸显示屏上的像素点个数

DPI：最早指的是打印机在单位面积上打印的墨点数，墨点越多越清晰

• 移动端适配方案

viewport 适配

1. 为什么做 viewport 适配

​ a) 手机厂商在生产手机的时候大部分手机默认页面宽度为 980px

​ b) 手机实际视口宽度都要小于 980px，如: iphone6 为 375px

​ c) 开发需求： 需要将 980 的页面完全显示在手机屏幕上且没有滚动条

2. 实现：

   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   

rem 适配

1. 为什么做 rem 适配

​ a) 机型太多，不同的机型屏幕大小不一样

​ b) 需求： 一套设计稿的内容在不同的机型上呈现的效果一致，根据屏幕大小不同的变化，页面中的内容也相应变化

2. 实现：

   function remRefresh() {
   let clientWidth = document.documentElement.clientWidth; // 将屏幕等分 10 份
   let rem = clientWidth / 10;
   document.documentElement.style.fontSize = rem + 'px';
   document.body.style.fontSize = '12px'; }
   window.addEventListener('pageshow', () => {
   remRefresh()
   })
   // 函数防抖
   let timeoutId;
   window.addEventListener('resize', () => {
   timeoutId && clearTimeout(timeoutId);
   timeoutId = setTimeout(() =>{
   remRefresh()
   }, 300)
   })
   

   3.第三方库实现

   lib-flexible + px2rem-loader

小程序特点

1. 没有 DOM

2. 组件化开发： 具备特定功能效果的代码集合

3. 体积小，单个压缩包体积不能大于 2M，否则无法上线

4. 小程序的四个重要的文件

​ a) *.js

​ b) *.wxml —> view 结构 ----> html

​ c) *.wxss —> view 样式 -----> css

​ d) *. json ----> view 数据 -----> json 文件

5. 小程序适配方案: rpx (responsive pixel 响应式像素单位)

​ a) 小程序适配单位： rpx

​ b) 规定任何屏幕下宽度为 750rpx

​ c) 小程序会根据屏幕的宽度不同自动计算 rpx 值的大小

​ d) Iphone6 下： 1rpx = 1 物理像素 = 0.5px

小程序代码的构成

WXML 模板

1. 什么是 WXML

WXML（WeiXin Markup Language）是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作用类似于网页开发中的 HTML。

2. WXML 和 HTML 的区别

标签名称不同

HTML （div, span, img, a）
WXML（view, text, image, navigator）

属性节点不同

<a href="#">超链接</a>
<navigator url="/pages/home/home"></navigator>

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

数据绑定

列表渲染

条件渲染

WXSS 样式

1. 什么是 WXSS

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式，类似于网页开发中的 CSS。

2. WXSS 和 CSS 的区别

新增了 rpx 尺寸单位

• CSS 中需要手动进行像素单位换算，例如 rem
• WXSS 在底层支持新的尺寸单位 rpx，在不同大小的屏幕上小程序会自动进行换算

提供了全局的样式和局部样式

• 项目根目录中的 app.wxss 会作用于所有小程序页面
• 局部页面的 .wxss 样式仅对当前页面生效

WXSS 仅支持部分 CSS 选择器

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

JS 逻辑交互

1. 小程序中的 .js 文件

一个项目仅仅提供界面展示是不够的，在小程序中，我们通过 .js 文件来处理用户的操作。例如：响应用户的点击、获取用户的位置等等。

2. 小程序中 .js 文件的分类

小程序中的 JS 文件分为三大类，分别是：

app.js

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

页面的 .js 文件

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

普通的 .js 文件

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

小程序的启动过程

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

组件

小程序中组件的分类

小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了 9 大类，分别是：

• 视图容器
• 基础内容
• 表单组件
• 导航组件
• 媒体组件
• map 地图组件
• canvas 画布组件
• 开放能力
• 无障碍访问

1. 常用的视图容器类组件

view

普通视图区域

• 类似于 HTML 中的 div，是一个块级元素
• 常用来实现页面的布局效果

<view></view>

scroll-view

• 可滚动的视图区域
• 常用来实现滚动列表效果

例：

---wxml---
<scroll-view class="container1" scroll-y>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

---wxss---
.container1 view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;  
}
.container1 view:nth-child(1){
  background-color: lightgreen;
}
.container1 view:nth-child(2){
  background-color: lightskyblue;
}
.container1 view:nth-child(3){
  background-color: lightpink;
}
.container1{
  border: 1px solid red;
  width: 100px;
  height: 120px;
}

swiper 和 swiper-item

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

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	是否采用衔接滑动

例：

---wxml---
<swiper indicator-dots circular autoplay interval="2000">
	<swiper-item>
		<image url="图片存放路径"></image>
	</swiper-item>
  <swiper-item>
		<image url="图片存放路径"></image>
	</swiper-item>
</swiper>

---wxss---
swiper{
	height: 350rpx;
}
swiper image{
	width: 100%;
	height: 100%;
}

2. 常用的基础内容组件

text

• 文本组件
• 类似于 HTML 中的 span 标签，是一个行内元素

<text>HI</text>

rich-text

• 富文本组件
• 支持把 HTML 字符串渲染为 WXML 结构

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

3. 其它常用组件

button

• 按钮组件
• 功能比 HTML 中的 button 按钮丰富
• 通过 open-type 属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等）

<button form-type="submit">提交</button>
<button type="warn">警告</button>

image

• 图片组件
• image 组件默认宽度约 300px、高度约 240px

image 组件的 mode 属性

image 组件的 mode 属性用来指定图片的裁剪和缩放模式，常用的 mode 属性值如下：

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

navigator

• 页面导航组件
• 类似于 HTML 中的 a 链接

<navigator url="https://www.baidu.com/">百度一下</navigator>

API

小程序 API 概述

小程序中的 API 是由宿主环境提供的，通过这些丰富的小程序 API，开发者可以方便的调用微信提供的能力，例如：获取用户信息、本地存储、支付功能等。

小程序 API 的 3 大分类

小程序官方把 API 分为了如下 3 大类：

事件监听 API

• 特点：以 on 开头，用来监听某些事件的触发
• 举例：wx.onWindowResize(function callback) 监听窗口尺寸变化的事件

同步 API

• 特点1：以 Sync 结尾的 API 都是同步 API
• 特点2：同步 API 的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常
• 举例：wx.setStorageSync(‘key’, ‘value’) 向本地存储中写入内容

异步 API

• 特点：类似于 jQuery 中的 $.ajax(options) 函数，需要通过 success、fail、complete 接收调用的结果
• 举例：wx.request() 发起网络数据请求，通过 success 回调函数接收数据