前端笔记：微信小程序学习笔记

#目录

[TOC]

---

一、初识微信小程序

1、什么是微信小程序

Ⅰ-小程序历史

1. 2017 年度百度百科十大热词之一
2. 微信小程序，简称小程序，英文名 Mini Program，是一种不需要下载安装即可使用的应用 (张小龙对其的定义是无需安装,用完即走,实际上是需要安装的,只不过小程序的体积特别小,下载速度很快,用户感觉不到下载的过程 )
3. 小程序刚发布的时候要求压缩包的体积不能大于 1M,，否则无法通过，在2017年4月做了改进，由原来的1M提升到2M；
4. 2017年1月9日0点，万众瞩目的微信第一批小程序正式低调上线。

Ⅱ-小程序的优势

1. 微信有海量⽤⼾，⽽且粘性很⾼，在微信⾥开发产品更容易触达⽤⼾；
2. 推⼴app 或公众号的成本太⾼。
3. 开发适配成本低。
4. 容易⼩规模试错，然后快速迭代。
5. 跨平台。

2、小程序准备

Ⅰ-环境准备

1. 安装微信小程序开发工具,建议安装稳定版进行开发
2. 注册小程序账号
3. 使用注册的appid进行使用，如果是测试号会限制很多功能

在官网登录成功后可以看到下面的界面，然后复制你的APPID,悄悄的保存起来，不要给别⼈看到。

Ⅱ-新建小程序流程

1. 打开开发者工具，第一次打开需要扫码登陆
2. 新建小程序项目

3. 填写项目信息

4. 新建成功

Ⅲ-微信开发者工具介绍

1）开发工具界面图解

详细的使⽤，可以查看官⽹:

2）开发工具的一些基本配置

1. 点击工具栏–>详情–>本地设置，除了默认勾选，需要勾选其他的几个如：增强编译、不校验合法域名…

2. 常用快捷键keyMap修改设置(本人习惯记录)：
3. ctrl+P：全局搜索
4. alt+/or shift+j:代码提示
   

Ⅳ-微信小程序名称或者原始id该如何找回？

问题描述：很久没有进行开发了，小程序的名称跟原始id都忘记了，找回需要先填写,如何解决

解决：首先[查询自己的原始id](https://developers.weixin.qq.com/community/develop/doc/000ea0f82d4f58b41589642b456809),在这个网站能查询到自己的原始id，再通过这个原始id进行找回

---

二、小程序的基本目录结构与文件作用剖析

小程序框架的⽬标是通过尽可能简单、⾼效的⽅式让开发者可以在微信中开发具有原⽣APP体验的服务。

⼩程序框架提供了⾃⼰的视图层描述语⾔ WXML 和 WXSS ，以及 JavaScript ，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

1、小程序文件结构和传统web对比

1. 通过以上对⽐得出传统web是三层结构。⽽微信⼩程序是四层结构，多了⼀层配置.json
2. 当这几个文件在同一级目录下且命名相同(后缀不同),可以互相引用却不用导入

	传统web	微信小程序
项目骨架、结构	HTML	WXML
页面样式	CSS	WXSS
项目逻辑	Javascript	Javascript
配置	无	JSON

2、基本的项目目录

Ⅰ-项目目录解释

1. 项目目录图解:

2. 以app开头的文件是应用程序级别的文件,更改一处全局生效。而页面pages的配置优先级高于全局配置(就近原则)
3. 小程序是允许你修改文件目录名的

3、小程序配置文件

⼀个⼩程序应⽤程序会包括最基本的两种配置⽂件。⼀种是全局的app.json 和 ⻚⾯⾃⼰的page.json

Ⅰ-全局配置app.json

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

 {
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
 ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
 }
}

3. 字段的含义
   1）pages 字段⸺⽤于描述当前⼩程序所有⻚⾯路径，这是为了让微信客⼾端知道当前你的⼩程序⻚⾯定义在哪个⽬录。

默认显示此字段中的第一项

2）window 字段⸺定义⼩程序所有⻚⾯的顶部背景颜⾊，⽂字颜⾊定义等。

3）完整的配置信息请参考 app.json配置

4. tabBar-底部 tab 栏的表现:
   

更多配置详细请看[app配置文档](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html)

Ⅱ-页面配置page.json

1. 这⾥的 page.json 其实⽤来表⽰⻚⾯⽬录下的 page.json 这类和⼩程序⻚⾯相关的配置。 开发者可以独⽴定义每个⻚⾯的⼀些属性，如顶部颜⾊、是否允许下拉刷新等等。 ⻚⾯的配置只能设置 app.json 中部分 window 配置项的内容，⻚⾯中配置项会覆盖 app.json 的 window 中相同的配置项。
2. 常用配置属性列举:

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜⾊，如 #000000
navigationBarTextStyle	String	white	导航栏标题颜⾊，仅⽀持 black / white
navigationBarTitleText	String		导航栏标题⽂字内容
backgroundColor	HexColor	#ffffff	窗⼝的背景⾊
backgroundTextStyle	String	dark	下拉loading的样式，仅⽀持 dark / light
enablePullDownRefresh	Boolean	false	是否全局开启下拉刷新。 详⻅ Page.onPullDownRefresh
onReachBottomDistance	Number	50	⻚⾯上拉触底事件触发时距⻚⾯底部距离，单位为px。 详⻅ Page.onReachBottom
disableScroll	Boolean	false	设置为 true 则⻚⾯整体不能上下滚动；只在⻚⾯配置中有效，⽆法在 app.json 中设置该项

