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

作者:武汉网络公司 来源:易企推科技 2020-04-29 18:17

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

我的总体理解是:微信小程序是一个裁剪过的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)

}

})


本文地址:微信小程序开发频道 http://www.hkm168.com/wxxcx/1516.html,武汉易企推网络公司,是一家专业的武汉网络推广,网络营销,品牌营销策划,品牌推广公司,提供一站式全网营销推广服务:小程序开发,网站建设,SEO百度排名,SEM竞价托管,品牌营销推广、360搜狗百度竞价开户、百度地图标注、百科词条创建修改、新媒体引流加粉、公司负面公关处理等;另外,转载本文请保留本文地址,谢谢!


相关文章相关文章
湖北网络营销导航
黄石网络推广十堰seo优化恩施seo优化随州网络推广荆州seo优化荆门网络推广黄冈seo优化咸宁网络推广襄阳seo优化孝感seo优化潜江网络推广鄂州网络推广天门网络推广宜昌seo优化 武汉SEO优化 武汉SEO培训 百度推广开户 今日头条开户 危机公关处理 武汉网络营销 小程序开发
本地企业
              可提供上门服务

便捷

本地企业可提供上门服务

提供适合、专业可行方案

周到

提供适合、专业可行方案

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

贴心

5-10分钟售后响应机制

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

放心

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

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

稳定

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

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

快速

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

武汉易企推网络公司;公司地址:武汉市武昌区静安路6号5.5创意产业园4楼;公司官网:http://www.hkm168.com XML地图

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

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