小程序学习资料收集,开发者工具的下载及初览,代码结构与基本配置方法,及第一个 hello world
概况
微信小程序是腾讯推出的一种依托于微信,不用下载,通过扫码、公众号跳转,群聊点击就能使用的应用。由于项目需要,及出于对移动端另一种应用开发的好奇,带着老大的殷切希望,我也投入了小程序的学习。
微信小程序在一些不需要多次使用,不希望耗时下载的场景具有优势,同时对于开发者来说,全中文的文档和开发者社区也非常友好
小程序注册与开发工具安装
- 注册,参照官方教程申请小程序账号。官方指引非常清楚,按照步骤一步步做即可。
官方注册指引
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 的过程都比较简单而流畅。
网友评论