武汉微信小程序开发涉及的前端知识个人经验分享!

作者:小站 来源:微信小程序 2019-08-30 15:52

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

 

我的总体理解是:微信小程序是一个裁剪过的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等。虽然我早就不用这些框架了,但是学习还是有必要的。学习这些后台技术有助于前端做好交互方面的开发。例如,上图最下面(最高深)的部分,还是设计模式。设计模式是前后端通用的,不过后台应用的时间更长,可以参考的东西好找一些。

 

好吧,先写到这里吧。我一般写文章只有30分钟以内时间,不像其他专业自媒体大V,号称花3-5个小时写一篇文章。我没有那么多时间花在这里的,一般是想到哪里写到哪里。所以,中间有错别字什么的,大家自行纠正哈。


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


相关文章相关文章
本地企业
              可提供上门服务

便捷

本地企业可提供上门服务

提供适合、专业可行方案

周到

提供适合、专业可行方案

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号