微信小程序起步 - 几种文件格式的理解 - 如何使用组件 - 常见API - 小程序启动流程

目录

• 微信小程序 - 起步
  • 前言
  • 几种常见的文件格式
    • 配置文件 xxx.json
      • 特殊点
    • 页面模板文件 xxx.wxml
    • 页面样式文件 xxx.wxss
    • 页面逻辑文件 xxx.js
  • 渲染层和逻辑层（双线程模型）
  • 程序与页面（小程序的启动流程）
  • 组件
    • 如何使用组件
  • API
  • 小程序协同工作和发布

微信小程序 - 起步

前言

近期心比较累，可以说是心态上发生了些许变化

不过，依旧得把学习到的东西记录下来，这样才能将付出化作实质性的成果吧。

本篇博客是拼凑版的（参考微信官网文档及博客，结合自己的一些语言把微信小程序的学习做个笔记记录）

参考链接：微信小程序官方文档、小猿取经微信小程序系列博客（作为大致的学习路线参考）

建议：可以参考 vue 来理解微信小程序，它两还是有很多相似之处的，如果你提前学过 vue，对比着学小程序会非常快！

本文大多地方只是一个大纲，可以让你快速熟悉怎么开发小程序，这样你就可以快速根据业务场景去寻找相应的内容，去文档里学习使用了

其实微信小程序官网文档写的非常好，通俗易懂，写成博客只是减少一个自己不愿意看文档的心理吧（不要让自己刚刚开始就对文档产生恐惧~）

几种常见的文件格式

配置文件 xxx.json

配置部分-微信官方文档

注意点：

JSON 文件中无法使用注释，试图添加注释将会引发报错。

特殊点

• 页面的配置文件（非 app.json） 配置导航栏顶部区域不需要大的 window 对象来包裹

页面模板文件 xxx.wxml

咱们网页编程采用的是 HTML+CSS+JS 这样的组合，而 .wxml 文件充当的就是 HTML 这样一个角色

和 HTML 非常相似，WXML 由标签、属性等等构成。

wxml 相对 html 常见的不同

• 标签名字不一样，微信小程序提供了许多组件（比如日历、弹窗等等），常见标签：view button text

• 参照 MVVM 这样的设计模式，且做了数据的双向绑定，多了一些 wx:if 之类的属性以及 {{ }} 这样的表达式（大多都是 wx: 开头的）

页面样式文件 xxx.wxss

wxss 具有 css 的大部分特性，同时也做了一些扩充和修改

• 新增了尺寸单位 rpx ，会自动去做一些像素单位的换算（在开发小程序的时候可以直接用它来代替 px）
• 提供了全局样式和局部样式，app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。
• wxss 仅支持部分 css 选择器（选择器用不了除了写错了可能就是不支持嘛~）

页面逻辑文件 xxx.js

支持 ES6 语法，那么就可以有很多简化操作啦~

一些响应用户操作，和用户做交互的代码都是写在这里的

渲染层和逻辑层（双线程模型）

详细可参考博客

小程序的运行环境分成渲染层和逻辑层，其中 WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。

小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本。

一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端（下文中也会采用Native来代指微信客户端）做中转，逻辑层发送网络请求也经由Native转发

程序与页面（小程序的启动流程）

这个地方结合图来看可能会更清楚点，图中标注不清楚的地方可以看官方文档 --> 程序与页面

官网中的描述大致就是下图：

补充描述

通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径，而写在里面的第一个页面路径就是这个小程序的首页

组件

具体组件可看：微信小程序的组件

如何使用组件

就像 HTML 的 div, p 等标签一样，在小程序里边，你只需要在 WXML 写上对应的组件标签名字就可以把该组件显示在界面上

使用组件的时候，还可以通过属性传递值给组件，让组件可以以不同的状态去展现，例如，我们希望地图一开始的中心的经纬度是广州，那么你需要声明地图的 longitude（中心经度） 和 latitude（中心纬度）两个属性

组件的内部行为也会通过事件的形式让开发者可以感知，例如用户点击了地图上的某个标记，你可以在 js 编写 markertap 函数来处理

<map bindmarkertap="markertap" longitude="广州经度" latitude="广州纬度"></map>

当然你也可以通过 style 或者 class 来控制组件的外层样式，以便适应你的界面宽度高度等等。

API

为了让开发者可以很方便的调起微信提供的能力，例如获取用户信息、微信支付等等，小程序提供了很多 API 给开发者去使用。

例如：要获取用户的地理位置

wx.getLocation({
    type: 'wgs84',
    success: (res) => {
        var latitude = res.latitude // 纬度
        var longitude = res.longitude // 经度
    }
})

需要注意的是：多数 API 的回调都是异步，你需要处理好代码逻辑的异步问题。

小程序协同工作和发布

这部分暂时不去做研究，个人认为在真正融入团队开始前来看看官网文档即可~