网页的一般开发流程中，我们通常会通过JS操作DOM（对应的描述产生的树）

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

网页的一般开发流程中，我们通常会通过JS操作DOM（对应的描述产生的树）

小程序的框架也采用了这个思路，如果需要在界面上显示一个Hello World字符串。

WXML是这样写的：

{{msg}}

JS 只需要管理状态：

this.setData({ msg: "Hello World" })

通过 {{ }} 语法将变量绑定到接口称为数据绑定。 单独的数据绑定不足以完整地描述状态和接口之间的关系。 还需要 if/else 和 for 等控制功能。 在小程序中，这些控制能力是通过wx:开头的属性来表达的。

更详细的文档请参考WXML

WXSS 风格

WXSS具备了CSS的大部分功能，小程序也在WXSS上做了一些扩展和修改。

添加了新的尺寸单位。 在编写CSS样式时，开发需要考虑到移动设备的屏幕会有不同的宽度和设备像素比例，并使用一些技术来转换一些像素单位。 WXSS底层支持新的尺寸单位rpx。 开发可以免去转换的麻烦，直接交给小程序底层来做转换即可。 由于转换使用浮点运算，计算结果会与预期结果略有不同。 提供全局样式和局部样式。 app.json 和 page.json 的概念与之前相同。 你可以将app.wxss编写为全局样式，该样式将应用于当前小程序的所有页面。 本地页面样式page.wxss只会在当前页面生效。另外，WXSS只支持部分CSS选择器。

更详细的文档请参考WXSS。

JS逻辑交互

一个服务仅仅有界面展示是不够的，它还需要与用户进行交互：响应用户点击、获取用户位置等。在小程序中，我们通过编写JS脚本文件来处理用户操作。

{{ msg }}
点击我

当点击按钮时，我们希望在界面上显示的msg为“Hello World”，所以我们在on:上声明一个属性，并在JS文件中声明一个方法来响应这次点击：

Page({
  clickMe: function() {
    this.setData({ msg: "Hello World" })
  }
})

响应用户操作就是这么简单。 更详细的活动请参考文档活动 | 微信开放文档。

另外，你还可以在JS中调用小程序提供的丰富的API。 使用这些API，您可以轻松激活微信提供的能力，例如获取用户信息、本地存储、微信支付等。在前面的例子中，wx.( ) | 在pages/index/index.js中调用微信开放文档获取微信用户的头像和昵称，*后将获取到的信息显示在界面上。 更多API请参考文档API | 微信开放文档。

通过本章，您已经了解了小程序中涉及到的文件类型以及对应的角色。 小程序宿主环境中 | 微信开放文档，我们将本章涉及到的文件通过“小程序框架”传递到“字符串”上，让它们全部发挥作用。

小程序托管环境

我们把微信客户端给小程序提供的环境称为托管环境。 借助宿主环境提供的能力，小程序可以完成许多普通网页无法完成的功能。

上一章我们讲解了小程序涉及到的文件类型。 我们来谈谈基于这个项目这些文件是如何协同工作的。

渲染层和逻辑层

首先我们简单了解一下小程序的运行环境。 小程序的运行环境分为渲染层和逻辑层。 WXML模板和WXSS样式工作在渲染层，JS脚本工作在逻辑层。

小程序的渲染层和逻辑层分别由两个线程管理：渲染层的界面进行渲染； 逻辑层使用线程来运行JS脚本。 一个小程序有多个接口，因此渲染层有多个线程。 这两个线程之间的通信会通过微信客户端（以下也用来指微信客户端）进行中继，逻辑层也会通过发送网络请求，小程序的通信模型如下图所示。

渲染层和逻辑层的详细文档可以参考小程序框架

框架| 微信开放文档。

程序和页面

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

然后通过app.json的pages字段就可以知道你当前小程序的所有页面路径：

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

该配置描述定义了项目中的两个页面，位于pages/index/index和pages/logs/logs。 页字段中写入的**页是该小程序的主页（打开小程序时看到的**页）。

于是微信客户端加载了首页的代码，通过小程序的一些底层机制，就可以渲染出首页了。

小程序启动后，会执行app.js中定义的App实例的回调：

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

