第 1 章 微信小程序与云开发从入门到实践从零开始做小程序——开发认识微信小程序

小北的参考工具书

  • 小程序开发的图书并不少,这本书仍然值得你拥有!
    首先,这是一本全栈小程序开发教程,循序渐进,由浅入深,介绍了小程序开发你想了解的方方面面,包括近其小程序开发的各种新技术应用。
    其次,本书的讲解非常通俗易懂,看得懂,学得会,如果你是程序开发小白,只要按着本书的路线学习,多加操练,相信你很快从小白变身为开发高手。
    适应面广,本书不仅适合入门,也可以进阶提升,如果你是有一定开发经验的程序员,本书提供的难度较高的商城项目,讲解了小程序开发的前后端技术,该项目几乎接近于商业项目,可以大大提升你统筹项目的能力。
    为使读者能够很快掌握小程序的开发技能,本书除提供了大项目,各章还适时提供了小案例,读者可以边学边练,轻松掌握开发技巧。
    最后,本书丰富的资源也很难得,比如,74集视频教程由作者亲授,视频教程还额外介绍了新闻客户端,读书社区的开发开发,扩充了本书的内容,本书提供的源代码,也可以帮助读者上机练习。
    总之,这是一本集专业性、先进性、实用性为一体的小程序开发的好书,不走弯路,才能很快达成目标,期待你能从本书得到预期的收获。

从零开始做小程序

一、开发认识微信小程序

1.1小程序的发展史

2016年9月21日,微信小程序正式开启内测,在内测期间,各种目光和评论都集中在微信小程序这个新兴的应用平台上,等待观望其后续的发展。

2017年1月9日,第一批小程序正式上线,用户可以在微信上体验各种各样小程序提供的服务。小程序的热度达到最高,各种褒贬随之而来。

2017年12月28日,微信开放了小游戏功能,并且通过"跳一跳"再次引爆热点。

2018年1月18日,微信提供了小程序侵权的投诉渠道,平台规范性更加完善。

2018年1月25日,小程序开放与移动端APP互相跳转与交互的功能。 2018年3月,小程序广告组件启动内测,开发者应用变现的能力增强。

2018年7月13日,小程序支持收藏,用户可以将喜欢的小程序直接添加到"我的小程序"中。

2018年8月10日,小程序后台数据分析工具进一步升级,运营人员可以在小程序后台看到更多用户数据。

1.1.1优质小程序示例
1.2小程序的适用场景

不需要下载安装,第一次使用门槛极低。

节省流量、节省安装时间、不占用桌面。

体验仅次于原生应用,但要比网页应用好很多。

小程序平台更统一,操作流程更统一,更容易上手使用。 对于开发者来说,极大的降低开发成本,并且可以忽略平台差异。 是否需要紧密结合线下,如果需要,小程序非常合适。

业务逻辑是否足够简单,小程序有体积限制,无法承载过于负责的业务。

业务逻辑是否即用即走型,小程序不会占用桌面,因此相较于移动端应用,不利于做连续性强的业务。

是否要可以借助微信用户群,如果你的业务场景不和微信用户体系相抵触,那么使用小程序非常合适,会使得你的业务非常容易推广。

1.2.1小程序设计建议微信小程序设计指南 | 微信开放文档 (qq.com)https://developers.weixin.qq.com/miniprogram/design/

小程序的特点之一就是高效,因此在设计界面时,应尽量的减少冗余信息,将当前界面最核心、最主要的功能展示出来。同时,一个界面中也不要有多个核心功能点,这样会使重点分散,为用户的使用带来困惑。

小程序更适用于即用即走的功能性应用,因此在设计时,每一步流程要环环相扣,明确的指引用户一步一步的完成业务场景。切勿在某个业务流程中间穿插其他的业务或需要用户操作的行为,打断用户当前的使用流程是非常糟糕的。

小程序在设计时,要考虑用户的前进与返回,页面导航结构要清晰,让用户明确的知道下一步或上一步的场景。同时,也要进行好异常的处理,程序在使用过程中,免不了会有异常发生,要注意捕获与处理,必要时将异常的原因告知用户。

由于小程序是微信平台内的平台,在设计时,其配色方案要和微信本身的风格保持一致,过大的色差会使用户产生不适。

例如下拉刷新与上拉加载功能组件,耗时任务的等到组件、功能按钮选择框、弹窗、提示框、输入框等等组件应尽量与微信保持一致,在字体和文本风格颜色的选择上也应尽量与微信保持一致,这样可以给用户带来舒适的体验性。

二、准备工作

2.1注册小程序开发账号

https://mp.weixin.qq.com/cgi-bin/registermidpage
微信公众平台 (qq.com)https://mp.weixin.qq.com/下拉找到小程序图标点击去:

前往注册:

邮箱激活:

点击链接激活:

个人信息登记:(注册范围有5种:个人、企业、政府、媒体和其他组织)

前往小程序:

2.2小程序后台功能

成员管理 反馈管理 统计功能 高级功能

2.3下载和配置小程序开发工具

微信开发者工具下载地址与更新日志 | 微信开放文档 (qq.com)https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

2.4发布小程序体验版与上架小程序

三、小程序版的HelloWorld程序

3.1创建一个小程序项目

其中,项目名称是项目的名字,小北这里命名为Hello World! ,目录选项用来设置项目所存放的磁盘位置,AppID 需要填入前面申请到的小程序账号中配给的AppID ,这里也可以使用测试号的AppID ,需要注意,测试号并不支持云开发,但这并不影响我们的学习。申请测试号 | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/devtools/sandbox.html

(小北的是:gh_85e1cb8fd838

开发模式可选小程序或插件,这里选择小程序

(目前,小程序的开发语言除了可以使用JavaScript 外,也支持TypeScript,对于CSS样式表来说,小程序框架也支持使用Less或Sass,如果读者对TypeScript、Less 和 Sass 不太熟悉也没有关系,只使用JavaScript 和 CSS 也可以开发出完整的小程序应用。)

最后,可以选择一个模板,微信开发者工具会根据模板的不同生成不同的基础代码,这里选择基础模板即可。

3.2成果展示:

相关推荐
IT毕设梦工厂4 分钟前
计算机毕业设计选题推荐-在线拍卖系统-Java/Python项目实战
java·spring boot·python·django·毕业设计·源码·课程设计
Jiaberrr5 分钟前
前端实战:使用JS和Canvas实现运算图形验证码(uniapp、微信小程序同样可用)
前端·javascript·vue.js·微信小程序·uni-app
everyStudy29 分钟前
JS中判断字符串中是否包含指定字符
开发语言·前端·javascript
城南云小白30 分钟前
web基础+http协议+httpd详细配置
前端·网络协议·http
前端小趴菜、30 分钟前
Web Worker 简单使用
前端
web_learning_32133 分钟前
信息收集常用指令
前端·搜索引擎
Ylucius38 分钟前
动态语言? 静态语言? ------区别何在?java,js,c,c++,python分给是静态or动态语言?
java·c语言·javascript·c++·python·学习
tabzzz40 分钟前
Webpack 概念速通:从入门到掌握构建工具的精髓
前端·webpack
h177113472051 小时前
单身狗的逆袭之路之开发相亲交友系统
微信小程序·小程序·交友·系统开发·回归算法
200不是二百1 小时前
Vuex详解
前端·javascript·vue.js