【万字长文】你的微信小程序入门了吗 ？

微信小程序从零入门的文章实暂时就到这里了，还有一个生命周期的内容，感觉当初整理的不是很好就不写了，主要最近时间有点紧张，没时间改....

学完了 WXML、WXSS、一些常用组件，还有事件绑定，其实一个较为不错的页面已经能自己搭建出来了，如果你还想继续往后面研究，就可以开始看 与后台交互的内容了，发送异步请求，对数据进行回显等，回显内容时，你就又可以开始考虑用什么别的组件，可以让页面的数据加载或者观看更加顺滑，美观，当然有很多小伙伴都是后端，所以，可以自己搭个后台，试着弄用户登录授权这块，这块算是小程序一个重要的点，要好好研究一下，以后要做的事情，就和传统的后端基本一样了。我的文章都是根据官网写的原生写法，当然你也可以看一下一些小程序框架，或者看一看 ES6 的内容，毕竟我也是个后端，也没细细研究前端的内容

再接着就可以自己动手写点东西了，不会的组件或者内容就去查官方文档，查别人的博客，写着写着，就发现又认识了 N 个 东西，或许你就会用到 模板、swiper，然后自然而然的对小程序的生命周期有了一定的认识等等

可能在一定意义上，能自己手写一个不算太简陋的项目，才算真的入门了是不，啊哈哈哈

【微信小程序出发】

(一) 准备工作

(1) 登录注册

• 注册账号：这就不谈了，只需要注意使用一个全新的邮箱，别之前注册过公众号小程序等就可以了

  • https://mp.weixin.qq.com/wxopen/waregister?action=step1

• 登录账号：通过邮箱密码登录，亦或者绑定微信后使用扫码也是可以的

  • https://mp.weixin.qq.com/

(2) 获取 APPID

登录后，在开发入门的阶段有一个比较重要的内容需要了解，那就是 APPID，很好理解，就是这个小程序的唯一标识，就类似我们的身份证，登录后首页左侧栏选择【开发】，跳转后，选择【开发设置】就可以看到我们的 APPID

这个 APPID 要记好哈，在刚开始学习的时候，就会使用到

(3) 下载工具

在官网选择一个合适的版本进行下载，这就是我们小程序的编译器，这里我选择的是开发版，不过选择稳定版也是可以的，针对入门并没有太大的区别，不过稳定版可能出现的小毛病会少一些

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

安装好后，直接提示扫码登录，接着就是点击左侧【小程序】，然后点击右侧【新建】（一个大加号）填写一些基本的信息

• 项目名称和目录：自己看着弄就可以了
• APPID：之前页面中找到的 APPID 在这个时候就可以用的上了，虽然你使用测试号也是可以进入的，到底后面还是要用自己的 ID 的。
• 开发模式：小程序
• 后端服务：不使用云服务，前面还是以学习小程序本身为主，不使用此选项
• 语言：JavaScript 和 Typescript，根据自身的熟悉程序选择即可

新建后，第一个小程序就完事了哈~

(二) 初识小程序

(1) 界面总览

下面的区域就是一个初始化新建好的项目界面了，图片中标的很清楚，每一块的具体内容，第一次创建项目时，也可以在设置的通用设置中将默认的的工作区以及主题（浅色还是深色）根据自己的需要修改

说明：直接在小程序官方的工具中编写代码也可以，不过我个人选择配合 vscode 或 sublime 进行代码的编辑，在微信官方开发工具或者那个查看结果以及控制台的一些信息

(2) 文件类型

与传统的网页开发有一丝小不同，微信小程序重新定义了它的描述语言，例如 wxml、wxss 等，同时还额外提供了一层 JSON 的配置文件

wxml（页面结构文件）

• 用来书写、构建页面，类似传统网页开发的 HTML

wxss（样式表文件）

• 用于制定页面样式，从而美化页面，类似传统网页开发的 CSS

js（脚本文件）

• 用于指定一定页面交互逻辑，就是 Javascript

json（静态数据配置文件）

• JSON 格式的配置文件，设置程序的一些配置效果

(3) 结构目录

A：总体介绍

通过官方开发工具或者vscode等其他编辑器，你可以看到，新建一个项目后，会默认生成一个初始化的项目结构，里面含有很多文件，其后缀格式都是我们上面介绍过的

