微信小程序入门-星座匹配

编辑：宝哥软件园来源：互联网时间：2021-12-12

新天龙八部

评分

这是微信小程序的入门课程。通过学习本课程，您可以快速开始小程序开发。在学习这门课程之前，你需要具备基本的前端开发能力，包括HTML/CSS/Javascript，至少你要能切图和理解js语法。

为什么学习小程序

在学习小程序之前，我们首先要了解什么是小程序，它们有什么独特的功能。小程序是基于微信实现特定功能的载体，我们也知道有基于微信的微信官方账号和微网站。小程序有什么特点？我们不能用HTML5做手机站吗？接入微信的SDK后，功能非常强大。小程序最大的特点就是可以拥有媲美原生应用的流畅体验，这是非常吸引人的，也是相比HTML5最大的优势。尤其是学习之后，你会发现小程序的开发非常简单，开发简单，体验也不错。世界上没有这么便宜的东西，但是小程序就是这样的东西。

为什么小程序可以接近原生体验？这是因为小程序在底部被称为本机组件。我们开发小程序的前端代码，可以理解为微信内部调用原生组件的快捷方式。所以小程序一定要用全新的语言，不能是HTML5。本课程就是带领大家一起学习这门语言，完成一个小例子，让大家对小程序开发有一个快速直观的了解。

小程序开发语言介绍

小程序的开发语言和HTML5非常相似。视图层的两种语言WXML和WXSS分别对应HTML和CSS，而逻辑层仍然是Javascript。为了便于理解，我将通过与HMLT5的对比来解释applet的这三种开发语言。

首先，我们说小程序中最小的区别就是这个Js。它与JS在web开发上只有两点不同。首先，没有与DOM操作相关的函数，与Nodejs相同。众所周知，JS语言本身并不包含DOM操作，DOM操作是浏览器环境为JS做的扩展。第二个区别是小程序中的Js增加了一些微信独有的API，很容易理解，比如微信扫码、上传下载，这些功能必须单独提供。综上所述，去掉了DOM操作，增加了一些API。另外值得一提的是，小程序中的js支持模块化和ES6。

WXSS和CSS还有两个区别。首先，增加了一个rpx单元，它具有自动适应屏幕宽度的功能。规则是1rpx=屏幕宽度/750，这是一个非常容易使用的单位。可以说完美解决了屏幕适配的问题。如果你在HTML5中用过大众单位，你会发现它们是一样的东西，除了1vw=屏幕宽度/100，以及比例。第二个区别是WXSS只支持。类，# ID，元素，Ele，Ele，3360before，3360after。请注意，不支持后代选择器。这可以通过在我的开发工具中进行测试来支持，但是文档明确表示只支持上面的那些。然后我们会听文档，后代选择器会综上所述，WXSS相比CSS增加了rpx单元，不支持后代选择器。

最后，WXML中有很多内容，尤其是HTML中完全没有的一些东西，比如数据绑定、条件呈现、列表呈现、模板、引用。这些事情我就不在这里说了。如果你之前使用过任何前端MVVM框架或者前端模板引擎，应该对这个内容比较熟悉。如果你不知道这些事情，也没关系。回去仔细看文件的这个内容，相信你能做到。

这里我们谈两件事，标签和事件。首先，标签完全改变了。不能使用所有的HTML标签。相反，它们是小程序提供的一组标签。官方称之为组件。无论它们被称为什么，这个组件都是以与HTML标签相同的方式编写的。它也由标签名、属性和内容组成。它也可以嵌套，样式可以通过类、id和样式来添加。然而，小程序

微信小程序上手项目-星座配对(图1)

如果你想做这样一个从底部弹出的滚动选择器，想想是不是很麻烦。有很多风格和js可以写，但是你可以用applet的组件来写，带一个picker组件，你就拥有了所有。

