小程序学习资料收集,开发者工具的下载及初览,代码结构与基本配置方法,及第一个 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程序员的小程序入门实录(二)