下面我们针对一些主要的内容进行一个基本的介绍

├── pages                             // 页面文件夹
|    ├── index                            // 首页
│   |    ├── index.js                  // 首页逻辑脚本文件
│   |    ├── index.json                  // 首页配置文件
│   |    ├── index.wxml                    // 首页页面结构文件
│   |    ├── index.wxss                  // 首页样式文件

|    ├── logs                            // 日志页面
│   |    ├── logs.js                        // 日志页面逻辑脚本文件
│   |    ├── logs.json                  // 日志页面配置文件
│   |    ├── logs.wxml                    // 日志页面页面结构文件
│   |    ├── logs.wxss                  // 日志页面样式文件

|    ├── utils                            // 工具js文件（第三方，可删除）
│   |    ├── util.js                        // 日志页面逻辑脚本文件

│   ├── app.js                          // 项目的全局脚本文件
│   ├── app.json                      // 项目的全局配置文件
│   ├── app.wxss                      // 项目的全局配置文件
│   ├── project.config.json              // 项目的开发者工具的配置
│   ├── sitemap.json                  // 索引配置文件

具体的一些例如 wxml wxss 等的用法，会在后面提到，这里我们还要提一下两个内容：

A：针对说明

app.js：项目的入口文件，用来创建应用程序的对象，处理程序的生命周期

app.json：项目全局的配置文件，涉及到了页面的路径，界面/窗口 的表现时间，网格超时的时间，还有小程序底部的 tab 等等，还是非常重要的，初始化新建项目后，可以看到如下pages 字段和 windows 字段

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

• pages 字段，是关于页面路径的，也就是给客户端说明出你小程序页面到底在哪里
• window 字段，对应 页面的颜色、标题等等
• tabbar 字段，底部 tab 栏（切换页面）

贴一段官网关于tabbar的说明（官网的说明确实很可！）：

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

属性	类型	必填	默认值	描述
color	HexColor	是		tab 上的文字默认颜色，仅支持十六进制颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色，仅支持十六进制颜色
backgroundColor	HexColor	是		tab 的背景色，仅支持十六进制颜色
borderStyle	string	否	black	tabbar 上边框的颜色， 仅支持 black / white
list	Array	是		tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab
position	string	否	bottom	tabBar 的位置，仅支持 bottom / top
custom	boolean	否	false	自定义 tabBar，最低需要 2.5 版本

而一般我们想要设置出常见的效果就会选择使用 list 进行配置

属性	类型	必填	说明
pagePath	string	是	页面路径，必须在 pages 中先定义
text	string	是	tab 上按钮文字
iconPath	string	否	图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 当 position 为 top 时，不显示 icon。
selectedIconPath	string	否	选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px 81px，不支持网络图片。 当 position 为 top 时，不显示 icon。*

给大家举个例子，书写的格式就是这样的，别忘了制定了 tabbar 一定要有在pages中设置对应的页面哦

"tabBar": {
    "color": "#999",
    "selectedColor": "#ff2d4a",
    "backgroundColor": "#fafafa",
    "position": "bottom",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "icons/home.png",
        "selectedIconPath": "icons/home.png"
      },
      {
        "pagePath": "pages/user/index",
        "text": "我的",
        "iconPath": "icons/my.png",
        "selectedIconPath": "icons/my.png"
      }
    ]
  },

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。同样的，也有很多配置内容，看一下官网就可以了

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

—————分割线—————

【WXML 常用语法】

(一) WXML 是什么

官方说明：WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构

在前面我们就已经提过，WXML，就可以理解为我们传统页面中的HTML，它是微信为我们提供的一套标签语言，可以说它就是我们小程序的脸面（虽然没经过CSS装饰前不一定光鲜亮丽），开发中 WXML 页面就作为我们一些逻辑行为的入口，以及效果展示的承载者。

再大白话一点：你所看到的小程序页面长什么样（不涉及背后做了什么行为，只说表面），就是 WXML（主要） + WXSS （美化） 实现的

这一篇，我们主要涉及到的是 WXML 中例如数据绑定、或者运算等等，但是学习之前，很显然，我们需要认识几个常见的标签，后面我们会总结一些常用的标签，下面会用到的有：

