微信小程序学习笔记

小程序现在可是非常的火爆，前段时间自己也去学习了一下小程序。

第一次使用感觉小程序里面的组件和 API 非常丰富，功能很强大，使用也很方便。

下面总结一下这次学习的心得体会，方便以后查阅。

应用特点#

小程序适合做简单的，用完即走的应用(不用安装，随时可用，但只能在微信平台使用)
小程序适合做低频的应用(使用次数少，需要的时候才用它)
小程序适合做性能不高的引用(程序较简单，交互不要太多)

使用流程#

申请帐号
下载开发者工具
打开工具，新建项目
开始编程，可以使用开发者工具自带的编辑器来编写代码，也可以使用其他的 IDE，比如 VSCode、WebStorm。

语法特点#

小程序没有 DOM，由数据来驱动。
根目录有三个 app 命名的文件，是全局配置文件，新建项目时生成。
小程序有两大重要组成部分：页面和组件（模板）。
页面包含wxml,wxss,js,json4 个文档，其中wxml是结构，wxss是样式，js是行为，json是配置。比“html+css+js”这组金三角多了一个json文件，其实这里面的json可以看作是已经封装好功能的js，比如设置页面标题，开启下拉刷新功能等。注意：因为这 4 个文档名字必须是一样的，所以在结构中不需要引用样式和交互。
组件(模板)只包含wxml和wxss2 个文档，没有js文档，即意味着组件上不支持脚本文件（当前版本），所以涉及到组件上的行为、交互，不能在组件上去设置，需要在引用它的页面中去设置。注意：这 2 个文档名字也要是一样的。
页面和组件的通信只有页面单方面向组件传值(通过 data 属性，可以用...扩展符展开)，没有页面和组件之间事件的交互。
页面和页面之间通过调用 API 进行跳转，需要传值的话，把值放入到 URL 中去，跳转后的页面加载时调用options参数拿到 URL 上的值。
js 文档支持部分 ES6 语法，比如箭头函数，解构赋值等，但不支持 Promise 语法（当前版本）。
不支持 Sass/Scss，Less，Stylus 等 CSS 预处理器。
支持 Commonjs 模块化规范。
支持 js 压缩，Postcss 等，需要在配置文件project.config.json中设置，这个配置文件在新建项目时生成。

常用语法#

保存数据和读取数据。

// 把数据保存到 data 上(需要注意 this 指向)
this.setData({
  title: "wechat",
});
 
// 读取data数据
const title = this.data.title;

页面跳转

// 跳转到带有 tab 的页面
wx.switchTab({
  url: url,
});
 
// 跳转到不带有 tab 的页面
wx.navigateTo({
  url: url,
});

网络请求

wx.request({
  url: url,
  methods: "GET",
  header: {
    "Content-Type": "json",
  },
  success: function () {},
  fail: function () {},
});

音乐播放

wx.playBackgroundAudio({
  dataUrl: url,
  title: title,
  coverImgUrl: url,
});

全局变量的设置和修改

// app.js
// 设置全局变量
App({
  globalData: {
    isPlaying: false,
  },
});
 
// page.js
// 获取全局变量
const app = getApp();
const isPlaying = app.globalData.isPlaying;
 
// 修改全局变量
app.globalData.isPlaying = true;

开发小技巧#

在自带的编辑器中，可以在app.json创建 page 路径来快速创建页面的 4 个文档。
在开发的时候建议选中项目设置里面的“不检查合法域名...HTTPS 证书”这个选项。因为小程序的安全要求非常高，需要后端服务器支持 https 协议。
调试面板中的storage可以查看缓存，AppData可以查看和修改请求到的数据，非常方便。
在编译按钮前，可以选择指定的页面来显示，不需要从首页中去跳转，非常人性化。
绑定小程序开发助手可以不用扫码登录小程序，直接在小程序开发助手中登录。
使用 WebStorm 开发小程序时，设置 File Types，使得.wxml关联为 html 格式，使得.wxss关联为 scss 格式，可以使部分代码高亮和有智能提示，提供开发效率。在 VSCode 中可以下载小程序相关插件。

注意事项#

页面必须在app.json下面注册，不然无法实现页面跳转。
请求数据的服务器需要在账号中设置 Request 合法域名，不然请求不到数据。
使用 WebStorm 开发小程序时，注意不要在 WebStorm 中编辑app.json文件，因为 WebStorm 实时保存文件，导致小程序会生成很多垃圾的页面文件。

总结#

小程序的功能其实非常强大，本次学习只体验了它的很小一部分功能，第一次开发难免会出现很多问题，文章中不足之处还请见谅。