Ⅲ-sitemap 配置-了解即可

⼩程序根⽬录下的 sitemap.json ⽂件⽤于配置⼩程序及其⻚⾯是否允许被微信索引。主要服务于搜索

4、小程序框架接口

Ⅰ-App(Object object)

1. 注册小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。
2. App() 必须在 **app.js** 中调用，必须调用且只能调用一次。不然会出现无法预期的后果
3. 相应的app()参数在下方的小程序生命周期中有指出

**AppObject ****getApp(Object object)**

1. 获取到小程序全局唯一的 App 实例。
2. 代码示例

// other.js
var appInstance = getApp()
console.log(appInstance.globalData) // I am global dat
//或者
const {GbaseUrl} =getApp()  //GbaseUrl是自己在app.js定义的全局变量

3. Object object

属性	类型	默认值	必填	说明	最低版本
allowDefault	boolean	false	否	在 App 未定义时返回默认实现。当App被调用时，默认实现中定义的属性会被覆盖合并到App中。一般用于独立分包	2.2.4

4. 注意

• 不要在定义于 App() 内的函数中，或调用 App 前调用 getApp() 。使用 this 就可以拿到 app 实例。
• 通过 getApp() 获取实例之后，不要私自调用生命周期函数

---

三、小程序的基础知识储备

整个小程序学习过程中遇到的 所需基础知识 或 补充知识 将整合至此

相关知识点本人在一二阶段补缺笔记中有记录,在此便只举例大概,不详细记录

1、Flex 布局

Ⅰ-基本知识点概念

1. Flex基本概念
2. Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
3. 任何一个容器都可以指定为 Flex 布局。
4. display: ‘flex’

4. 这部分是一阶段基础知识,可看文档学习

2. 在小程序中,通常使用代替
   作为容器来做布局–>代码示例在第一章的第三小节第三点

Ⅱ-解决flex布局中 space-between方法的排版问题

详见下方杂记-初学阶段遇到的问题与解决-问题Ⅷ

2、移动端相关知识点

自行补充学习,相关知识点本人在一二阶段补缺笔记中有记录,便不再赘述

Ⅰ-物理像素

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

Ⅱ-设备独立像素 、 css 像素

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

Ⅲ-dpr比 、DPI 、PPI

1. 概念
2. dpr: 设备像素比，物理像素/设备独立像素 = dpr， 一般以 Iphon6 的 dpr 为准 dpr = 2
3. PPI: 一英寸显示屏上的像素点个数
4. DPI：最早指的是打印机在单位面积上打印的墨点数，墨点越多越清晰

2. 不同机型对比表

3. 部分机型图示

3、移动端适配方案

相关知识点本人在一二阶段补缺笔记中有记录,想详细查阅可以去看,这是个面试考点

Ⅰ-viewport 适配

1. 为什么做 viewport 适配 ?
   a) 手机厂商在生产手机的时候大部分手机默认页面宽度为 980px
   b) 手机实际视口宽度都要小于 980px，如: iphone6 为 750px
   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

---

四、视图层详解

框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。

将逻辑层的数据反映成视图，同时将视图层的事件发送给逻辑层。

WXML(WeiXin Markup language) 用于描述页面的结构。

WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

WXSS(WeiXin Style Sheet) 用于描述页面的样式。

组件(Component)是视图的基本组成单元。

该部分将截取官方文档并加以注解

1、WXSS样式文件详解

1. WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。
2. WXSS 用来决定 WXML 的组件应该怎么显示。

为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

3. 与 CSS 相比，WXSS 扩展的特性有：
4. 响应式⻓度单位:即尺寸单位 -->rpx
5. 样式导入

4. 注意:

当页面文件在同一级目录下且命名相同(后缀不同),可以互相引用却不用导入

Ⅰ-尺寸单位

1. rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

2. 建议与注意点:
3. 开发微信小程序时推荐设计师可以用iPhone6作为视觉稿的标准–>即只有在iPhone6标准中才可以一比二换算,更方便
4. 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况

Ⅱ-样式导⼊

1. 使用@import语句可以导入外联样式表,也可以和less中的导⼊混⽤，@import后跟需要导入的外联样式表的相对路径(只⽀持相对路径)，用;表示语句结束。

