想要开发小程序,首先必须学习一套微信专用的“开发语言”。
为了帮助大家快速上手这门开发语言,微信官方提供了非常详细的开发文档:
如果你没有时间阅读所有内容,这里有一个节省时间的替代方案:
志晓程旭(微信号:)准备了一份超精简版的官方开发文档,不仅囊括了官方文档全部关键信息,而且内容只有原文的三分之一。
只要看完本文,你就能快速上手小程序开发。
注:本文适合有一定编程基础的人群阅读,如果想从零开始学习小程序开发,请继续关注智小程序(微信号)后续内容。
语言和文件
大家可能已经知道,微信小程序开发与其他平台开发最大的区别就在于微信所采用的开发语言和文件非常“特殊”。
小程序所使用的程序文件类型大致分为以下几类:
WXML(Mark,微信标记语言)
WXSS(、微信样式表)
JS(小程序主体)
从语言上看,小程序似乎重新定义了一套标准,但其实和前端的“三件套”——HTML、CSS、 没太大区别。
接下来我们来对比一下小程序开发语言与“前端三件套”的异同:
HTML 与 WXML:两者区别较大,如果你之前没有接触过开发的话,可能会觉得有点头疼。其实 WXML 在开发中更像是一个界面 XML 描述文件,更适合用来构建程序界面;而 HTML 则更倾向于展示文章(这跟 HTML 的历史有关)和构建互联网页面。
WXSS与CSS:这两者在语言上几乎没有什么区别,可以直接使用。
JS文件:小程序的JS文件和前端开发使用的JS几乎相同,小程序的JS增加了一些微信的API接口,并删除了一些不必要的功能(例如DOM)。
在语言方面,小程序与前端开发完全对接,学习成本较低,但这并不意味着所有前端开发人员都能直接无缝迁移。
如果你从前端开发转向小程序,需要注意以下两点:
HTML和WXML文件的构造思路差别较大,如果之前只接触过前端开发,可能需要一段时间才能适应WXML的编写方式。
虽然小程序用到了前端语言,但并不代表可以继续用前端的开发思路去开发(类似前端开发转向Node.js),小程序对前端开发的要求从“搭建界面”升级为“开发完整应用”,前端开发还是需要意识的转变。
接口构建
基本逻辑
WXML和WXSS是小程序界面元素声明及样式描述文件,WXML最大的特点是将界面元素以视图(view)的方式连接起来,通过程序逻辑()将信息更新实时传递到视图层。
View 类似于 HTML 中的 p 元素,构建时可以多层嵌套视图,视图中可以放置任意可视元素。
需要注意的是,一旦元素超出了屏幕范围,用户就无法再看到它了,这一点和 HTML 有很大区别。例如,把手机屏幕想象成一个舞台,舞台外的演员是无法被观众看到的。
小程序有专门用于滚动的视图,如果希望界面是可自由滚动的界面(比如列表等),可以使用-view视图,在WXSS中将其大小调整为整个屏幕,并将-y(上下滚动)或-x(左右滚动)设置为true。
微信小程序开发-大连微信发展电商难吗?"/>
小程序中无法直接使用 DOM 控制 WXML 元素,如果需要更新数据,需要使用 WXML 提供的数据绑定和元素渲染方法。
另外需要注意的是,小程序的网格布局体系采用了Flex布局,这是W3C在2009年提出的一种布局标准。
绑定数据
对于单个字段,开发者可以使用数据绑定来更新信息,绑定的数据除了可以在加载时更新外,还可以以函数的形式在主 JS 程序中更新,更新也可以体现在界面上绑定的数据上。
条件渲染和列表(循环)渲染
条件渲染适用于有意外情况提示的页面(比如无法加载列表或详情时的提示等),其渲染是有触发条件的,即满足条件时才渲染页面,否则则忽略或者渲染另一段代码。
两个花括号内包含的判断条件中的变量是在主程序JS代码中的数据中声明的。
如果需要在界面中构建列表,可以在 WXML 中使用循环渲染,将同一元素的渲染代码分组,循环数据以数组的形式写入 data 中,方便 WXML 访问。
小程序开发-大连微信开发电商难吗?" />
渲染完成后,渲染判断条件的变化能够影响界面的变化。
模板和参考
WXML支持使用模板和引用来减少代码大小。
模板是在 WXML 代码中重用相同代码的一种方法。
可以将多个模板写入同一个文件并在其他文件中引用。
微信小程序开发-大连微信发展电商难吗?"/>
如果需要引用整个页面,则需要使用它。
风格
开发者可以通过 WXSS 样式表在 WXML 中定义元素样式。WXSS 和 CSS 代码一样,可以直接使用选择器来选择元素。在 WXML 中,也可以直接在 WXSS 文件中定义元素 ID 和样式。
用户操作和事件响应
由于微信不使用HTML,所以无法通过添加超链接(a元素)的方式来监听用户点击事件,对于需要监听点击事件的元素,需要在WXML中使用属性或者来进行绑定。
除了单击之外,微信还提供了按住、开始触摸、释放等事件响应。
在WXML中绑定事件之后,就可以在主程序JS中使用了。
其他API中还有其他对应的事件,可参阅微信小程序官方文档。
当你需要在小程序的页面之间跳转时,你应该使用wx.()方法。
微信小程序开发-大连微信发展电商难吗?"/>
需要注意的是,微信限制页面层级跳转最多为五级,开发的时候需要注意是否超出了相应的限制。
网络访问
小程序支持三种类型的请求,一种是直接HTTP连接请求,请求后直接返回结果并结束连接;一种是长连接,当一方主动关闭连接时结束连接。
微信除了以上两种发送接收纯文本的连接方式外,还提供了文件发送接收接口,小程序里录制的语音、选择的照片都需要通过此方法上传。
通过小程序访问网络需要服务器必须支持安全连接,端口号必须为443,同时小程序只能访问开发者在注册小程序时设置的服务器地址。
多媒体和存储
如果你需要在小程序中播放多媒体(包括音频和视频)或者存储数据,你不能使用中提供的标准,必须使用微信提供的小程序多媒体播放控制接口和存储接口。
与声音相关的接口有两个:音频播放和音乐播放。音频播放提供了播放、暂停、停止播放三个接口,不提供跳转到某个播放时间点的功能,也不能获取当前播放进度。音乐播放接口除了提供上述基本的播放控制外,还提供了音乐状态查看、监控等功能。
小程序提供照片及视频数据交换接口,通过该接口,小程序可以访问用户选择或拍摄的照片和视频。
通过录音、视频拍照接口获取的多媒体信息是临时的,需要通过小程序存储文件接口进行永久保存。
对于文本数据,小程序也提供了存储该类数据的接口。从其他应用平台转入的开发者需要注意,小程序不提供类似数据库的本地数据存储格式,而是以“字段-值”一一对应的格式存储数据。
硬件相关
小程序依托微信,提供了很多硬件相关的API,小程序可以通过API获取以下数据。
系统相关信息(包括网络状态、设备型号、窗口大小等)
重力传感器数据
指南针数据
有了上面的API,应该可以很方便的写出类似“摇一摇”这样的交互页面了。不过请注意:这些数据只能主动获取,无法通过这些值变化的回调来实时获取。
推送服务
小程序提供推送服务,可以随时向用户发送必要的通知,但请注意,推送服务只能用于通知提醒,不能用于群发消息。
在小程序中,推送服务被称为“模板消息”(之前开发过服务号的开发者应该很熟悉)。开发者需要在微信小程序后台注册新的模板推送消息(如购买成功通知等)并通过审核后,才可以在小程序中使用模板消息推送服务。具体审核标准请参考相应文档。
模板消息审核通过后,开发者需要先从微信服务器获取,然后把模板中的值、模板号以及动态变量(如订单号、价格等)提交给微信,微信会向用户推送通知。
用户信息与微信支付
小程序在用户同意的情况下,可以获取用户信息。小程序必须先通过微信登录界面向用户请求授权登录,授权成功后,小程序才能展示并使用用户信息。使用微信登录时,请注意对消息进行签名确认其完整性,确保数据未被篡改。
小程序中也可以使用微信支付,需要注意的是,发送支付请求时需要在消息中添加签名,以确认消息的完整性。
以上就是智晓程序为大家整理的官方开发文档的“关键信息”。
不过想要熟悉小程序,光看是不够的,还需要自己动手去操作。
如果在开发过程中遇到问题,最好的办法就是查阅微信官方小程序开发文档,相信在文档中你能找到大部分问题的解决方案。
本文标题:微信小程序开发-大连微信开发
当前网址:
成都网站建设公司_创新互联网,为您提供微信公众号、网站内链、品牌网站建设、网页设计公司、搜索引擎优化、网站策划
广告