玩转微信小程序 之 初步了解微信小程序（2019/04/05）

LZ-Says：现在能做的，就是踏踏实实，走好每一步～ 不去想未来会如何，安心做好自己应该做的事儿即可。

前言

前几日，集团官网开发暂时告一段落，回顾这段经历，感觉自己各方面还是有很多不足。

不过还好，有鸡大，感谢。

点滴积累，一起加油吧～

本系列将通过学习微信小程序，并且逐步完成一个基于 wanAndroid 开放 API 而实现的微信小程序，相关链接将会在文末附上。

注：
这次打算将分俩批将其在草稿箱内解放，由此开始，让自己心静下来。

一为微信小程序简单了解，二为开发一个微信小程序。

本次首度和骚牛合作打算完成一个东西，特此记录～！

2019 年 4 月 5 日 00:06:39 立下此 Flag。

本章脑图

本章将按照如下内容进行逐步讲解（LZ 个人学习），希望能对看到的小伙伴有一定的帮助：

本章目标

看完本章，你将 get 如下技能：

• 对微信小程序有一个简单概念，至少和别人谈论起来不会那么尴尬；
• 如何创建一个微信小程序（注册、创建等）；
• 对微信小程序 IDE 有基本概念，达到上手；
• 简单了解微信小程序项目构造以及代表含义；
• 简单了解数据绑定、事件处理以及生命周期。

首战 - 启程

啦啦啦，启程啦～

由于微信小程序更新稍稍频繁，这里 LZ 标题后面附上当前时间，避免后续小伙伴由于改版、升级出现其他问题。

友情建议，一切还是要以官方第一手资料为准～

一、什么是微信小程序

1.1 微信小程序定义

微信小程序，基于宿主「微信」，实现无需安装，用完即走的轻型「应用」。

1.2 微信小程序特点

• “无需安装，用完即走”： 由于体积较小，下载安装用户无感知；
• “类似”原生体验，并可以实现 App 中基本内容；
• 加载快速、操作便捷，用户只需要通过微信扫一扫或者搜索即可下载使用；
• 开发周期短，相对成本较低；
• 。。。

1.3 微信小程序发展历程（节选百度百科）

这里简单列举几项重大时间点：

• 2016 年 1 月 11 日，微信之父「张小龙」透露微信内部正在研究新的形态，叫「微信小程序」；
• 2016 年 9 月 21 日，微信小程序正式开启内测。腾讯云正式上线微信小程序解决方案，提供小程序在云端服务器的技术方案；
• 2017 年 1 月 9 日 0 点，微信第一批小程序正式上线；
• 2017 年 12 月 28 日，微信更新的 6.6.1 版本开放了小游戏，微信启动页面还重点推荐了小游戏「跳一跳」；
• 。。。

二、小程序开发前期

2.1 小程序注册

截止目前为止，小程序提供如下五种注册范围：

官方步骤演示：​​https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/getstart.html#起步​​

小程序注册地址：​​https://mp.weixin.qq.com/wxopen/waregister?action=step1​​

简单截取步骤，按需填写信息即可：

无脑注册，详细步骤在此忽略。

2.2 IDE 下载

这里引用官方说明：

为了帮助开发者简单和高效地开发和调试微信小程序，我们在原有的公众号网页调试工具的基础上，推出了全新的「微信开发者工具」，集成了公众号网页调试和小程序调试两种开发模式。

• 使用公众号网页调试，开发者可以调试微信网页授权和微信 JS-SDK；
• 使用小程序调试，开发者可以完成小程序的 API 和页面的开发调试、代码查看和编辑、小程序预览和发布等功能。

官方下载地址：​​https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html​​

如下图所示，官方为我们提供了多个版本，小伙伴按需下载即可：

2.3 创建小程序项目

打开已经下载安装完毕的「微信开发者工具」（以下简称 IDE）：

微信扫码登录即可：

确认登录后，我们便进入了如下页面：

接下来点击创建项目 icon，开始创建项目：

这里简单说明如何查找 AppID，首先登陆如下网页：

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

输入注册的账号密码：

Enmmm，还得扫码：

登录成功后，点击左侧「开发」，之后选择「开发设置」，AppID 在此。

将 AppID 拷贝，黏贴到项目所需位置，随后设置本地存放地址，点击新建即可。

2.4 小程序 IDE 简述

新建项目如下：

