微信小程序开发基础知识一-摩杜云开发者社区

小程序和普通前端网页开发的区别

1、运行环境：微信小程序是在微信内部运行的，而普通前端网页是在浏览器中运行的。这意味着微信小程序必须依赖微信提供的运行时环境，而普通前端网页可以在不同的浏览器上运行。因此，微信小程序开发需要专门的开发工具和技术栈。

2、开发语言：微信小程序主要使用小程序开发框架，该框架使用的是类似于HTML、CSS和JavaScript的技术，但与普通前端网页开发使用的标准Web技术略有不同。微信小程序框架引入了一些特定的组件和API，用于与微信生态系统进行交互。

3、页面结构：微信小程序采用了自定义的组件和页面结构，与传统的HTML和CSS稍有不同。它使用WXML（WeiXin Markup Language）作为页面结构语言，WXSS（WeiXin Style Sheet）作为样式表语言，这些语言虽然与HTML和CSS相似，但具有一些不同的特性和语法规则。

4、调试和测试：微信小程序开发需要使用微信提供的开发工具进行调试和测试，而普通前端网页可以使用各种浏览器的开发者工具。微信小程序开发工具提供了模拟器和调试工具，以帮助开发者在微信环境中测试应用。

5、权限和限制：微信小程序受到一些限制和权限控制，开发者不能像在普通网页中那样自由地访问浏览器功能。微信小程序必须经过微信的审核才能发布，而普通前端网页可以在任何Web服务器上托管并立即访问。

微信小程序开发与普通前端网页开发在技术栈、环境和工具等方面存在差异，需要开发者熟悉微信小程序框架和规范，以便有效地创建和维护小程序应用。

核心区别

网页开发渲染线程和脚本线程是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应，而在小程序中，二者是分开的，分别运行在不同的线程中。网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作。而如上文所述，小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API。这一区别导致了前端开发非常熟悉的一些库，例如 jQuery、 Zepto 等，在小程序中是无法运行的。同时 JSCore 的环境同 NodeJS 环境也是不尽相同，所以一些 NPM 的包在小程序中也是无法运行的。

微信小程序的代码构成主要包括以下几个关键部分

App 配置文件（app.json）：

app.json 文件用于配置小程序的全局信息，如小程序的名称、图标、页面路径、窗口样式、网络超时时间等。这个文件必须位于小程序的根目录下。页面文件（.wxml、.wxss、.js、.json）：

微信小程序的页面由四个文件组成，分别是：

.wxml（Weixin Markup Language）：用于定义页面的结构，类似于HTML。 .wxss（Weixin Style Sheet）：用于定义页面的样式，类似于CSS。 .js：用于定义页面的逻辑，处理用户交互、数据请求等。 .json：用于配置页面的一些特殊选项，如页面标题、导航栏颜色等。

小程序逻辑：

在 .js 文件中，你可以编写小程序的逻辑代码，包括事件处理、数据处理、网络请求等。微信小程序使用的是JavaScript语言。

全局样式文件（app.wxss）：

app.wxss 文件用于定义小程序全局的样式，会影响所有页面。这里可以定义一些全局的样式规则，如字体大小、颜色、通用的样式类等。组件文件（.wxml、.wxss、.js、.json）：

除了页面文件，小程序还支持自定义组件，组件也包括 .wxml、.wxss、.js 和 .json 四个文件，用于构建可复用的UI元素和逻辑。

小程序生命周期函数：

在 .js 文件中，你可以定义小程序的生命周期函数，例如 onLaunch（小程序初始化）、onShow（小程序显示时触发）、onHide（小程序隐藏时触发）等。这些函数可用于管理小程序的整个生命周期。

网络请求和API调用：

微信小程序提供了丰富的API用于实现各种功能，如网络请求、用户信息获取、地理位置等。你可以在 .js 文件中使用这些API来实现小程序的具体功能。

事件处理：

微信小程序支持事件处理，你可以在 .wxml 文件中为各种UI元素绑定事件，然后在 .js 文件中编写事件处理函数，以响应用户的操作。

小程序页面跳转：

通过特定的API，你可以实现小程序页面之间的跳转和传递数据，以构建多页面应用。小程序云开发（可选）：

微信小程序还支持云开发能力，允许你使用云数据库、云函数等云服务，以简化后端开发和数据管理。总的来说，微信小程序的代码构成包括配置文件、页面文件、全局样式文件、组件文件、逻辑代码、生命周期函数、事件处理、API调用等多个部分，通过这些组成部分可以构建出一个完整的微信小程序应用。每个文件和功能都有其特定的作用和用途，协同工作以实现小程序的功能和交互。

小程序页面

微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。

紧接着通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径:

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ]
}

小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行:

App({
  onLaunch: function () {
    // 小程序启动之后 触发
  }
})

每个页面对应的JS文件的大体内容就是:

Page({
  data: { // 参与页面渲染的数据
    logs: []
  },
  onLoad: function () {
    // 页面渲染后 执行
  }
})

Page 是一个页面构造器，这个构造器就生成了一个页面。在生成页面的时候，小程序框架会把 data 数据和 index.wxml 一起渲染出最终的结构，于是就得到了你看到的小程序的样子。

在渲染完界面之后，页面实例就会收到一个 onLoad 的回调，你可以在这个回调处理你的逻辑。

JSON文件在小程序代码中扮演静态配置的作用，在小程序运行之前就决定了小程序一些表现，需要注意的是小程序是无法在运行过程中去动态更新JSON 配置文件从而发生对应的变化的。

数据绑定

微信小程序的数据绑定是一种非常重要的机制，它允许你将数据与页面元素进行关联，使得页面的数据能够自动更新，并且可以通过用户的操作来改变数据。数据绑定主要通过两个方面来实现：双括号表达式和数据绑定事件。

双括号表达式：

在微信小程序的 .wxml 文件中，你可以使用双括号表达式将数据绑定到页面的元素上。例如，你可以在一个元素的属性中使用双括号来绑定数据，如下所示：

html Copy code <view>{{message}}</view> 这里的 message 是一个变量，它会根据变量的值来显示在 <view> 元素中。当 message 的值发生变化时，页面上相应的内容也会随之更新。

数据绑定事件：

除了将数据绑定到元素的属性上，你还可以使用数据绑定事件来实现用户与数据之间的交互。例如，你可以为一个按钮绑定一个点击事件，并在事件处理函数中修改相关的数据，然后数据绑定会自动更新页面。示例代码如下：

<button bindtap="changeMessage">Change Message</button>
<view>{{message}}</view>

在上面的例子中，当用户点击按钮时，会触发 changeMessage 事件处理函数，该函数可以通过修改 message 的值来改变页面上显示的文本。

数据绑定的实现：

在小程序的 .js 文件中，你需要定义一个数据对象，其中包括你想要绑定到页面的数据。例如：

Page({
  data: {
    message: 'Hello, World!'
  },
  changeMessage: function() {
    this.setData({
      message: 'Data binding is awesome!'
    })
  }
})

在上述代码中，data 对象中包含了一个名为 message 的数据项，并在 changeMessage 函数中使用 setData 方法来修改 message 的值。一旦数据发生变化，与之相关联的页面元素就会自动更新。

数据绑定是微信小程序的一个强大功能，它使得页面的数据管理变得更加方便和实时，同时也提供了更好的用户交互体验。通过合理使用数据绑定，你可以更容易地开发出具有动态性的小程序应用。