一个 android 程序员的小程序入门实录（一）

小程序学习资料收集，开发者工具的下载及初览，代码结构与基本配置方法，及第一个 hello world

概况

微信小程序是腾讯推出的一种依托于微信，不用下载，通过扫码、公众号跳转，群聊点击就能使用的应用。由于项目需要，及出于对移动端另一种应用开发的好奇，带着老大的殷切希望，我也投入了小程序的学习。
微信小程序在一些不需要多次使用，不希望耗时下载的场景具有优势，同时对于开发者来说，全中文的文档和开发者社区也非常友好

小程序注册与开发工具安装

1. 注册，参照官方教程申请小程序账号。官方指引非常清楚，按照步骤一步步做即可。
   
   官方注册指引
   
   2.进入官方文档页面，点击工具，下载开发者工具。 下载地址
   
   开发者工具下载
   
   3.下载完成后，安装登录即可

开发工具初览

微信小程序开发者工具的界面和大部分 IDE 一样，包含编辑器，调试器，上方有工具栏，左侧还有一个模拟器。

开发者工具界面

代码结构

代码结构

根目录下

• project.config.json 负责保存开发者个人对于编辑器的使用偏好
• app.js 适用于全局的逻辑交互
• app.json 适用于全局的设置，所有pages必须在此注册，tabBar，navigationStyle 在此设置，还可以设置适用于所有界面的窗体设置，如窗体颜色，背景色，navigationBar色等
• app.wxss 适用于全局的样式

pages下有

每一个界面各有一个文件夹，里面有四个文件

• *.js 文件存放页面中所需要的交互逻辑
• *.wxml 页面控件结构，和android中的 xml 功能上有些类似（都是编写控件的相对位置，大小，颜色等），但 wxml 的语法更类似于 HTML
• *. wxss 页面样式，具有css 大部分的特性
• *.json 仅适用于该界面的窗体设置，与app.json冲突，以页面设置为准

基本配置方法

在需要的时候可以更改配置，以获得想要的效果

• 全局配置：在 app.json 可以进行全局配置，查询文档可得配置项列表。
  其中，除了必须的 pages 外，比较常用的有 window (窗口样式)， tabBar （底部tab栏）， networkTimeout (网络超时时间)
  注意：首页必须放在 pages 项第一个

  
  
  app.json部分配置项列表

• 页面配置：在各页面的 *.json 文件中可以设置部分 window 内容，包括 navigationBar 背景和字体颜色等

  
  
  页面部分配置项列表（不全）

请查收您的 Hello World

创建一个新的小程序，选择快速开始模板，无需更改配置项，直接编译代码，就能得到第一个微信小程序的 Hello World 啦！一行代码没写就白得一个 hello world，这种感觉和当初初学 android 第一次编译时的感觉很相似呢。总之，搭建开发环境、编写第一个 hello world 的过程都比较简单而流畅。

---

参考资料

1. 微信小程序开发官方指引
2. 极客时间 9小时搞定微信小程序开发

下篇：一个 android程序员的小程序入门实录（二）