关于这块内容，具体详情可直接移步下方官网链接查看：

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

这里 LZ 简单列举几个项目开发中有所帮助的内容：

- Tips 1：修改配色（好的配色方案总会让人心情愉悦～）

• Tips 2：修改文件自动保存，手动保存自动编译
  
  - Tips 3：自定义编译 - 编译时进入期待页面，避免重头再来
  注：编译条件跟项目相关，每个项目可以保存自己相关的编译条件

2.5 小程序项目结构以及含义

微信官方地址：​​https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/code.html#小程序代码构成​​

不知道刚刚大家有没有注意到刚刚新建的项目结构：

下面简单说明文件夹 / 文件代表对应含义：

|- pages // 存放小程序页面
|
|-- index // 模块（页面）名称
|--- index.js // 页面 JS 文件，逻辑、效果等
|--- index.json // 静态数据配置文件
|--- index.wxml // 页面
|--- index.wxss // 样式文件 类似 HTML 中的 CSS
|
|-- logs // 默认日志目录
|--- logs.js
|--- logs.json
|--- logs.wxml
|--- logs.wxss
|
|- utils // 默认创建项目使用 Utils
|-- util.js
|
|- app.js // 全局 JS 文件
|- app.json // 全局（数据）配置文件
|- app.wxss // 全局样式文件
|- project.config.json // 项目配置文件

接下来，我们分别看看每个文件里面包含什么鬼鬼？

app.js：