1 Picker bind change=' Picker change ' value=' { { index } } ' range=' { { array } } '代码太多，样式都是自成一体的，一次工作量少很多。这是小程序设计中非常好的一点，它在背后做了大量的封装，只是为了方便开发者开发，实际上达到了目的；

小程序的事件和HTML5中的有什么区别？第一个是事件绑定的写法不同。小程序是绑定事件名称或捕获事件名称。绑定绑定不能防止冒泡，但是catch可以防止冒泡。此外，支持的事件类型也不同。一般事件仅支持touchstart、touchmove、touchend、touchcancel、tap、lon。

gtap，除了这些事件以外，再有的事件就是组件的自定义事件，比如picker组件就有一个change事件，可以通过bindchange来绑定处理函数；第三个区别是事件对象不一样了，

12345678910111213141516171819202122232425262728293031323334

{"type":"tap","timeStamp":895,"target": {  "id": "tapTest",  "dataset":  {    "hi":"WeChat"  }},"currentTarget":  {  "id": "tapTest",  "dataset": {    "hi":"WeChat"  }},"detail": {  "x":53,  "y":14},"touches":[{  "identifier":0,  "pageX":53,  "pageY":14,  "clientX":53,  "clientY":14}],"changedTouches":[{  "identifier":0,  "pageX":53,  "pageY":14,  "clientX":53,  "clientY":14}]}

自定义事件会有detail属性，touch事件包括两个不同的属性，这些东西不用记，用到的时候知道去哪找就行了，总结一下，事件绑定的写法bind/catch，事件类型6种+组件自定义事件，事件对象的内容有区别；

小程序开发框架介绍

掌握了小程序的开发语言之后，我们还必须掌握小程序的开发框架，框架故名思意就是条条框框，是用来具体的告诉你怎样开发小程序，我们先看一下小程序的目录结构，

weapp-tree

这是一个比较典型的微信小程序项目结构，最下面三个文件名字都叫app，一个js一个json一个wxss，这三个是固定的，就得叫这个名字，就得放在这，另外的三个文件夹分别是放页面、放样式的、放工具类的，当然你可以根据项目实际需求随便改。

其中这个app.json就是小程序的配置文件，可以看到打开里面是一个对象，配置了页面和window的一些属性，具体还有哪些配置以及他们的意义可以自己到文档中去进一步的了解。

然后我们就从上往下说这个目录结构，首先你会发现页面是以文件夹为组织单位的，每个页面至少要包含js wxml wxss这三个文件，而且这些文件都跟文件夹同名，这是一个约定，必须这么干，然后还有一个json文件是可选的，里面可以对当前页面做单独的设置。下面这个util文件夹没什么说的，不是硬性要求，可有可无。再然后app.js，这个文件是非常重要的，它主要做两件事，一是定义小程序的生命周期函数，二是可以在这里定义全局数据或全局方法，我们看代码，

12345678910111213141516171819202122232425262728293031

//app.jsApp({  onLaunch: function () {    //调用API从本地缓存中获取数据    var logs = wx.getStorageSync('logs') || []    logs.unshift(Date.now())    wx.setStorageSync('logs', logs)  },  getUserInfo:function(cb){    var that = this    if(this.globalData.userInfo){      typeof cb == "function" && cb(this.globalData.userInfo)    }else{      //调用登录接口      wx.login({        success: function () {          wx.getUserInfo({            success: function (res) {              that.globalData.userInfo = res.userInfo              typeof cb == "function" && cb(that.globalData.userInfo)            }          })        }      })    }  },  globalData:{    userInfo:null,    apiKey: "c2d3e04cc633644f1c3ae3f6eea94564"  }})

这个onLaunch就可以定义一个小程序初始化的回调，下面getUserInfo显然就是一个自定义的函数了，再往下是一个globalData属性，也是自定义的，用这些配置将小程序初始化后，可以在任意页面中使用getApp()方法获取到小程序示例，进而访问到这些自定义方法或数据。