武汉小程序开发涉及的前端知识,以及自己的一些体会

作者:小站 来源:微信小程序 2019-09-08 18:24

这次把之前第一次写和小程序开发感受小结一下。本文不是写一个小程序开发教程,这种按步骤的教程网上有很多,不需要重要写了。我主要想谈一下做小程序开发应该储备的前端知识,以及自己的一些体会。

小程序开发涉及的前端知识

我的总体理解是:微信小程序是一个裁剪过的Web界面开发框架。首先要知道的是,微信小程序是一种Web程序,它的开发工具就叫“微信web开发工具”。(对,那个web是小写的,业余!)然后,小程序开发的组件也都是Web代码,如:.js、.json、.wxml和.wxss。虽然大多都是微信定制(裁剪)过,但是基本用法和标准Web技术是一致的。

微信裁剪这个Web技术栈是可以理解的,Web技术又多又乱,微信不可能把自己全部交出去的。所以,小程序定义为一个Web界面开发框架也挺好的。毕竟,现在后台技术已经非常成熟了,各种云技术平台越来越多,门槛越来越低,瘦客户端设计也深入人心,面向消费用户最重要的一环也就是界面了。很多移动App不也就只是一个界面而已,大部分计算都在服务器上。

按照微信小程序的开发文档,开发时首先要理解的是:框架设计。提到界面框架,大家尽可能联想一下各种MVC框架,例如Java Web开发常用的Struts、Spring MVC等。框架要处理的最重要元素就是:数据。数据到达之后(大多数实际应用来自于服务器),小程序用简单的语法绑定到界面上,像这样:

<!-- This is our View -->

<view> Hello {{name}}! </view>

<button bindtap="changeName"> Click me! </button>

注意:{{ }}就是绑定一个变量值。这个跟JSP标签和PHP模板像不像?不能再像了。如果你之前懂JSP和PHP,就知道除了直接绑定变量,一定还可以绑定简单的逻辑、循环。没错,微信小程序也一样支持。具体看文档吧。

各种编程语言和开发平台所解决的都是用户需求,只要将一种技术精通了,理解其他技术和语言也不会太难的。当然,多学习一些语言,能够帮助你自己去理解不同语言之间的相通点,而不是靠别人帮你分析。另外,越往上层的编程语言,相通的地方越多,因为它们越靠用户需求了。

框架的第二个重要概念是:页面。因为小程序就是一个界面开发框架,所以页面自然是它的核心部分。基本上可以这样认为:一个页面就是一个功能。然后,一个功能需要涉及到页面设计、数据展示、数据动态更新等方面,小程序把所有这些方面定义为组件,同一个页面的所有组件都放在同一个目录中(还是一个小沙箱的概念)。而不同页面之间的切换(生命周期),则由框架来处理。

// Register a Page.Page({

  data: helloData,

  changeName: function(e) {    // sent data change to view

    this.setData({

      name: 'MINA'

    })

  }

})

那么,一定要好好理解小程序开发的组件。这其实也是所谓框架必然提供的部分,标准HTML是这样(Web组件),各种MVC框架是这样(M、V、C),甚至也Android这样的移动平台也是这样的(四大组件)。开发者使用小程序的组件设计一整个页面(.wxml)。Web开发者肯定很熟悉XML,HTML其实也是一种弱XML,当然如果要用强XML,那就是XHTML了。这样我们就知道为什么微信还是Web了。如果还熟悉JSP Tag或Struts等,理解它就更轻松了。

微信把所有支持的界面控制都封装成了一个个用XML标签表示的组件。这种做法真的很普遍、很常见。我之前在企业打工时,公司开发的防火墙管理系统就是用XML来构建Java Swing界面的。现在一样用XML构建界面的Android,最熟悉不过了。XML支持严格的语法检查、可以表示任何结构的数据,一直都是最常用的Web技术之一。另外,Web界面都是树状结构,小程序也是一样的。

<tagname property="value">

  Content goes here ...

</tagename>

组件就是Web内容,界面当然还需要外观设计:样式。小程序的样式表文件扩展名为:wxss。大概意思是微信扩展的CSS吧。我初步写的小程序,感觉基本上直接使用标准CSS。开发工具上会有代码提示,里面有一些浏览器特殊支持CSS样式,如 -moz-、-ms-和-webkit-等。小程序用的浏览器内核应该是很新的,所以CSS的支持应该很好的。

编程代码最多的就是使用小程序框架API的部分:.js文件。这个可以看作是MVC模式中的控制器,采用JavaScript语法(也是必然的)。除了做页面流转(路由,学过Node.js应该很熟悉)、数据处理之外,这里还可以调用微信小程序提供的各种API,如:HTTPS请求(注意:不是HTTP)、文件操作、缓存、位置、设备、界面(Canvas)及微信开放接口等。反正,API就是微信开放使用的各种功能,以及来自于微信的用户数据。我的第1个小程序只使用了缓存和HTTPS请求。本来想做用户登录的,但是这个部分开发文档要求服务器做相应的处理,步骤比较多,所以暂时没有写。总的来看,只要掌握JavaScript开发,最好是开发过Node.js,写这些框架代码是很轻松的事情。

wx.request({

  url: 'test.php', //仅为示例,并非真实的接口地址

  data: {

     x: '' ,

     y: ''

  },

  header: {

      'content-type': 'application/json'

  },

  success: function(res) {

    console.log(res.data)

  }

})