//app.js
App({ // 注册小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。App() 必须在 app.js 中调用，必须调用且只能调用一次。
  onLaunch: function () { // 监听小程序初始化
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: { // 全局便利
    userInfo: null
  }
})

app.json：

{
  "pages":[ // 当前项目页面路径地址
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{ // 项目窗体基本配置
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

app.wxss：

/** app.wxss 全局样式文件 **/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

三、小程序实战

3.1 数据绑定

官方地址：​​https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/data.html​​

数据绑定使用 Mustache 语法（双大括号）将变量包起来。

接下来先来一个简单数据绑定操作：

首先在 index.js 文件中的 data 层级下定义对应变量名以及附对应初始值，如下：

Page({
  data: {
    ...
    HLQStruggle:"Please call me HLQ_Struggle",
    ...
  }，
  ...
})

接着在页面中直接引用即可：

<text>{{ HLQStruggle }}</text>

展示效果如下：

So，it’s very easy～

3.2 事件处理

预知详情，移步官网：​​https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html?search-key=bindclick​​

The first，一起来看官网关于事件的介绍：

• 事件是视图层到逻辑层的通讯方式；
• 事件可以将用户的行为反馈到逻辑层进行处理；
• 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数；
• 事件对象可以携带额外信息，如 id, dataset, touches。

而在小程序中事件分为冒泡事件和非冒泡事件：

• 冒泡（bind）事件：当一个组件上的事件被触发后，该事件会向父节点传递；
• 非冒泡（catch）事件：当一个组件上的事件被触发后，该事件不会向父节点传递

这点是不是有点类似 Android 中的事件分发，拦截了便不会向下传递，而小程序则恰恰相反，具体嘛，实战来一波～

index.wxml：

<!-- 演示小程序中冒泡事件 -->
  <view bindtap='catchParentTap' style='padding:15rpx; width: 100%; background:#666;'>
    <button bindtap='catchChildTap' style='width:60%;'>冒泡事件</button>
  </view>

index.js：

//index.js
//获取应用实例
const app = getApp()

Page({
  ...
  // 演示冒泡事件
  catchParentTap: function() {
    console.log("Parent Button Click")
  },
  catchChildTap: function() {
    console.log("Child Button Click")
  },
  ...
})

演示样子，一个 View 包含一个 Button，点击的时候会在 Console 面板输入当点点击 Button，效果如下：

回头看 js 文件中，我们为 View 和 Button 设置了冒泡事件，那么现在简单回顾下什么是冒泡事件。

一句话，冒泡事件，子 View 会将事件继续向上传递。用我大 Android 来讲就是子控件消费事件后，父容器继续消费此事件。

那么，针对以上 LZ low 解释，我们简单猜测下当我点击 Button 后，Console 面板会输出什么呢？仔细回想关于冒泡事件的定义。

可以看到，当我点击了 Button 按钮后，首先执行 Button 点击事件，随即执行 View 事件。

下面，基于同一个实例，简单模仿非冒泡事件，So Easy，只需要将父容器 bindTap 修改为 catchTap 即可。

<!-- 演示小程序中非冒泡事件 -->
  <view bindtap='catchParentTap' style='padding:15rpx; width: 100%; background:#666;'>
    <button catchtap='catchChildTap' style='width:60%;'>冒泡事件</button>
  </view>

演示效果如下：

So，这里简单做个总结：

• 冒泡事件中，假设父容器以及子 View 同时设置了冒泡事件，那么当点击子 View 时，首先会执行子 View 事件，随后执行父容器事件；
• 非冒泡事件中，假设父容器为非冒泡事件，子 View 为冒泡事件，则点击子 View 只会执行当前点击 View 的事件。

3.3 生命周期

官方地址：https://developers.weixin.qq.com/miniprogram/dev/guide/framework/page-life-cycle.html

生命周期流程图如下：

而下面，我们实战操作演示一波，从 A 页进入 B 页再返回，期间的生命流程是怎样。

index.js：

//获取应用实例
const app = getApp()

Page({
  ...
  onl oad: function() {
    console.log("---> Run index onl oad")
    ...
  },
  onShow: function() {
    console.log("---> Run index onShow")
  },
  onReady: function() {
    console.log("---> Run index onReady")
  },
  onHide: function() {
    console.log("---> Run index onHide")
  },
  onUnload: function() {
    console.log("---> Run index onUnload")
  }
  ...
})

logs.js：

const util = require('../../utils/util.js')

Page({
  data: {
    logs: []
  },
  onl oad: function () {
    console.log("---> Run logs onl oad")
    ...
  },
  onShow: function(){
    console.log("---> Run logs onShow")
  },
  onReady:function(){
    console.log("---> Run logs onReady")
  },
  onHide:function(){
    console.log("---> Run logs onHide")
  },
  onUnload: function() {
    console.log("---> Run logs onUnload")
  }
})

So，来场迫不及待的实操课吧～

生命周期执行顺序如下：

• A 页启动执行生命周期执行顺序（onLoad --> onShow --> onReady）
• A 页跳转 B 页生命周期执行顺序（A onHide —> B onl oad --> onShow --> onReady）
• 从 B 页返回 A 页生命周期执行顺序（B —> onUnload —> A onShow）：
  
  这里有个问题，你说这个页面是在什么时候（哪儿个生命周期）显示出来的呢？

Debug？

Go～

Debug 技巧： 选择「调试器」中 「Source」 Tab，随后找到准备调试的页面（文件），重新刷新即可。

下面，尝试一波静态属性什么效果：

由此可见，在微信小程序中，关于页面加载显示分为如下俩中情况（暂时而言）：

• 如果页面中有引用 js 中定义好的默认值，则此数据在 onl oad 时便会加载成功并显示；
• 如果页面中数据需要通过某种方式获取（本地读取），则数据在 onShow 时加载显示。

好啦，有关微信小程序首战，简单介绍到此。

四、Others Tips

需要简单了解的小知识

• 网页开发渲染线程和脚本线程是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应，而在小程序中，二者是分开的，分别运行在不同的线程中；
• 网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作。而小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的 DOM API 和 BOM API；
• 网页开发者需要面对的环境是各式各样的浏览器，PC 端需要面对 IE、Chrome、QQ浏览器等，在移动端需要面对 Safari、Chrome 以及 iOS、Android 系统中的各式 WebView 。而小程序开发过程中需要面对的是两大操作系统 iOS 和 Android 的微信客户端；
• 小程序的三大运行环境有所区别，如下图：

叨叨

4 月 5 号 开始写，到 7 号 02:08:38，总算是完成第一篇。

清明第一天，爬山，感觉很爽，嗯，登高望远，狂风袭来，怎一个爽字了解，嗯，好像就是这样感冒了。

昏昏沉沉，第二天，帮老杰子搬家，小腿儿酥麻，搬运过程中怼了墙壁，酸疼。一大妈送个健身器，累死，好歹整回来了。

Enmmm，累，希望感冒早点好～！

个人公众号

不定期发布博文，最近有点忙，感谢老铁理解，欢迎关注～

参考资源

1. 微信小程序官方：​​https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN​​
2. 百度百科介绍：​​https://baike.baidu.com/item/微信小程序​​