查看原文
其他

从零开始学做微信小程序,看这些就够了!

2016-11-14 王练 开源中国

#长按上图识别二维码,参与OSC源创会年终盛典#



随着正式开放公测,微信小程序再次万众瞩目,越来越多的企业和个人涌入到小程序开发的大军中。小程序究竟是什么?适合做小程序的产品有哪些?做小程序需要提前准备什么?如何零基础学做小程序?此文,将列出OSC上优质的资源供大学了解和学习。

一、新手入门

有关小程序的入门,首选自然是官方文档。 它解释了基本概念,有简单的设计指南和开发教程,能让你很好地对小程序有初步理解。 

● 微信小程序产品定位及功能介绍

https://mp.weixin.qq.com/debug/wxadoc/introduction/index.html?t=20161107

● 微信小程序设计指南

https://mp.weixin.qq.com/debug/wxadoc/design/?t=20161107

● 微信小程序简易教程

https://mp.weixin.qq.com/debug/wxadoc/dev/?t=20161107

● 微信小程序运营规范

https://mp.weixin.qq.com/debug/wxadoc/product/?t=20161107


看完这些你会发现,小程序主打的是比APP更轻量的形态,简单的开发,却接近app的体验,无需下载,扫码打开。那么,一些刚需且高频的金融类、电商类、教育类等其实是不适合接入小程序的。这些对功能的要求都很重,小程序难以承载。而且小程序不能像微信公众号一样被关注、群推送消息以及转发朋友圈,这也就意味着,它没有办法获取用户更多的信息,也不便于深度营销。

小程序适用哪些产品?
● 功能很轻,用完即走的,如刚需且低频的服务类、旅游类等● 基于社交场景的轻应用,或者说基于轻社交的应用● 非即时、可异步的应用● 初创型企业的MVP产品● 开发和设计能力有限的产品● 以及更多……

这些不错的资源你可能也会感兴趣:
● 【微信小程序开发•系列文章一】入门,这篇是 jsongo0 编写的系列文章的第一章,包含了小程序的介绍和前期准备工作。https://my.oschina.net/jsongo/blog/755702● memda 的 5款微信小程序开发工具使用报告,可以帮助你提前选择合适的开发工具。https://my.oschina.net/memda/blog/774569● 腾讯 Bugly 的 聊一聊微信小程序,这篇文章里有多位开发人员对小程序的看法,以及利弊探讨等等,能更好的理解小程序理念和适用场景。https://my.oschina.net/bugly/blog/755131

● 小程序的 API 文档 (非官方)

http://wxopen.notedown.cn/


二、开发实战

从9月22日凌晨微信小程序开始内测,就有不少开发者抢先进入小程序进行体验,并发表了大量的开发实战文章。这其中,有针对各个步骤、环节详细的开发教程、有针对单个项目的实践经验,有系列,有单篇……但对于初学者来说,都是极具有参考意义的资源。

1、博卡君 小程序开发系列教程:
在小程序公布内测不到10小时内即“神速”推出的开发系列教程,轰动一时。该系列内容从基础知识到项目实例都有详细表述,博主每日吐血赶稿,可歌可泣。:)

● 全球首个微信小程序(应用号)开发教程!通宵吐血赶稿 —— 序言、准备工作、项目构架

https://my.oschina.net/wwnick/blog/750055

● 第二弹!全球首个微信小程序(应用号)开发教程 —— 项目实例:结构以及配置、首页面开发

https://my.oschina.net/wwnick/blog/750495

● 第三弹!全球首个微信小程序(应用号)开发教程 —— 项目实例:名片夹详情页、个人页面开发

https://my.oschina.net/wwnick/blog/750974

● 第四弹!全球首个微信小程序(应用号)开发教程 —— 项目实例:编辑名片页面开发

https://my.oschina.net/wwnick/blog/751826

● 第五弹!全球首个微信小程序(应用号)开发教程 —— 项目实例:分组开发与左滑功能实现

https://my.oschina.net/wwnick/blog/752421

● 第六弹!全球首个微信小程序(应用号)开发教程 —— 项目实例:拍照收纳开发以及删除名片等

https://my.oschina.net/wwnick/blog/753597


2、 jsongo0 小程序开发系列教程:

和博卡君更偏向项目实例的讲解不同,jsongo0的系列文章更偏向从理论着手,对小程序各个特性、功能、版块进行了详细的分析与解读,并赋予独有的实践思路,内容详细全面,值得深看。(第一章在“新手入门”部分)

● 【微信小程序开发•系列文章二】视图层

https://my.oschina.net/jsongo/blog/755722

● 【微信小程序开发•系列文章三】数据层

https://my.oschina.net/jsongo/blog/755737

● 【微信小程序开发•系列文章四】模块化

https://my.oschina.net/jsongo/blog/782216

● 【微信小程序开发•系列文章五】主界面

https://my.oschina.net/jsongo/blog/782244

● 【微信小程序开发•系列文章六】生命周期和路由

https://my.oschina.net/jsongo/blog/782246