整个小程序只有一个App实例，所有页面共享。 更多事件回调请参考文档 注册程序 App注册小程序| 微信开放文档。

接下来我们简单看一下小程序的页面是如何写的。

可以观察到pages/logs/logs实际上包含了4种类型的文件。 微信客户端首先会根据logs.json配置生成一个界面。 您可以在此 json 文件顶部定义颜色和文本。 然后客户端将加载页面的WXML结构和WXSS样式。 *后，客户端将加载logs.js。 可以看到logs.js的大致内容是：

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

Page是一个页面构造函数，它生成一个页面。 在生成页面时，小程序框架会将数据和index.wxml一起渲染，渲染出*终的结构，这样你就得到了你所看到的小程序的外观。

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

有关 Page 构造函数的更详细文档，请参阅注册页面 | 注册页面微信开放文档。

成分

小程序为开发提供了丰富的基础组件网页的一般开发流程中，我们通常会通过JS操作DOM（对应的描述产生的树），开发可以像搭积木一样将各种组件组合起来形成自己的小程序。

就像HTML的div、p等标签一样，在小程序中，只需要在WXML中写入对应的组件标签名称，即可将组件显示在界面上。 比如你需要在界面上显示一张地图，那么你只需要这样写就可以了：

在使用组件时，还可以通过属性向组件传递值，从而使组件可以显示不同的状态。 例如，如果我们希望一开始的地图中心的经纬度是广州，那么就需要声明(中心经度)和(中心纬度)两个属性：

组件的内部行为也会被开发通过事件感知。 例如微信小程序页面开发，用户点击地图上的某个标记，可以在js中编写一个函数来处理：

wx.getLocation({
  type: 'wgs84',
  success: (res) => {
    var latitude = res.latitude // 纬度
    var longitude = res.longitude // 经度
  }
})

当然，你也可以通过style或者class来控制组件的外部样式，以适应你界面的宽度、高度等。

更多组件请参考小程序组件视图容器 | 微信开放文档。

应用程序编程接口

为了让开发能够轻松激活微信提供的能力，比如获取用户信息、微信支付等，小程序提供了很多API供开发使用。

要获取用户的地理位置，只需：

wx.getLocation({
  type: 'wgs84',
  success: (res) => {
    var latitude = res.latitude // 纬度
    var longitude = res.longitude // 经度
  }
})

调用微信扫码功能，您只需：

wx.scanCode({
  success: (res) => {
    console.log(res)
  }
})

需要注意的是，大多数API回调都是异步的，你需要处理代码逻辑的异步问题。

更多API能力请参见小程序API | 微信开放文档。

通过本章，您已经大致了解了小程序操作的一些基本概念。 开发小程序后，您需要发布您的小程序。 下一章小程序协作与发布 | 微信开放文档，你就知道发布之前需要做哪些准备。

小程序配置全局配置

小程序根目录下的app.json文件用于全局配置微信小程序，确定页面文件的路径、窗口性能、设置网络超时、设置多个标签页等。

完整的配置项说明请参考小程序全局配置 全局配置 | 微信开放文档

以下是一个app.json，其中包含一些常见的配置选项：

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/index",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

完整的配置项说明请参考小程序全局配置 全局配置 | 微信开放文档

页面配置

每个小程序页面还可以使用同名的.json文件来配置该页面的窗口性能。 页面中的配置项会覆盖app.json中的相同配置项。

完整的配置项说明请参考小程序页面配置 页面配置 | 微信开放文档

例如：

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

配置小程序/配置

微信现在允许在小程序内搜索。 开发可以通过.json配置或者管理后台页面包含开关来配置自己的小程序页面是否允许微信索引。 当开发允许微信索引时，微信会以爬虫的形式索引小程序的页面内容。 当用户的搜索词触发索引时，小程序的页面可能会显示在搜索结果中。 爬虫在访问小程序中的页面时，会携带具体的 user-agent: 和场景值微信开放文档: 1129。需要注意的是，如果小程序爬虫发现的页面数据与呈现不一致真实用户的页面将不会包含在索引中。

具体配置说明

页面采集设置：可以关闭整个小程序的索引，小程序管理后台-功能-页面内容访问-页面采集开关；

详情小程序

配置：可以关闭新组件以索引特定页面

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等