小程序从0到1 | 一、快速上手小程序

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第28天，点击查看活动详情

在微信开发者工具中，我们通过简单的操作可以很快的搭建一个小程序的基本框架，下面先了解一下小程序的基本结构以及语法。

关于小程序

• 正如网页运行在浏览器环境中，小程序需要运行在微信环境中
• 在小程序中我们无法使用 DOM 中的 API，需要使用小程序提供的 API

项目目录结构

小程序的目录结构和其它语言下的脚手架相似：

具体功能如下：

页面	功能
pages文件夹	存放页面
app.json	全局配置文件
app.js	小程序的入口文件
utils	存放工具模块（比如时间格式化）
project.config.json	项目的配置文件
sitemap.json	配置是否可被微信索引

以index页面为例，目录包含四个文件，页面的逻辑就在这里实现：

• index.wxml
• index.wxss
• index.json
• index.js

启动与渲染

那么在搭建好小程序框架之后，是如何启动的呢? 启动后页面又是如何渲染的呢？

1. 启动

   1. 下载小程序包到本地
   2. 解析app.json
   3. 执行app.js入口文件，创建小程序实例
   4. 进行首页渲染
   5. 启动成功

2. 渲染

   1. 解析页面的 .json 文件
   2. 加载 .wxml 和 .wxss
   3. 执行 js 文件，创建页面实例
   4. 渲染完成

程序调试

在微信开发者工具中，集成了类似F12的功能，调试页面样式以及查看控制台都很方便。

其中有一项AppData可以查看各个页面中的数据以及结构：

常用的小程序组件

• 视图容器：

  1. view： 普通视图区域（类似于<div>）
  2. scroll-view： 可滚动的视图区域
     • 属性： scroll-x ，scroll-y
  3. swiper： 轮播图容器
     • swiper-item 轮播图项

• 内容组件

  1. text

     • 放置文本内容
     • text 设置selectable属性支持长按选中，view 组件不支持此功能，在真机上可调试

  2. rich-text

     • 可渲染 HTML 标签
     • 写法：<rich-text node="<h1>hello</h1>"> </rich-text>

• 其它组件

  • button
  • image
  • ...

常用的小程序 API

• 事件监听
  • wx.onWindowResize // 监听窗口尺寸变化
• 同步API
  • 特点，都以 Sync 结尾
  • wx.setStorageSync() // 本地存储
• 异步API
  • 特点：类似于$.ajax
  • wx.request() // 用来请求接口