说在前面的废话，可以不看

这会是一个系列文章。主要是记录一下个人学习微信小程序开发的结果。

作为一个老Java后端开发，从JSP时代走过来的老古董，我一向认为后端开发人员应该了解、掌握至少一门前端技术。

一是在工作中，可以能更好地理解前端开发人员的需求，由于了解，所以共情。

二是前后端一把抓，接个私活什么的，或者找工作、面试的时候，有个前端可以show一下总是好的。

前端技术方向有许多，WEB（国内最流行的应该就是Vue了）、小程序（主要就是微信小程序）、手机客户端原生开发（Android、iOS）、桌面客户端（Qt、Electron）、跨平台（Flutter、uni-app、React Native）等等。

个人觉得，桌面就算了……

手机客户端原生开发，相对较重，学习成本高，适用面窄。大家可以想想，目前有多久没有下载新的APP了。

而跨平台开发框架呢，从我个人的观察来看，三大框架，描绘的前景是很光明，优点也许多，但是落在实际上，缺点、隐患也不少（纯个人感觉），具体的不细谈了，怕得罪人。前段时间好像就有新闻爆出某框架团队由于裁员，开发工作推进得很慢。

然后就是以Vue为代表的WEB技术和微信小程序了。

尤其是微信，在国内的适用面可以说是最广了，你可以不打开浏览器，但是你不可能不打开微信。而且以这几年工作的情况来看，许多公司（尤其是中小型公司）的手机客户端重心从原生开发转为微信小程序了。

这段时间，由于可以理解的缘由，被裁在家带娃，正好有时间，就把微信小程序的学习成果拿出来，也算是个记录吧。

毕竟我不是前端开发人员，也没想过转型成前端开发人员，所以我学习的重点在相关的功能、API应用。

页面的美化，图片，颜色，布局什么的，由于个人审美很差，且没有UI资源，就不搞了。

如果有后端开发人员感兴趣，可以看看这一系列的文章，前端开发或者有志于前端开发的同学就没必要看了。

怎么申请账号、下载开发工具，就不写了。

小程序基本结构

• .json 配置文件。小程序全局&单个页面的配置。
• .wxml 页面布局。等于html。
• .wxss 页面样式。等于css。
• .js逻辑脚本。

app.json

个人认为首要关心的配置项：

pages

所有页面路径的列表。

"pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/news/news",
    "pages/mine/mine"
  ]

第一个页面就是小程序默认启动页。也可以用“entryPagePath”指定，但没啥必要。

tabBar

底部tab栏。最少2个，最多5个。

"tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/news/news",
        "text": "新闻"
      },
      {
        "pagePath": "pages/me/me",
        "text": "我的"
      }
    ]
  }

networkTimeout

各类网络请求的超时时间，单位均为毫秒。默认60秒。

app.js

全局的脚本文件。

默认以App包裹所有代码。

里面有内置的方法，也可以设置一些全局变量

App({
  onLaunch() {
    // 小程序初始化完成后，触发，且仅触发一次。
    console.log("小程序初始化完成")
  },
  // 全局变量可以操作，具体见后续
  globalData: {
    author: "Leo Bone",
    mpName: "学习Demo",
    cityList: [{
      "adcCode": 110000,
      "proviceName": "北京市"
    }, {
      "adcCode": 120000,
      "proviceName": "天津市"
    }]
  }
})

注意function的写法有二：

functionName(parameter...){
}
functionName:function(parameter...){
}

app.wxss

全局样式文件，就是css。

pages

所有小程序的功能页面都在里面，一个页面一个目录，一个目录下有json、js、wxml、wxss四个同名文件。

components（可选）

自定义组件目录。

utils（可选）

全局逻辑脚本文件存放目录。