● 【微信小程序开发•系列文章七】websocket

https://my.oschina.net/jsongo/blog/757871


3、腾讯Bugly 小程序开发思考总结:
本文针对作者自己开发的“信用卡还款”项目,进行实践总结和思考,从创建项目,到编写代码,到运行、生成等等,整个过程都进行了详细的记录和说明,值得参考。

● 微信小程序开发思考总结——腾讯“信用卡还款”项目实践

https://my.oschina.net/bugly/blog/783518


4、秀杰 小程序开发系列教程:
同样是实战系列开发教程,针对记账应用进行了详细的讲解。作者在更新该系列的同时,还更新了开发新闻客户端开发加法计算器应用、实现购物车页面等实战课程,实力毋庸置疑。

● 微信小程序实战课程之记账应用开发 

https://my.oschina.net/huangxiujie/blog/753104

● 微信小程序实战课程之记账应用开发 —— 用户注册与登录

https://my.oschina.net/huangxiujie/blog/754653

● 微信小程序实战课程之记账应用开发(续)—— 实现集成日期组件

https://my.oschina.net/huangxiujie/blog/757692

● 微信小程序实战课程之记账应用开发(续二)—— 服务端登录篇

https://my.oschina.net/huangxiujie/blog/769837

● 微信小程序实战课程之记账应用开发(三)—— 服务端实现账目CRUD

https://my.oschina.net/huangxiujie/blog/774780

● 微信小程序实战课程之记账应用开发(完结)—— 对接服务端账目CRUD

https://my.oschina.net/huangxiujie/blog/775562


这些不错的资源你可能也会感兴趣:

● EarlGrey 的 手把手教你微信小程序开发,参考Demo一步一步实现小程序开发。

https://my.oschina.net/u/2510335/blog/752864

● 用 cnode 社区 api 做微信小应用 实例教程,两位老司机主讲。

https://git.oschina.net/hayeah/wxapp-cnode

● andot 的 如何在微信小程序中使用 Hprose,据说是独门绝技。

https://my.oschina.net/andot/blog/752919

● 风程序 的 微信小程序开发教程,步骤都列出来了。

https://my.oschina.net/wangxjie/blog/751464

● Phodal 的 使用 WebStorm 让你的「微信小程序」运行在Chrome浏览器上。

https://my.oschina.net/phodal/blog/752045


三、DEMO 源码
在实战之初,有些源码能够参考那真是极好的。目前码云上公布源码的和小程序相关的Demo已经非常非常多,各个类型的都有,在此仅列出部分,更多可在码云上搜索。

1、wmusic —— 凌晨一点写东东

微信小程序版简易情绪播放器 Demo

http://git.oschina.net/laohuangshu/wmusic



2、finance —— 黄秀杰

上文提到的实战课程之记账软件开发 Demo。该作者还发布了灵犀新闻客户端、灵动电商开源系统等等基于小程序的 Demo 源码,以及下拉菜单、单选按钮等组件源码,都可去看看。

http://git.oschina.net/dotton/finance


 


3、weixin —— zcoco

仿【微信】APP 

http://git.oschina.net/zcoco/weixin


4、WechatSmallApps —— oopsguy

豆瓣图书+知乎日报 Demo

http://git.oschina.net/oopsguy/WechatSmallApps

 


5、weixincalculator —— Edik计算器 Demo

https://git.oschina.net/edik/weixincalculator


6、wxapp-Breakfast —— hayeah

小林早厨 Demo

https://git.oschina.net/hayeah/wxapp-Breakfast



7、SmallAPP —— qieangel2013

购物 Demo

https://git.oschina.net/qieangel2013/SmallAPP


四、教学视频
在参考文字的操作过程中可能会出现一些难以发现的小问题,导致最终跑起来会有点瑕疵。因此,对照视频进行操作不失为更直观的学习方式。

1、博卡君 小程序 Demo 视频

在内测期间更新完多篇开发实战教学文章后,博卡君发布了 Demo 的演示视频,并对系列教程进行了总结,发表了开发感悟。在小程序正式公测后,再次更新了项目真机实测 Demo 视频。

https://my.oschina.net/wwnick/blog/756765


视频地址:

● 博卡君微信小程序 Demo

http://v.qq.com/x/page/z0335wao3u9.html

● 名片盒真机实测 Demo

http://v.qq.com/x/page/y0343ae0l1l.html


2、秀杰 小程序加法计算器视频
微信小程序(应用号)零基础课程之加法计算器应用。
视频地址:

● 加法计算器应用演示视频

http://v.qq.com/x/page/a03339wuotf.html




推荐阅读
【软件周刊】layer 3.0.0年终巨献,Solo 博客系统带来新版 Markdown 编辑器…
nredis-proxy 高性能Redis 服务中间件
12 月网易云大牛在北京源创会和你聊聊负载均衡

【源资讯】开源“双11”的选择困难症:Windows or Linux?Edge or Chrome?……

点击“阅读原文”查看更多精彩内容

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存