美文网首页
一个 android 程序员的小程序入门实录(一)

一个 android 程序员的小程序入门实录(一)

作者: oven小区 | 来源:发表于2019-02-10 23:16 被阅读0次

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

    相关文章

      网友评论

          本文标题:一个 android 程序员的小程序入门实录(一)

          本文链接:https://www.haomeiwen.com/subject/zxjxeqtx.html