微信小程序开发之3个必须知道的事情
白羽 2018-06-20 来源 :网络 阅读 1088 评论 0

摘要:本文将带你了解微信小程序开发之3个必须知道的事情,希望本文对大家学微信有所帮助。



语言与文件

微信小程序来发与其他平台开发的最大差异在于:微信使用的开发语言和文件很“个性”。 
小程序所使用的程序文件类型大致分为以下几种:

· WXML(WeiXin Mark Language, 微信标记语言)

· WXSS(WeiXin Style Sheet,微信样式表)

· JS(JavaScript, 小游戏的主体)

在语言方面,下程序看似重新定义了一套标准。但实际上,他们与“前端三件套”(HTML、CSS和JavaScript)差不太多。来来来,看一下微信小程序开发语言和“前端三件套”的异同点。 

界面搭建

1、基本逻辑

WXML和WXSS两种文件是小程序界面元素声明及样式描述文件。

WXML最大的特点是以视图(View)的方式串联界面元素,并通过程序逻辑(AppService)将信息更新实时传递至视图层。

View类似于HTML中的div元素,在构建的时候,View可以被多级嵌套,View内可以放置任意视觉元素。

需要注意的是,元素一旦超出屏幕之外,用户就无法看到了,这是与HTML哟较大的不同。小程序哟专门用于滚动的视图。如果希望界面是一个可以自由滚动的界面(例如列表等),可以使用scroll-view视图,在WXSS中将其大小调整为整个屏幕,并设置scroll-y(上下滚动)或scroll-x(左右滚动)为true,

注意,小程序中不能直接使用DOM控制WXML元素。如果需要进行数据更新,就要使用WXML提供的数据绑定及元素渲染方法,还有一点,小程序的栅格排版系统使用的是Flex布局,它是W3C在2009年提出的一种排版标准。

2、绑定数据

对于单个字段,开发者可以使用数据绑定的方法进行信息更新。绑定的数据除了在加载的时候可以更新,也可以在JS主程序中以函数形式进行更新,更新同样可以反应到界面上被绑定的数据中。

3、条件渲染与列表(循环)渲染

条件渲染适用于有意外情况提示的页面(如无法加载列表或详情时,做出提示等等)。它的渲染带有触发条件,即符合条件时渲染这个页面,否则忽略或渲染另一端代码。两个花括号所包含的判断条件中的变量于主程序JS代码中的data中声明。将同一元素渲染代码进行集合。循环的数据可以通过数组的方式写入data中供WXML访问。渲染完毕后,渲染判断条件的变动可以影响界面变动。

4、模板与引用

WXML支持使用模板与引用减少代码体积。模板是在WXML代码中对相同的代码进行复用的方式。可以将多个模板写入至同一个文件,并使用import在其他文件中进行引用。如果需要整个页面引用,需要使用include。

5、样式

通过WXSS样式表,开发者可以定义WXML中的元素样式。WXSS与CSS代码一样,可以直接使用选择器选择元素,在WXML中也可以直接定义元素的id和class以便于在WXSS文件中进行样式定义。

6、用户操作与事件响应

由于微信使用的不是HTML,所以也不能通过添加超链接(a元素)的方式来检测用户的点击事件。对于需要监听点击事件的元素,应该在WXML中使用bindtap属性或catchtap属性进行绑定。除了点击一次,微信也提供按住、开始触摸、松手等事件响应。在WXML中绑定好一个事件之后,就能在主程序中使用。其他的API中也有相应的事件,这些事件乐意在微信小程序的官方文档中查阅到。当需要在小程序的页面间进行跳转时,应该使用wx.navigateTo()方式。 
注意,有关于页面层级跳转,微信将层级跳转限制在5层。在开发时一定注意不要超过了相应限制。

网络请求方式

网络访问小程序支持三种请求方式:HTTP连接、WebSocket、文件收发连接。

· HTTP连接:请求后直接返回结果,连接结束;

· Socket连接:持续性连接,当一方主动关闭连接时,连接结束;

· 文件收发连接:顾名思义,发生在文件传输时的连接。(录制的语音和选择的照片都需要这个连接完成)。

注意,通过小程序访问网络需要服务器必须支持HTTPS连接,且端口必须为443。同时,小程序只能访问开发者在登记小程序时设定的服务器地址。

 


本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之微信频道!


本文由 @白羽 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程