前言
我作为一个普通的Android程序员,由于需求原因被公司安排做小程序开发了,前前后后研究小程序也有两个月左右了,也完成了公司的一个小工具,算是入门了。前面我也在公众号发布过小程序的学习文章。
接下来我将计划写一个个人小程序,当做学习练手项目,基础确实很重要,特别是对我这种前端基础薄弱的人来说,学习小程序确实不太容易,所以建议大家学习小程序前,最好先学习一下前端相关的基础,这样将非常容易上手小程序开发。
一、小程序开发准备
做小程序开发需要一个APPID,所以要先到微信公众平台https://mp.weixin.qq.com/ 注册开发者账号,绑定自己的微信作为管理员,然后在开发者后台可以查看自己的APPID,一个开发者后台只可以发布一个小程序,后续可以覆盖发布;
二、开发者工具
微信小程序有自己的专门开发工具,支持小程序和公众号开发。在小程序开发文档中找到小程序开发工具的下载页面,或者直接输入https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 根据自己的操作系统下载对应的安装包进行安装。
三、开始我的个人项目
有了前面两步的准备之后,就可以开发小程序项目了
1.打开小程序开发工具,使用之前注册小程序所使用的微信扫码登录。选择小程序项目
2.新建名为xxx的项目,输入APPID 然后勾选 "创建 QuickStart 项目",点击确定,那么第一个小程序项目就创成功建了。
3.项目代码组成可分为:配置代码JSON文件、模板代码 WXML 文件、样式代码 WXSS文件以及逻辑代码 JavaScript文件组成。
JSON文件:在小程序代码中扮演静态配置的作用,在小程序运行之前就决定了小程序一些表现,需要注意的是小程序是无法在运行过程中去动态更新JSON 配置文件从而发生对应的变化的。
WXML全称是 WeiXin Markup Language,是小程序框架设计的一套标签语言,结合小程序的基础组件、事件系统,可以构建出页面的结构。
WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果。WXSS与Web开发中的CSS类似。为了更适合小程序开发,WXSS对CSS做了一些补充以及修改。
给我的理解就是:WXML就类似前端的HTML,WXSS就类似前端的CSS,所以前面我说了最好有前端相关的基础,这样将非常容易上手小程序开发。
接下来我要开始我的项目了——生活小助手项目,整体框架如下图:
效果图如下:
分为三大模块:
天气预报、
精选文章、
个人中心,
这里我只搭建了整体的框架,由底部菜单切换,后面有时间再继续分模块开发,小程序创建底部菜单非常简单,在app.json文件进行配置即可。
app.json文件里面的json字段 pages,相当于Android开发的androidmainfest.xml里面注册activity页面一样,凡是新建的page页面都要在这里注册。
app.json文件里面的json字段 window,相当于Android开发的styles.xml文件,实际上就是样式设置,比如窗口颜色,状态栏背景色,全局标题等设置。
app.json文件里面的json字段 tabBar,这里就是设置底部菜单的,用起来比Android开发的更简单方便,今天算是入门篇了,就总结到这里了,其中还有很多基础的就不再一一赘述了,
接下来我将会利用业余时间来完成这个属于自己的小程序项目,欢迎大家关注本公众号,一起学习,谢谢!
项目地址: