2019独角兽企业重金招聘Python工程师标准>>>

微信之父张小龙在年初的那次演讲中曾表示:“我自己是很多年的程序员,我觉得我们应该为开发的团队做一些事情”。几个月后,微信正式推出微信应用号(即微信小程序),在互联网中掀起了又一波热潮。

于是,很多人准备要开发微信的小程序,如果你真的想要开发小程序,就要先学会一套微信特制的“开发语言”。为了更好地上手这门开发语言,下面这三件事你一定要知道:

语言与文件

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

·        WXMLWeiXin Mark Language 微信标记语言)

·        WXSSWeiXin Style Sheet,微信样式表)

·        JSJavaScript 小游戏的主体)

在语言方面,下程序看似重新定义了一套标准。但实际上,他们与“前端三件套”(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布局,它是W3C2009年提出的一种排版标准。

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。同时,小程序只能访问开发者在登记小程序时设定的服务器地址。

开发语言和“前端三件套”的异同点

·        HTMLWXML两者差异比较大,如果之前没有接触过Android开发,可能会觉得有些头疼。事实上,WXML更像是Android开发中的界面XML描述文件,适合于程序界面的构建;而HTML则倾向于文章的展示(这与HTML的历史有关),以及互联网页面的构建。

·        WXSSCSS两者在语言上几乎没有差别,可以直接通用。

·        JS文件:小程序的JS文件与前端开发使用的JS几乎没有区别,只是小程序的JS新增了微信的一些API接口,并去除了一些不必要的功能(如DOM)。

在有眼上,小程序完全向学习成本最低的前端开发看齐,但这不代表所有开发者都能无缝迁移。如果你是从前端开发转向小程序,就要注意这两点:

·        1HTMLWXML两种文件的构建思想差异较大,如果之前只接触过前端开发,需要一点时间才能适应WXML的编写方法。

·        2、虽然小程序使用的是前端语言,但不代表可以继续沿用的开发思想进行开发。小程序对前端开发的要求从【构建界面】升级成【开发完整应用】,前端开发需要在意识上进行转变。

更多精彩内容,加群434623999

转载于:https://my.oschina.net/u/3709170/blog/1575075

微信小程序:开发之前要知道的三件事相关推荐

  1. 微信小程序开发教程:项目三表单组件 课后习题

    <微信小程序开发教程>主编/黄寿孟 易芳 陶延涛 湖南大学出版社 目录 一.单选题 二.多选题 三.判断题 四.填空题 五.简答题 1.请简单描述搭建node后台服务器的过程. 2.在调查 ...

  2. 微信小程序开发入门与实战(三种通信方法)

    @作者 : SYFStrive @博客首页 : HomePage

  3. 微信小程序开发一个小型商城(四、商品列表)

    上一篇文章,微信小程序开发一个小型商城(三.商品分类设计) 在从上一个界面跳转过来,会看到商品列表这个界面:如下图所示: 页面分析:从上到下:分别是一个已经定义好的自定义组件,下面的综合,销量,也是一 ...

  4. 微信小程序开发的完整流程介绍,新手必读

    自从跳一跳小程序游戏出现后,一夜之间,小程序就变得家喻户晓了,功能开发也越来越丰富,在微信搜一搜就会发现许多大品牌早已有自己的小程序了,越来越多的企业和商家都看中了这个风口,想快速开发出一款属于自己的 ...

  5. 微信小程序开发(2)_data属性

    假设我们的环境都做好了,现在我们开始开发自己的小程序 首先我们开发出自己的 Hello World 我们要做的事情是当前点击hello World的时候HelloWorld的颜色发生变化: 这个是我们 ...

  6. 微信小程序开发之选项卡

    选项卡是web开发中经常使用到的一个模块,在小程序中竟然没有,这里参考别人的文章自己做了一个双选项卡 实现思路: 通过绑定swichNav事件来控制currentTab(当前选项卡)和isShow(是 ...

  7. 微信小程序开发优秀教程及文章合集第一期

    2019独角兽企业重金招聘Python工程师标准>>> 我会不定期的选取一些优质教程,整理成辑,以便大家集中阅读: 新手向!微信小程序开发手记系列: 微信小程序开发手记<一&g ...

  8. 微信小程序开发分销制度济南_花店微信小程序开发教程

    如何将自己的鲜花商品快速配送出去,避免鲜花过期浪费,是很多传统花店商家的难题.不过随着微信小程序的出现,这一难题也渐渐得到了解决.花店商家可以通过自己的小程序商城,打通线上渠道,可以加大推广.扩大销量 ...

  9. 微信小程序开发简易计算器改进版

    微信小程序开发计算器有多种方法,但是大部分代码比较复杂.不容易理解.本案例进行了改进,主要是组件bindtap属性绑定的自定义函数clickBtn(),采用了switch语句,使得代码结构更加清晰,学 ...

  10. 微信小程序开发视频教程新鲜出炉

    微信小程序开发公测了,可是对于新手来说,不同的框架不同的开发机制,如何快速适应呢?微信小程序开发视频教程新鲜出炉了,从零开始一步一步搭建微信小程序,每个章节都会涉及到不同的知识点,等教程学习完你不但掌 ...

最新文章

  1. 做人留一线,日后好相见
  2. 用法与区别_指示代词this, that, these, those的区别和用法
  3. C#中ToString()格式大全(转)
  4. [转载MSDN]IIS 7.0中的Live Smooth Streaming -入门
  5. C#数组和集合专题2(Array)
  6. SQL Server中的MD5实现方法
  7. javaScript读取xml文件
  8. 将新项目上传到svn
  9. vc2008工程转vc2005
  10. coreldraw怎么画转弯箭头_新交规出炉,这样转弯会被扣8分罚款300,又有7.3万车主因此被罚!...
  11. 形形色色的Linux 发行版代号都在这里
  12. 周记录学习总结<大杂烩>
  13. 基于智能手机传感器数据的人类行为识别
  14. html文件 加壳,CDHtmlDialog加壳HTML5页面跳转错误解决(原)
  15. 科技助力精准扶贫:高德地图的河南公益行
  16. oracle数据库学习笔记(二)(创建表、DDL、DML、单行插入数据、多行插入数据)
  17. 如何在Mac上解决蓝牙问题
  18. pytorch geometric GraphSAGE代码样例reddit和ogbn_products_sage,为何subgraph_loader将sizes设成[-1]
  19. python人名查电话(字典)_Python基础练习——使用字典存储电话薄
  20. 2020谷歌学术指标出炉,CVPR成AI学术会议总榜第一名

热门文章

  1. 潘天佑博士2014微软学生夏令营演讲:如何培养领导力
  2. C标准库assert.h实现
  3. cassandra百亿级数据库迁移实践
  4. SCCM 2016 配置管理系列(Part5)
  5. jmeter将响应结果由Unicode转码成中文展示
  6. 随便写点时间相关的模块
  7. c++类的实例化,有没有new的区别
  8. Cisco BFD双向转发检测技术部署案例
  9. APP-V与RemotoAPP
  10. 首批互联网地图服务牌照发放 图吧地图获得甲级服务资质