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

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


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


相关文章相关文章
  • 你的行业适合做小程序吗?不同的行业小程序适合什么样的功能?

    你的行业适合做小程序吗?不同的行业小程序适合什么样的功能?

    各行各业,形形色色。商家们想拥有一款自己行业的小程序,可由于不熟悉微信小程序,可能就用了不适合自己行业的小程序功能而错失用户。那么不同的行业小程序适合什么样的功能? 餐饮行业 适用于中餐馆、西餐馆、快餐店、烘焙店、火锅店、茶叶店、酒吧、酒楼、...

    2021-01-19 18:01
  • 微信小程序和app哪个更好?小程序会取代app开发吗?

    微信小程序和app哪个更好?小程序会取代app开发吗?

    程序,简单来说就是app的缩略版,不需要下载安装就可以在其他平台上直接运行。 目前我们接触最多的就是微信平台上的小程序,很多为客户提供需求的企业都开发了小程序功能,只需要搜索使用,就可以轻松的完成各种各种需要在网页或者app上完成的业务。 关于app...

    2021-01-15 20:21
  • 如何做微信小程序?制作小程序的费用详解!

    如何做微信小程序?制作小程序的费用详解!

    微信小程序越来越火爆。依托微信的大平台,小程序在推广运营上有诸多优势。很多实体商城会制作商城小程序。那么我们如何来打造一款属于自己的小程序呢?下面由弘毅小编为大家详细介绍制作小程序的流程及价格。 如何做微信小程序?制作小程序的费用详解! 在介...

    2021-01-13 19:52
  • 教育行业适合用小程序吗?具体该如何制作?

    教育行业适合用小程序吗?具体该如何制作?

    教育行业适合用小程序吗?具体该如何制作?除了课本知识外,兴趣班也成了不少家长的选择,让孩子学音乐、学美术,各种技能点加满。眼看着教育培训市场一路走高,直到去年年底,整个行业受到沉重打击,周边的培训机构一家接着一家关门停业,实体经济不堪重负...

    2021-01-07 14:15
  • 微信小程序能做到哪些功能?开发一款小程序企业要多少钱?

    微信小程序能做到哪些功能?开发一款小程序企业要多少钱?

    开发一款小程序企业需要花多少钱呢?微信小程序能做到哪些功能?找小程序外包公司并不难,网上一搜一大把,难的是如何从众多外包公司中,挑选一家性价比最高的,花钱最少、小程序质量过硬、后期服务用心的公司。 那开发一款小程序企业需要花多少钱呢? 小程...

    2021-01-05 16:27
  • 制作微信小程序大概多少钱?小程序具体价格明细一览表

    制作微信小程序大概多少钱?小程序具体价格明细一览表

    微信小程序目前越来越火,它比开发一个app的成本要低很多。很多企业会选择做一款小程序来扩展自己的业务,但是对小程序制作及价格却不是很了解。到网上去找,发现报价都是五花八门。那么我们如何来选择一家合适的报价方案呢?今天小编为大家详细介绍小程序制...

    2020-12-25 16:29
本地企业
              可提供上门服务

便捷

本地企业可提供上门服务

提供适合、专业可行方案

周到

提供适合、专业可行方案

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

贴心

5-10分钟售后响应机制

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

放心

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

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

稳定

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

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

快速

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

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

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

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