、 > 还有一些标签，大家去看官网文档就可以了，写的非常清楚，我们这里重点还是说一下关于其中的一些标签语法问题

官网——WXML语法文档

https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/

官网——组件文档

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

这是text标签1
这是text标签2


这是div标签1
这是div标签2


  
  

看一下效果

(二) 数据绑定

虽然还不涉及到什么页面的美化，以及复杂的标签，不过一个极为简单的静态页面现在已经可以构造出来了，归根结底，我们最后都是要进行前后台数据的交互的，而微信小程序就为我们提供了很多很好用的用法，能很快的进行数据的绑定操作

有一个前提条件，我们先模拟一些数据，我们只需要在页面的 js 文件中的 data对象中定义小程序初始化的数据，例如下面代码，我们随便拿一些常见的数据类型来模拟一下

Page({
  /**
   * 页面的初始数据
   */
  data: {
    msg: "你好，微信小程序",
    status: 100,
    isLogin: true,
    person:{
      name: "张三",
      age: 22,
      profession: "student"
    },
    isChecked: true
  },
})

(1) 常见类型普通写法

如何在 WXML 标签组件中进行数据的绑定其实是非常简单的，微信小程序中通过 {{}} 来解析刚才在 JS 中模拟的变量

要注意：直接通过 {{}} 解析的变量都是 页面 js 文件中 Page --> data 下的

A：字符串

字符串内容直接用两个大括号括住接收就可以了，在上面我们有这样的定义：

msg: "你好，微信小程序", 所以直接括住 msg 就可以获取到后面的值了

{{msg}}

B：数值

数值也是一样直接可以获取

{{status}}

C：布尔类型

布尔类型第一个代码是直接打印出其布尔类型 true 或者 false

{{isLogin}}

而下面配合 checkbox 就可以实现是否选中的效果

D：对象

对象这块如果你直接打印 person 就会输出一个 Object 类型，所以如果想要拿到对象的属性值，一定要指定到具体的属性

{{person.name}}
{{person.age}}
{{person.profession}}

看一下上述所有的绑定效果

(2) 组件属性中

例如我们 view 组件的 id 值前缀是固定的 user- 后面就是用户的序号，这时候就可以通过变量来进行巧妙的解析到属性中了

注：不要轻易的乱加空格，否则可能会读取失败例如：

看一下 Wxml 的源码 id 这个属性中已经进行了拼接，这种方式同样还会常用在 class 或者 style 中，配合三元运行能不错的实现一些需求，下面我们会提到

(三) 运算

首先我们依旧定义一些数据，三个整数，和两个字符串

Page({
  data: {
    a: 11,
    b: 22,
    c: 33,
    msg: "姓名",
    name: "张三"
  },
})

(1) 算数运算

直接在 {{}} 中进行 加减乘除等的运算，直接就可以得到结算的结果，例如：

{{a + b + c}}
{{a + b}} + {{c}}

(2) 字符串运算

如果是字符串类型的数据，利用 + 进行运算，结果是一个拼接的效果

{{'a' + 'b' + 'c'}}
{{'11' + '22' + '33'}}
{{msg + '：' +name}}

(3) 逻辑判断

这个就是常见的 if 判断，例如使用 wx:if 这个属性，那么就只有在后面的表达式为 true 的情况下才会显示文本 a 大于 0

a 大于 0

(4) 三元运算

三元运算的应用场景还是很多的（等式 ? : true情况，false的情况）

{{11 + 22 === 33 ? true : false}}
{{11 + 22 === 33 ? '正确' : '错误'}}
{{a + b === c ? '等式成立' : '等式不成立'}}

三元补充：

通过在属性中解析变量的方式，可以达到根据变量的值，来指定不同的 class名，以显示不同的样式

例如我们的 css 样式是这样的，iconfont 是我们共用的，所以直接写在属性中就可以了，而究竟是用 icon-back 还是 icon-remove 就可以通过一个变量来操纵，例如我们下面的 isClick 就是在 js 里 data 中定义的一个 布尔类型的变量

.iconfont {......}
.icon-back:before {......}
.icon-remove:before {......}