/** common.wxss **/
.small-p {
  padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

Ⅲ-内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

1. style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度

<view style="color:{{color}};" />

2. class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔

<view class="normal_view" />

2、WXML语法详解

WXML（WeiXin Markup Language）是框架设计的⼀套标签语⾔，结合基础组件、事件系统，可以构建出⻚⾯的结构。

该部分将截取官方文档加以自己见解说明,同学们也可以直接去看文档

Ⅰ-数据绑定与写法规则

1. WXML 中的动态数据均来自对应 Page 的 data。
2. Mustache 语法{{}}视作运算标记,里面的内容表示表达式

1) 单向简单数据绑定

1. 此处是单向绑定(数据驱动视图),双向绑定出现的场景如(input等)将在下方四-3、双向绑定处记录
2. 简单绑定:数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：

//pages.wxml
 {{ message }} 

// pages.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

3. 绑定boolean类型(需要在双引号之内)

true：boolean 类型的 true，代表真值。false： boolean 类型的 false，代表假值。

_特别注意：不要直接写 _**_checked="false"_**，其计算结果是一个字符串，转成 boolean 类型后代表真值

2) 运算

可以在 {{}} 内进行简单的运算，支持的有如下几种方式：

1. 三元运算

2. 算数运算

 {{a + b}} + {{c}} + d 
//view中的内容为 `3 + 3 + d`。
//pages.js
Page({
  data: { a: 1, b: 2, c: 3
  }
})

3. 逻辑判断

4. 字符串运算

{{"hello" + name}}
Page({
  data:{name: 'MINA}
})

5. 数据路径运算

{{object.key}} {{array[0]}}
//view中的内容为 hello  MINA
Page({
  data: {
    object: {
      key: 'Hello '
    },
    array: ['MINA']
  }
})

3) 组合

也可以在 Mustache 内直接进行组合，构成新的对象或者数组。

1. 数组 --> 最终组合成数组[0, 1, 2, 3, 4]。

 {{item}} 
Page({
  data: { zero: 0 }
})

2. 对象 -->
3. 最终组合成的对象是 {for: 1, bar: 2}

Page({
  data: {a: 1, b: 2}
})

2. 也可以用扩展运算符 ... 来将一个对象展开–>最终组合成的对象是 {a: 1, b: 2, c: 3, d: 4, e: 5}。

Page({
  data: {
    obj1: { a: 1, b: 2 },
    obj2: { c: 3, d: 4}
  }
})

3. 如果对象的 key 和 value 相同，也可以间接地表达。–>最终组合成的对象是 {foo: 'my-foo', bar:'my-bar'}

Page({
  data: {
    foo: 'my-foo',
    bar: 'my-bar'
  }
})

4. 注意：上述方式可以随意组合，但是如有存在变量名相同的情况，后边的会覆盖前面 --> 最终组合成的对象是 {a: 5, b: 3, c: 6}。

Page({
  data: {
    obj1: { a: 1,  b: 2},
    obj2: { b: 3, c: 4},
    a: 5
  }
})

5. 注意： 花括号和引号之间如果有空格，将最终被解析成为字符串

  
    {{item}}
  
  等同于
                        
  
    {{item}}
  

4) 自定义属性data-*的命名与使用

1. 同一容器中可以存在多个data-*
2. 凡是以data-开头的数据,都会在event的currentTarget中体现,且回缺省data-(data-id --> id)
3. data-*后面接的单词将自动转换 第一个单词首字母小写,第二个及之后的单词首字母大写 (data-post-my-id --> postMyId)

Ⅱ-列表渲染

1) wx:for

1. 在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
2. 默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
3. 使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名：

  {{idx}}: {{itemName.message}}

4. wx:for 也可以嵌套，下边是一个九九乘法表

  
    
      {{i}} * {{j}} = {{i * j}}
    
  

2) block wx:for

类似 block wx:if，也可以将 wx:for 用在标签上，以渲染一个包含多节点的结构块。例如：

  {{index}}: 
  {{item}} 

注意： 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性

3) wx:key

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

① wx:key 的值以两种形式提供

1. 字符串，代表在for循环的array中item的某个property，该property的值需要是列表中唯一的字符串或数字，且不能动态改变。
2. 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

//id是posts数组中的对象里的一个属性

②使用 wx:key 的意义

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

4) 列表渲染注意点

① 当 wx:for 的值为字符串时，会将字符串解析成字符串数组

 {{item}}

等同于


 {{item}}

② 花括号和引号之间如果有空格，将最终被解析成为字符串

 {{item}}

等同于


 {{item}}

Ⅲ-条件渲染

1) wx:if

1. 在框架中，使用 wx:if="" 来判断是否需要渲染该代码块：

 True 

2. 也可以用 wx:elif 和 wx:else 来添加一个 else 块:

 1 
 2 
 3 

2) block wx:if

因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 标签将多个组件包装起来，并在上边使用 wx:if 控制属性

  view1 
  view2 

注意： 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性

3) wx:if vs hidden

1. 因为 wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。
2. 同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。

相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

3. 一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

Ⅳ-模板

1. WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用
2. 模板拥有自己的作用域，只能使用 data 传入的数据以及模板定义文件中定义的 模块。

1) 定义模板

使用 name 属性，作为模板的名字。然后在