小程序的基础与体验

学习技术不要光看视频,一定要动手实践。开发小程序相对来说比较容易,而且用代码来实现一些功能是一件非常有趣和让人有成就感的事情。

开始前的准备

小程序的开发有两样东西必不可少,一个是小程序开发的技术文档;还有一个就是小程序的开发者工具。

开发者工具小程序开发者工具下载地址

大家可以根据自己电脑的操作系统来下载对应的安装包进行安装。就和我们写Word、PPT文档要用Office的软件一样,我们要在开发者工具上多多动手,技术才能掌握的更加真切。

技术文档官方小程序技术文档

技术文档大家先只需要花五分钟左右的时间了解大致的结构即可,先按照我们的教学步骤学完之后再来看也不迟。官方的小程序技术文档过于全面而且详细,对于初学者或者零基础的朋友来说,我们会引导大家如何循序渐进的学习文档里的技术知识。

多看技术文档多用开发工具也是我们学习其他编程语言或技术最为重要的两点,凡是脱离技术文档和开发工具看视频、看文章以及搜集再多的资料都是舍本求末的错误做法,而这也是很多初学者的一个通病。

值得注意的是小程序的开发功能更新非常频繁,很多网上的教程内容都比较过时,而只有技术文档才是同步最新的。无论你是初学者还是高手,这个文档是我们技术开发的基础与落脚点,常读常新。

注册微信小程序

小程序的注册非常方便,打开小程序注册页面,按照要求填入个人的信息,验证邮箱和手机号,扫描二维码绑定你的微信号即可,3分钟左右的时间即可搞定。

注册页面:小程序注册页面

当我们注册成功后,就可以自动登入到小程序的后台管理页面啦,如果你不小心关掉了后台页面,也可以点击小程序后台管理登录页进行登录。

后台管理页:小程序后台管理登录页

小程序和微信公众号的登录页都是同一个页面,他们会根据你的不同的注册邮箱来进行跳转,这也意味着公众号和小程序不能同时登录哦~

当我们进入到小程序的后台管理页后,点击左侧菜单的设置进入设置页,然后再点击开发设置,在开发者ID里就可以看到AppID(小程序ID),这个待会我们有用。

注意小程序的ID(AppID)不是你注册的邮箱和用户名,你需要到后台查看才行哦~

体验模板小程序

安装完开发者工具之后,我们使用微信扫码登录开发者工具,然后使用开发者工具新建一个小程序的项目,

  • 项目名称:这个可以根据自己的需要任意填写;
  • 目录:大家可以先在电脑上新建一个空文件夹,然后选择它;
  • AppID:就是之前我们找到的AppID(小程序ID)
  • 开发模式为小程序(默认),后端服务选择不使用云服务(默认),语言为JavaScript(默认)

点击新建确认之后就能在开发者工具里看到模板小程序的源代码啦~

小程序的文件结构

这个模板小程序非常简单,但是它的文件结构却是完整的,这个文件结构也是所有小程序文件结构的基础。关于文件结构的介绍大家可以参考一下官方文档(不要超过五分钟)。

官方文档小程序文件结构

在我们新学一门技术时,会遇到很多我们之前没有接触过的新名词,这个时候切忌死记硬背,在你没有动手实践的时候,你是很难理解这些知识的,建立在没有理解的基础之上去记忆只会加重你的学习负担。

体验开发者工具

关于开发者工具的详细介绍,大家也可以花几分钟的时间在动手体验开发者工具的同时,参阅一下官方文档,了解一下开发者工具的界面方面的知识,理解多少是多少。

官方文档开发者工具界面

大家只需要熟悉一下开发者工具的界面即可,对于不理解的地方,以后随着你开发经验的累积,你再来查看文档,你的理解就会加深啦。

和我们小时候背诵唐诗一样,可能有些地方你不理解,但是你先知道这么个知识,等你阅历增加之后,不理解的地方自然就理解了。但和背诵唐诗不一样的是,学习技术不需要像背诵一样去死记。

体验示例小程序

微信官方为我们提供了一个小程序示例,这个示例算是一个比较完整的小程序。点击链接官方小程序demo,在这里大家可以看到一个小程序码,和demo小程序的源码下载链接。

用微信扫描一下小程序码,你就可以打开这个小程序了,在微信里体验一下这个小程序,感觉怎么样?

然后再把它的源码下载下来,这个源码就是小程序的完整代码啦,拥有了完整代码,我们就可以看这个小程序是如何通过代码来实现的了。

我们使用开发者工具新建一个项目,把项目目录指向demo的根目录,在我们的开发者工具的模拟器里就可以看到这个小程序和我们在手机里体验到的小程序界面一样啦。在开发者工具的右侧就是小程序的源代码,我们可以使用开发者工具对源代码进行任意的修改。

和我们写作、画画一样,只了解一些零散的知识点,我们是不知道一个完整的作品是如何做出来的,于是就需要临摹他人的作品。源码就是程序员学习时最佳的临摹对象。

体验WeUI小程序

WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计。

可能很多朋友对设计不大了解,对视觉、体验、样式库这些概念比较模糊,大家可以用手机浏览器打开WeUI官网https://weui.io/,来体验一下。WeUI同样也适用于小程序。

源码下载:WeUI小程序源码

大家用开发者工具再新建一个项目,然后把项目目录打开dist目录,注意哦~

本节任务

  1. 不管是否看得懂,你是否走马观花浏览了一下小程序的开发文档?
  2. 下载并安装小程序的开发者工具;
  3. 注册一个微信小程序‘;
  4. 登录小程序后台管理页面,找到AppID,也就是小程序ID;
  5. 新建一个模板小程序项目;
  6. 了解模板小程序的文件结构;
  7. 了解开发者工具的界面以及大致的功能;
  8. 下载demo小程序源代码,并导入到开发者工具当中,体验一下完整的小程序的文件构成;
  9. 下载WeUI小程序源码,并体验

 

共有 0 条评论

可以使用微信、微博等 登录发表评论