最新消息:Rockyxia Web技术博客全新改版,响应式布局满足各种设备各种尺寸的访问需求。

尝鲜一下微信小程序的开发过程

web综合 rockyxia 4612浏览

写在前面

随着1月9日微信小程序的正式上线,小程序的热度达到了一个顶峰,虽然我不并不是太看好小程序的发展,但是新的事物的诞生,去了解下也是没有坏处的吗。近日尝试了一个小程序的开发,了解下小程序的开发过程,非常的简洁的一个页面,里面有三个tab页,内容都是静态的,引入了微信提供的WEUI样式库。

如果,我是说如果后续还有兴趣的话,我会把数据变成动态的,从博客上开个接口来取数据。

下面来简单介绍下这个简单的小程序的开发过程吧。

文档API,工具

从之前的了解大概能知道小程序应该就是被微信优化、限制和规范过的一个webapp吧,确实通过微信小程序的开发工具和文档看来,就是一个“轻量级、功能非常不强大”的前端框架。开发技术也是典型的JS/CSS/HTML结构,微信非得给他们重新取了个名字,不过逼格还是得有的。

看看微信小程序官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=201715

根据自己的电脑下载开发工具:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201715

设计开发

github上看了几个别人开发的小demo,结合文档的浏览,大概知道了小程序的语法规则,然后就想做个啥呢。没有什么好的想法,就拿我的那个微信公众号来做个展示页面吧,合肥教师代课(hfjsdk)发布最新的合肥教师代课招聘信息。

整个程序非常简单,思路是:

  1. 就做一个页面,上面有个tab切换三个子页;
  2. 最新代课:显示代课招聘信息列表;
  3. 发布招聘:显示一篇介绍告知老师如何发布招聘信息的内容;
  4. 交流互动:显示交流互动的几条信息列表,QQ群、论坛等;
  5. 引入微信的WEUI样式库

代码非常简单,一个组件页面。

最新代课

发布招聘

交流互动

开发过程中要完全使用文档提供的标签,原来html的标签全部不可使用,事件方法也要使用文档提供的,原始方法全部不可用,从现在的文档里面,功能的确少的可怜啊,而且在页面布局上使用CSS的使用,还是遇到了很多不可理解的问题,可能这就是小程序内在的了。

开发工具提供了类似谷歌浏览器的调试工具还是不错的,用起来很顺手。

结语了

第一个功能非常简单的小程序就做完了,要说有什么用,没什么用,自己尝个鲜。一共花费了三四个小时,当然是没法发布的,小程序的发布要求还是挺严格的:企业资质、HTTPS、审核。

这个简单的小程序代码已经共享到了github上,有兴趣了解的可以去下载一下,在开发工具中添加项目附加进去就能看到了。Github地址:https://github.com/rockyxia/hfjsdk

转载请注明:Rockyxia Web技术博客 » 尝鲜一下微信小程序的开发过程
感谢阅读,如果您发现文章中有表述不准确,欢迎提出来,也欢迎交流相关问题,你可以去这里进行一对一问答交流。

(本篇完)