当 isClick 为 true 就执行 class 就是这样的 class="iconfont icon-remove" 为 false 就是用另一个，我们就可以通过 控制变量值来进行不同的显示

看一下上述所有运算的执行结果（不含补充的结果）

(四) 列表循环（列表渲染）

(1) 模拟数据

依旧我们给一些模拟数据，一个是 person 这样的对象内部有一些属性，还有一个就是 studentList 学生集合，其中有三个学生的数据

Page({
  data: {
    person:{
      pid: 1,
      name: "张三",
      age: 22,
      profession: "student"
    },
    studentList:[{
        sid:1,
        name:"汤姆",
        gender:"男"
      },{
        sid:2,
        name:"杰克",
        gender:"男"
      },{
        sid:3,
        name:"玛丽",
        gender:"女"
      }
    ]
  },
})

如果我们接受到了后台的一些集合或者数组等内容，循环遍历是一个非常常用的操作

(2) 正式使用

组件（标签）上使用 wx:for 就可以绑定一个数组或集合内容，就可用数组中各项的数据重复渲染该组件

先举个例子

    
        {{index}} --- {{item.name}} 
    

我们分别来解释一下：

• wx:for：数组或者对象
• wx:for-item：循环项（数组或集合）的变量名称，同时一般默认为 item
• wx:for-index：循环项（数组或集合）的索引（下标），同时一般默认为 index

• wx:key：绑定一个唯一的值，可以提高列表渲染的性能，可以简单理解为主键的概念，例如这里我传入了 studentList 中不可能重复的值 sid

  • 如果你的数组只是一个普通的数组，例如 [11,22,65,23,3,6] 没有所谓唯一的值，就可以使用 wx:key="*this" 即表示你的数组是一个普通的数组，*this 表示的是 item 本身

如果传这个 key 值，会有一个警告弹出

(3) 嵌套用法的补充说明

• 如果你的循环只有一层，那么 wx:for-item="item" wx:for-index="index" 这两个内容实际上是可以省略的，小程序会自动把这两个内容设置为 item 和 index
• 如果你的循环是一个嵌套的效果，那么切记一定 item 和 index 的值一定不要重复...

嵌套的正确写法

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

再举一个例子（遍历对象的所有属性）：

    
    {{key}} --- {{value}} 
    

看一下执行效果

(4) 循环（渲染）block标签

如果我们使用两种不同的组件（标签）看看最终渲染出来的结果有什么区别呢？

方法一（view 标签）

    {{key}} --- {{value}} 

• 结果一

 pid --- 1 
 name --- 张三 
 age --- 22 
 profession --- student 

方法二（block 标签）

    {{key}} --- {{value}} 

• 结果二

pid --- 1 name --- 张三 age --- 22 profession --- studen

通过控制台中 Wxml 界面，可以看到，只有在 view 组件下遍历内容时才真正的生成了 dom 结构，而直接使用 block 则只是将内容重复写了几次，不会变成真正的dom元素

(五) 逻辑判断（条件渲染）

(1) 用法

这块理解没什么难点，无非就是关于逻辑的几种判断，看一个例子就清楚了

说明：isLogin 是在 js 中模拟的一个数据，分别赋予 true false 或者其他的 例如 null，会根据逻辑值显示不同的内容

已经登录，逻辑为 true
未登录，逻辑为 false
不确定逻辑

(2) 补充 hidden

补充用法（hidden）：

通过上面的 if else 等可以控制组件例如 view 的显示，而有一个属性 hidden 同样可以实现根据逻辑值控制组件的显示

例如给 hidden 传入一个 false 就会显示出来

(3) wx:if 和 hidden 选择哪个

那么既然一定程度上都可以达到这种效果，我们选择那个呢？

先来看一下

---- 分界线 -----
if 隐藏

看一下渲染出来的结构，关于 wx:if 的那块直接就没有渲染出来了，只有 hidden 的那个，由此可以得出：

• wx:if 是直接把标签从页面结构中移除掉了
• hidden 是通过添加样式的方式的隐藏，标签结构还在

所以，当标签不总是切换显示的时候，可以考虑先用 wx:if ，标签切换频繁的时候用 hidden

(六) 模板

(1) 创建模板

模板的字面意思就是，一个可以应用在多处，通用的一个版块，如何去用呢？

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