Introduction to WeChat Mini Program Development (3)

background

In the previous article, we mainly introduced several configurations of WeChat applet, including app.jsonthe global configuration of WeChat applet, the configuration of page.jsonapplet page, the configuration of project.config.jsonapplet development tools, the configuration of sitemap.jsonapplet and the configuration of applet. Whether the page can be retrieved by WeChat. This article is mainly used to introduce the page composition of WeChat Mini Programs.

page composition

People who have been engaged in web programming know that web programming uses a combination of HTML + CSS + JS, which HTML is used to describe the structure of the current page, CSS used to describe the appearance of the page, and JS usually used to process the page and the user. interact. In fact, the page of the WeChat applet is also equivalent to a web page, and its composition is also similar. As shown in the figure below, it is the content contained in a page index. The index.jsonprevious article has already mentioned the configuration of the page. Others are index.wxmlsimilar HTMLto the page structure for the WeChat applet, index.wxsswhich is CSSsimilar to the description. The page looks like, index.jsbut is used for the interaction of WeChat applet.

WXML

The following code shows the index.wxmlcontent of the test project we have created, which can be seen to be HTML very similar, WXML consisting of tags, attributes, and so on. But there are also many differences, mainly two differences.

<!--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>
复制代码

The tags have different names and encapsulate more components

When writing HTML, the tags that are often used are div, p, span. When writing a page, developers can combine different components based on these basic tags, such as calendars, pop-up windows, and so on. Another way of thinking, since everyone needs these components, why can't we package these commonly used components to greatly improve our development efficiency.

从上边的例子可以看到，小程序的 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，会定期分享一些文章和免费的学习资源。