小程序应该如何入门,初学者应该掌握哪些基本知识?

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/chuangxin/article/details/78847673

      从便于理解角度来说,可以把小程序看成类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布局,网上有篇文章介绍的比较深入啦,建议大家看下:

           1)  Flex 布局教程:语法篇

           2)  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来实现。

    当我们不再聚焦于小程序如何实现功能,而是小程序如何构建小巧、精致、快速响应的移动应用时,那么恭喜你,即将被打上资深、专家等身份标签啦。

          

展开阅读全文

没有更多推荐了,返回首页