最后,“微信web开发工具”确实做得不错,也进一步拉低了小程序开发的门槛,而且更新频率很快。感觉小程序团队是不是在加班?一天会更新几次(Mac版本)。

所以说,微信小程序并没有带来很多新的学习曲线,基本能力要求还是Web开发:HTML、CSS和JavaScript。放一张前端开发修炼秘籍吧,供大家自己练:

https://github,com/kamranahmedse/developer-roadmap

不过,小程序会涉及很多的后台交互,所以也有必要去学习一些后端的技术,不精通也至少要了解一下。最方便的就是学Node.js了,当然Java、PHP的常用框架也是可以学的,如:Spring MVC等。虽然我早就不用这些框架了,但是学习还是有必要的。学习这些后台技术有助于前端做好交互方面的开发。例如,上图最下面(最高深)的部分,还是设计模式。设计模式是前后端通用的,不过后台应用的时间更长,可以参考的东西好找一些。好吧,先写到这里吧。


本文地址:微信小程序开发频道 https://www.dayku.cn/wxxcx/3190.html,武汉易企推建站公司提供一站式网站制作开发服务:武汉网站建设、网站开发、高端网站设计制作、手机网站开发,微信小程序开发等建站服务,制作周期短,价格实惠,效果满意;以及全网营销、网站优化服务、百科词条创建修改、新媒体引流、公司负面公关处理等


相关文章相关文章
  • 如何制作一个武汉微信小程序呢?每个开发阶段的产品分析!

    如何制作一个武汉微信小程序呢?每个开发阶段的产品分析!

    如何制作一个微信小程序呢? 事情起因是这样的,因为想参加一个国内刚刚举办不久,也还不是很知名的计算机竞赛(对哦,我一个哲学学生为什么想要参加某计算机竞赛呢?),恰巧又认识几个厉害的技术大佬;于是乎,我们便开始组队参加比赛了咯。 最后呢,也拿...

    2019-09-11 18:10
  • 武汉小程序制作找哪家?亲身体验小程序后有一些观点与想法

    武汉小程序制作找哪家?亲身体验小程序后有一些观点与想法

    张小龙对于小程序的期待,我们是看得出来的。这个小家伙,可是要走通百度轻应用和Google Chrome OS无法完成的路。未来小程序的走向如何发展,我们暂时无法预计。但就昨天一天的体验来说,我们还是可以看出一些东西的。...

    2019-09-11 17:55
  • 一篇文章教你读懂微信运营与武汉小程序开发你需要注意什么呢?

    一篇文章教你读懂微信运营与武汉小程序开发你需要注意什么呢?

    我最经常对我的客户朋友提起的一句话就是,大部分人以为公众号的生死取决于它的运营,其实不然,在我看来,一个公众号最重要的就是菜单栏的开发与完善,如果你花了钱做了开发那么至少你的钱花在了能看到的地方,而这些恰恰是你学不会的。但如果你花钱做了你自...

    2019-09-10 19:54
  • 武汉小程序开发必备技能清单,写给开发人员的小程序代码要点

    武汉小程序开发必备技能清单,写给开发人员的小程序代码要点

    微信一出小程序,除了各大媒体的内容转发,微信自己就生产了许多开发干货,但这么多干货你有空消化吗?小宝贴心地帮你把要点都摘出来了,欢迎收藏转发! 一、必备技能清单 1、微信标记语言 WeiXin Marked Language(WXML) 2、微信样式表 (WeiXin Style She...

    2019-09-07 17:51
  • 武汉微信小程序模板有哪些区别呢?对各个类别进行详细讲解

    武汉微信小程序模板有哪些区别呢?对各个类别进行详细讲解

    自从我写了一篇关于小程序需要多少钱的文章后,有很多商家通过加微信或打电话的方式来咨询我,大部分商家都觉得模板和定制开发的区别讲得很明白、很透彻,但是有一部分商家由于预算、商业模式等问题,对于定制开发兴趣不大,但现在毕竟是互联网时代,周围商...

    2019-09-06 18:53
  • 武汉的企业或商家他们开发小程序是选择订制,还是选择模板?

    武汉的企业或商家他们开发小程序是选择订制,还是选择模板?

    几个月来,已有超过两千家企业(或创业者)联系笔者咨询小程序开发事宜。大多数人由于搞不清订制和模板的区别,所以不清楚自己应选择开发哪种小程序。...

    2019-09-06 18:47
本地企业
              可提供上门服务

便捷

本地企业可提供上门服务

提供适合、专业可行方案

周到

提供适合、专业可行方案

5-10分钟售后响应机制<

贴心

5-10分钟售后响应机制

按效果收费,无效果不收费

放心

按效果收费,无效果不收费

行业高标准,效果稳定可靠

稳定

行业高标准,效果稳定可靠

1-3个月排名上百度首页

快速

1-3个月排名上百度首页

武汉易企推建站公司;公司地址:武汉市武昌区静安路6号5.5创意产业园4楼;公司官网:https://www.dayku.cn

服务热线:18120550335 / 027-88866235 欢迎来电咨询; 联系QQ:1193073039

Copyrigh@2017-2030 版权所有:武汉易企推网络科技有限公司 备案号:鄂ICP备17012199号