正文

微信小程序：开发之前要知道的三件事

噜噜修  噜噜修  2022-08-19  181

关键词：

前言

微信之父张小龙在年初的那次演讲中曾表示：“我自己是很多年的程序员，我觉得我们应该为开发的团队做一些事情”。几个月后，微信正式推出微信应用号（即微信小程序），在互联网中掀起了又一波热潮。
于是，很多人准备要开发微信的小程序，如果你真的想要开发小程序，就要先学会一套微信特制的“开发语言”。为了更好地上手这门开发语言，下面这三件事你一定要知道：

语言与文件

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

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

微信小程序：开发之前要知道的三件事

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

提升10倍效率的三件事

几乎每个软件开发人员或程序员都见过其他人编写的代码，说明了“任何人都可以编码”。但你有没有遇到过所谓的神话般的“10倍效率的开发人员”？作为一个10倍效率的开发人员，在编写代码方面做得很少,更多的是知道... 查看详情

最容易被优秀程序员看不起的三件事……(代码片段)

【CSDN编者按】开发人员们似乎患上了“银弹综合症”，面对技术难关，把太多的期望寄托在所谓的新技术中，却常常低估了一些最基本或许也是最有效的方法。原文链接：https://nvnh.io/index.php/2022/11/28/3-underrated-thin... 查看详情

程序员最想干的三件事！

作者|西乔责编|张红月出品| 《新程序员》编辑部如果说软件改变世界，那么背后的功臣必属于程序员，一个在外人看来喜欢穿着格子衫，与电脑形影不离的高智商群体，他们有着用代码创造美好世界雄心壮... 查看详情

程序员最想干的三件事|漫画

作者|西乔责编|张红月出品|《新程序员》编辑部如果说软件改变世界，那么背后的功臣必属于程序员，一个在外人看来喜欢穿着格子衫，与电脑形影不离的高智商群体，他们有着用代码创造美好世界雄心壮志。在... 查看详情

程序员最想干的三件事|漫画

请问：微信小程序可靠吗？

知道的说下1.微信小程序与之前各方开发的app相比，各方所开发出来的app的代码非常的复杂，业务系统很难统一，所以每一家开发出来的app安全性表现不同，有一些开发商推出来的app安全性非常低，下载完成之后还会带来很多的... 查看详情

微信小程序要这样去解读

微信小程序要这样去解读九个月之前张小龙的一次公开演讲第一次提到应用号，今天终于以小程序的名字正式对外小范围公测，只有200个邀请名额，我知道你肯定没有被翻牌子，我也没有。不管是朋友圈、订阅号、服务号，只要... 查看详情

创办公司不能搞砸的三件事

如果说现在经济是蓬勃发展的，那指的是创业阶段。最近的《华尔街日报》（WallStreetJournal）一篇文章指出，创业阶段的融资需求极旺，以至于像对冲基金公司、私募股权公司和主权财富基金公司都对持股初创公司进行了投资。... 查看详情

新年最该坚持的三件事：运动，读书，思考

回首冬去春来又尽年，风花雪月谈笑间。癸卯新年终于如约而来。过去一年，每个人都过得不容易。肆虐的病毒，失序的生活，迷茫的未来……让我们无数次沮丧崩溃。好在走过了这些沟沟坎坎，我们总算见... 查看详情

在开发第一个android应用之前需要知道的5件事：

...每一阶段要用到的技能和编程语言？建立一个Android应用程序可以归结为两个主要技能/语言：Java和Android系统。Java是Android的通用编程语言，但是Android还包括学习用于app界面设计的XML语言，学习Android概念，以及从Java编程角度运用... 查看详情

知道这三件事，ui设计新手就能掌握设计规范

提起”设计规范“这个词语，许多UI设计师都一脸懵逼，更不用说那些UI设计新手了。而这个在国人眼中看似“陌生”的词汇，却已在国外盛行已久。到底什么是设计规范呢？为什么要做设计规范？如何构建一套设计规范呢？本... 查看详情

微信小程序怎样连接数据库？

微信小程序是不能直接连数据库，要通过接口连接数据库，目前微信小程序只支持https。小程序是指微信公众平台小程序，可以帮助开发者快速的开发小程序，小程序可以在微信内被便捷地获取和传播，是一种不需要下载安装即... 查看详情

微信小程序渲染层错误

...层错误2.为什么添加wx:if="arr.length>0就可以解决问题微信小程序渲染层错误？假设view层有两个地方要刷新，姓名，年龄。对应的逻辑层的变量this.data.name,this.data.age当开发人员调用this.setData()前两个值都改变的情况下，如果开... 查看详情

国产3d打印机的成功逆袭，只因做好了这三件事

...具”，而这一切转变仅仅发生在几年之间。回顾到2012年之前，还没有多少人知道3D打印，那时候3D打印机还被称作“快速成型机”，市面上能够买的品牌和型号也非常有限，大部分来自国外，即便是桌面级的3D打印机价格也要数... 查看详情

[译]关于python中的数字你可能不知道的3件事

如果您使用Python进行过任何编码，那么您很有可能在某个程序中使用了数字。例如，您可能使用整数来指定列表中值的索引。但是Python中的数字不仅仅是它们的原始值。让我们看看你可能不知道的关于Python中数字的三件事。1.数... 查看详情

微信小程序之helloworld!

微信小程序之HelloWorld!前言正文一、微信开发者注册二、开发工具下载三、工具安装三、创建项目四、项目结构讲解1.app.js2.app.json3.app.wxss4.project.config.json5.sitemap.json6.pages7.utils前言在做微信小程序之前，最好要有一些JavaSc... 查看详情