技术大讲堂 |《如何在5分钟内了解小程序开发》

更新时间

2017年1月9日,微信创始人张小龙在2017微信公开课Pro上发布的小程序正式上线。

相信大家都使用过微信小程序,这是一个非常方便的系统。张小龙说过:“小程序是一种不需要下载安装即可使用的应用,它实现了应用「触手可及」的梦想,体现「用完即走」的理念,用户不用担心安装过多的APP软件。”我们能够直接在微信输入关键词搜索相关的小程序来使用,依靠着微信强大的生态,未来还能用小程序完成很多事情。

从数据上,小程序的发展是十分蓬勃的。截止 2022 年末,互联网小程序超过 780 万,DAU 突破 8 亿,人均使用次数超过 12 次,这说明小程序正在以不可思议的速度融入网民生活的方方面面。

那么,该如何自己开发出一个小程序呢?接下来由小编带大家一起学习小程序开发的相关知识,帮助大家确定学习的方向,下面我们将分为两大点进行讲解。

01. 小程序的结构

1. 框架结构

小程序的运行环境分成渲染层和逻辑层,小程序的渲染层和逻辑层分别由2个线程管理:渲染层的界面使用了WebView 进行渲染;逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面,所以渲染层存在多个WebView线程,这两个线程的通信会经由微信客户端(下文中也会采用Native来代指微信客户端)做中转,逻辑层发送网络请求也经由Native转发。

2. 目录结构

小程序的目录结构分成公共文件和页面文件。公共文件由三个部分组成,分别是公共函数app.js,公共配置app.json以及公共样式app.wxss。

app.js负责页面的逻辑处理,每个小程序都需要在 app.js 中调用 App 方法注册小程序实例,绑定生命周期回调函数、错误监听和页面不存在监听函数等。然后通过在js里面实例化去进行下一步的逻辑处理。app.json的功能十分强大,用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现等。拥有一套固定的语法,可以参照官方文档。app.wxss 是小程序的全局样式文件。

页面文件主要由admin和index组成,admin一般为后台页面,index一般为首页页面,整体上与公共文件的区别是微信提供了语法文件(xml),类似于html文件,能够书写标签实现数据框架。其次admin文件整体上优先级高于app,写法上类似。

02. 小程序的使用

1. 数据渲染

在页面数据渲染的方式有多种,最简单的就是在页面的小程序标签内写数据;数据绑定的方式则是在小程序页面的 js 文件中定义数据,然后使用特定的语法 {{data}}在 wxml 页面渲染出来。这种方法类似于vue中的数据渲染方式,简单来说就是,将数据展示在页面上。

在框架中,使用 wx:if=”” 来判断是否需要渲染该代码块:语句一般为wx:if=”{{ condition }}”,也可以用 wx:elif 和 wx:else 来添加一个 else块。

列表渲染需要在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item。

2. 事件

在开发过程中,事件可以绑定在组件上,当达到触发事件的条件,就会执行逻辑层中对应的事件处理函数。比如,在button按钮中绑定clickMe函数,在js模块中写出函数的具体代码,点击按钮时就会触发事件。

3. API

小程序的开发框架提供了丰富的API接口,开发人员可以通过调用小程序提供的API接口去调用微信提供的能力,例如:获取用户信息,本地存储,支付功能等。

上述图片就是通过调用getUserInfo,快速地获取了用户的信息,如用户的昵称、性别等简单的数据。在复杂的开发过程中,调用API能够节省时间和精力,减少工作量,提高开发效率,是简化开发流程一项很重要的工具,并且用API提供的功能,小程序可以提供更丰富、更便捷的用户体验。例如,调用地图API可以提供精确的定位和导航,调用支付API可以实现快速、安全的支付功能。

最后

看完上面的内容,相信大家对小程序开发需要重点学习和掌握的知识已经有所了解。在后续开发过程中,如果遇到相关的问题,欢迎大家联系沟通交流!

整体来说,小程序开发是一个富有挑战性但潜力巨大的领域。通过合理的规划、设计和优化,开发者可以打造出吸引人且高度可用的小程序,从而吸引更多用户并提升品牌价值。在不断学习和适应变化的过程中,开发者将能够在小程序市场中脱颖而出,并取得成功

更新时间