Introducción al desarrollo de miniprogramas de WeChat (3)

antecedentes

En el artículo anterior, presentamos principalmente varias configuraciones del subprograma WeChat, incluida app.jsonla configuración global del subprograma WeChat, la configuración de page.jsonla página del subprograma, la configuración de project.config.jsonlas herramientas de desarrollo del subprograma, la configuración del sitemap.jsonsubprograma y la configuración del subprograma. recuperado por WeChat. Este artículo se utiliza principalmente para presentar la composición de la página de WeChat Mini Programs.

composición de la página

Las personas que se han dedicado a la programación web saben que la programación web usa una combinación de HTML + CSS + JS, que  HTML se usa para describir la estructura de la página actual, CSS se usa para describir la apariencia de la página y JS generalmente se usa para procesar la página. y el usuario interactúan. De hecho, la página del applet de WeChat también es equivalente a una página web, y su composición también es similar. Como se muestra en la siguiente figura, es el contenido contenido en un índice de página. El index.jsonartículo anterior ya mencionó la configuración de la página. Otros son index.wxmlsimilares HTMLa la estructura de la página para el applet de WeChat, index.wxssque es CSSsimilar a la descripción. La página parece, index.jspero se usa para la interacción del subprograma WeChat.

WXML

El siguiente código muestra el index.wxmlcontenido del proyecto de prueba que creamos, que se puede ver  HTML muy similar, WXML que consta de etiquetas, atributos, etc. Pero también hay muchas diferencias, principalmente dos diferencias.

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <block wx:if="{{canIUseOpenData}}">
      <view class="userinfo-avatar" bindtap="bindViewTap">
        <open-data type="userAvatarUrl"></open-data>
      </view>
      <open-data type="userNickName"></open-data>
    </block>
    <block wx:elif="{{!hasUserInfo}}">
      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
      <button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
      <view wx:else> 请使用1.4.4及以上版本基础库 </view>
    </block>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>
复制代码

Las etiquetas tienen diferentes nombres y encapsulan más componentes.

Al escribir HTML, las etiquetas que se usan a menudo son  div,  p,  spanAl escribir una página, los desarrolladores pueden combinar diferentes componentes en función de estas etiquetas básicas, como calendarios, ventanas emergentes, etc. Otra forma de pensar, dado que todos necesitan estos componentes, ¿por qué no podemos empaquetar estos componentes de uso común para mejorar en gran medida nuestra eficiencia de desarrollo?

从上边的例子可以看到，小程序的 WXML 用的标签是 view, button, text 等等，这些标签就是小程序给开发者包装好的基本能力，微信小程序还提供了地图、视频、音频等等组件能力。微信小程序组件中提供了很多封装好的组件，这里就不过多介绍，以后会专门写一篇文章结合例子详细介绍微信小程序提供的组件。

在这里我还是忍不住想要解释一下为什么这里不过多介绍细节，这就牵扯到这篇文章的主题是宿主环境和页面结构而不是具体实现，而且微信小程序提供了很丰富的组件，如果都详细介绍则详略失当，让人抓不住重点。这又让我想到了之前初中学习语文关于陶渊明读书方法的争论，到底是略其大观“不求甚解”，还是应该追根问底，对我个人而言，我觉得两种方法都对，只是时机不同，当完全接触一个新事物的时候，我们就应该略其大观，在整体上有一个认识，这时候不要过多追究细节，否则就会深陷其中难以自拔。当我们对于一个新的事物已经有了整体上的认识，想继续研究则需要选择一个方面，一丝不苟不放过一个细节地去研究，这样才能深刻的理解和应用。这一系列的前几篇文章都是略其大观，不会牵扯大多细节，希望大家能够对微信小程序有一个整体认识即可，好了废话到此结束。

多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式

在网页的一般开发流程中，我们通常会通过 JS 操作 DOM (对应 HTML 的描述产生的树)，以引起界面的一些变化响应用户的行为。例如，用户点击某个按钮的时候，JS 会记录一些状态到 JS 变量里边，同时通过 DOM API 操控 DOM 的属性或者行为，进而引起界面一些变化。当项目越来越大的时候，你的代码会充斥着非常多的界面交互逻辑和程序的各种状态变量，显然这不是一个很好的开发模式，因此就有了 MVVM 的开发模式（例如 React, Vue），提倡把渲染和逻辑分离。简单来说就是不要再让 JS 直接操控 DOM，JS 只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可。这么说可能比较抽象，以我们建立的测试项目为例，我们在屏幕中显示了“Hello World”，那具体是如何实现的呢。

在WXML中我们声明了一个变量motto

    <text class="user-motto">{{motto}}</text>
复制代码

在JS中我们将motto赋值为“Hello World”，与此同时我们还可通过函数去改变motto的值从而更改页面状态，而不需要直接去操控DOM节点。

 data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    canIUseGetUserProfile: false,
    canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
  }
复制代码

通过 {{ }} 的语法把一个变量绑定到界面上，我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系，还需要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。

WXSS

WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。

• 新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。

• 提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。

• 此外 WXSS 仅支持部分 CSS 选择器

JS

一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。还是以我们建立的测试项目来说明，下面左图是测试项目的启动页面，当用户点击时就会发生页面跳转，跳转到右边所示的页面。

这是如何实现的呢？首先看一下index.wxml,其相关内容如下，可以看到view有一个属性bindtap，这是用来响应用户点击操作的，它的属性值是bindViewTap，这是一个函数名，该函数定义了用户点击时该如何反应，这个函数的定义则在index.js。

WXML相关内容

 <block wx:if="{{canIUseOpenData}}">
      <view class="userinfo-avatar" bindtap="bindViewTap">
        <open-data type="userAvatarUrl"></open-data>
      </view>
      <open-data type="userNickName"></open-data>
 </block>
复制代码

JS相关内容

 bindViewTap() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  }
复制代码

最后

有兴趣可以关注公众号QStack，会定期分享一些文章和免费的学习资源。