从便于理解角度来说,可以把小程序看成类H5页面,提供了视图层描述语言,WXML 和 WXSS 以及基于JavaScript的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,可以让开发者可以方便的聚焦于数据与逻辑上。这里wxml相当于html,wxss相当于css。因此对于前端开发来说小程序有点“似曾相识”的感觉,很容易上手,对于后端开发来说鉴于小程序开发良好的官方文档及社区支持,应该也比较上手。那么小程序开发到底该如何入门,初学者应该掌握哪些基本知识呢?
一、创建第一个小程序,快速启动模板
创建小程序前,先花点时间了解小程序开发官方教程,https://mp.weixin.qq.com/debug/wxadoc/dev/index.html?t=201769
该教程讲的很细,包括如何申请开发账号,怎么使用开发工具创建第一个小程序,框架介绍,组件介绍,API文档等,因此建议大家多看看官方教程,按教程所示:
1、我们要注册一个小程序开发账号,获取小程序开发appID;
2、下载、安装开发工具;
3、创建一个空白小程序,假设项目名称为demo1:“快速启动模板”,里面包含微信头像获取,日志等;
4、了解小程序的项目结构,各文件构成;
5、也是最关键的,彻底搞明白demo1的wxml,wxss和js代码,了解页面如何跳转,事件如何触发,WXML如何编写,api如何调用等。
二、体验小程序
1、先体验官方的小程序示例,可以微信扫描二维码,或者发现-->小程序-->搜 小程序示例,获取体验小程序。该示例包括了常用组件功能演示。
小程序示例,源码可以下载,不过源码比较旧是1月份的,下载地址。
2、多多体验三方小程序
如:mobike单车,京东购物等,尤其京东购物建议大家看下,功能相对来说比较复杂。
三、尝试编写自己的第一个小程序
一个原则,功能尽量简单,但是尽可能多用组件,如:input,text,map,picker等。
写完后,想法提交审核,并发布,了解小程序整个开发流程。
四、查看小程序的运营数据
登录 小程序管理后台 - 查看数据分析和小程序运行监控情况,如js报错等,通过此举可进一步完善小程序。
当然,开发人员也可以在小程序里自行全局捕捉错误,并记录处理。App提供onError错误监听函数,onPageNotFound页面不存在监听函数,开发人员只要在app.js中实现这两个函数即可。通常只要实现onError错误监听函数即可,如:
onError: function(msg) {
console.log("onError: ", msg);
// 错误上报.
},
onError: thirdScriptError
abc is not defined; [Component] Event Handler Error @ pages/site/launch/index#bound enterApp
ReferenceError: abc is not defined
at r.enterApp (http://127.0.0.1:52970/appservice/pages/site/launch/index.js:132:17)
at Object.r.safeCallback (http://127.0.0.1:52970/appservice/__dev__/WAService.js:14:1926)
at http://127.0.0.1:52970/appservice/__dev__/WAService.js:16:8629
at d (http://127.0.0.1:52970/appservice/__dev__/WAService.js:16:11030)
at a (http://127.0.0.1:52970/appservice/appservice?t=1528097294392:1085:9472)
at e.registerCallback (http://127.0.0.1:52970/appservice/appservice?t=1528097294392:1085:9659)
at m.forEach (http://127.0.0.1:52970/appservice/appservice?t=1528097294392:1085:1513)
at Array.forEach (<anonymous>)
at d (http://127.0.0.1:52970/appservice/appservice?t=1528097294392:1085:1493)
at WebSocket.j.onmessage (http://127.0.0.1:52970/appservice/appservice?t=1528097294392:1085:1386)
五、查漏补缺
不管小程序对你来说是“似曾相识”还是“一无所知”,通过上述环节,你应该切实体会到自己的短板,查漏补缺,不仅有技术层面上(如:js,css等前端技能),还有规范上(小程序设计规范),更有程序设计、系统架构及性能优化层面。
1、js,推荐更多的使用ES5,ES6;
2、css,大家务必掌握flex布局,尽量使用flex替代原来的float,关于flex布局,网上有篇文章介绍的比较深入啦,建议大家看下:
关于flex布局,后续我会写个小程序的demo。
3、小程序设计规范,建议按腾讯提供的设计指导原则走,具体参考:微信小程序设计指南。
4、小程序前后端性能优化
1)前端性能优化
1-1)条件渲染请合理使用wx:if和hidden,通常相对不变的输出用wx:if, 切换频繁用hidden;
1-2)合理使用setData更新数据;
1-3)长列表页请使用分页功能,图片请使用延迟加载;
1-4)清理不需要的页面,资源文件;
2)后端优化,通常是庞大的系统工程
2-1)优化参数、输出数据结构,减少传输数据;
2-2)合并网络请求;
2-3)静态资源cdn;
2-4)缓存、服务器集群等;
5、小程序功能组件化、插件化、分包加载,或部分功能使用Webview加载H5实现
随着项目变大,复杂,我们势必要考虑开发效率和开发协同性问题,为此,我们需要构建基础组件,业务抽象构建业务基础模块。有些绚丽的活动页面,还必须用H5来实现。
当我们不再聚焦于小程序如何实现功能,而是小程序如何构建小巧、精致、快速响应的移动应用时,那么恭喜你,即将被打上资深、专家等身份标签啦。