微信小程序开发系列——5.前端页面开发

Posted 2022-11-13 童凌

摘要：本文说明了微信前端页面开发的基本架构，说明了组成文件各自的详细结构，通过这几个文件的协同工作，微信小程序开发框架可以实现页面Page中视图层和逻辑层的统一。

0. 简介

根据之前开发者工具和开发框架简介的内容，我们把官方demo和开发者工具安装好以后，就可以开始准备微信小程序的web开发了。

在开发的主要界面，点击开发者工具左侧导航的“编辑”，我们可以看到这个项目，已经初始化并包含了一些简单的代码文件。最关键也是必不可少的，是 app.js、app.json、app.wxss 这三个。

1. App系列配置文件

在 app.js、app.json、app.wxss 这三个文件中，.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件。微信小程序会读取这些文件，并生成小程序实例。

下面我们简单了解这三个文件的功能，方便修改以及从头开发自己的微信小程序。

1.1 App.js

app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API，如本例的同步存储及同步读取本地数据。

App(
  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
  
)

1.2 App.json

app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释。当有新建的页面时，需要在app.json的”pages”中添加相对路径。

  "pages": [
    "pages/index/index",
    "pages/logs/index"

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

1.3 App.wxss

3、app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则，和css的写法是一样的。

.container 
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;

我们注意到，在实例程序的代码中还有2个文件夹，一个是pages,一个是utils。

utils是放通用工具类方法的一个文件夹，是传统 javascript 中 “function” 式的开发方法，在需要使用某些方法时，在当前js文档中使用require引用里面的 js 文件，然后直接调用该方法即可。

pages文件夹存放所有页面文件，每一个文件夹代表一个页面，我们着重讲一下这个pages。

2. pages详解

用图片来展示的话，每个page内部各自的逻辑关系是这样的：

小程序的Page由WXML(index.wxml) 与 WXSS(index.wxss) 两大部分组成，由视图最小单元 - 组件来进行展示。视图层将逻辑层的数据、配置文件(index.js+index.json)反应成视图，同时将视图层中定义的事件发送给逻辑层。

在WXML中，使用预先定义好的样式渲染界面(蓝色的圆角矩形)，并使用动态绑定的方法从逻辑层获取部分数据（红色的正方形），并编写触发事件函数(黄色的六边形)作为监听器，让用户的操作能得到相应的反馈，以此达到逻辑层和视图层的统一。

2.1 wxml

<!--index.wxml-->
<view class="container">
  <view  bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="userInfo.avatarUrl" background-size="cover"></image>
    <text class="userinfo-nickname">userInfo.nickName</text>
  </view>
  <view class="usermotto">
    <text class="user-motto">motto</text>
  </view>
</view>

本例中使用了<view/>、<image/>、<text/>来搭建页面结构，绑定数据和交互处理函数，其中基本可以看做是：<view>代替了前端开发中的<div>。其余的代码风格和html的编写非常相似。该例子中，其中一个<text>组件里绑定了后台动态变化的变量userInfo.nickName和motto，我们把这个叫做数据绑定。

数据绑定在小程序中是最简单的使用数据方式，用双大括号将变量包起来，如果组件有属性则需将数据放置于引号之外。在这个text中，当前变量是写在两个<text>标志之间的。

<text class="userinfo-nickname">userInfo.nickName</text>

2、bindtap函数
在当前例子中我们可以发现一个属性叫做 bindtap 的东西，仔细看第二行：

  <view  bindtap="bindViewTap" class="userinfo">  

这个东西就是刚才在图1中的展示的六边形代表的意思——事件触发函数。啥？你问我什么是“事件”？如果用前端的说法，就是绑定在视图上的一个组件，用户操作这个组件就可以将前台的行为返回到逻辑层(js文件)进行处理。

以这份代码为例，当你点击这个<view>组件时，在index.js中，就有一个bindViewTap()函数就已经触发并执行相应的功能。当这个view组件被按下时，框架会触发一个event事件，并将该事件通过参数传到bindViewTap(event)函数中执行。可以在index.js中打印一下这个event含有的参数：

//index.js
Page( 
 bindViewTap: function(event)  
 console.log(event) 
  
) 

点击这个view组件，可以看到打印出来的log如下：

 
"type": "tap", 
"timeStamp": 1252, 
"target":  
 "id": "tapTest", 
 "offsetLeft": 0, 
 "offsetTop": 0, 
 "dataset":  
 "hi": "MINA"
  
, 
"currentTarget":  
 "id": "tapTest", 
 "offsetLeft": 0, 
 "offsetTop": 0, 
 "dataset":  
 "hi": "MINA"
  
, 
"touches": [ 
 "pageX": 30, 
 "pageY": 12, 
 "clientX": 30, 
 "clientY": 12, 
 "screenX": 112, 
 "screenY": 151 
], 
"detail":  
 "x": 30, 
 "y": 12 
 
 

当逻辑层函数需要获取相关视图的信息时， 可以从参数event中获取。
例如，构造一个<input>组件：

//index.wxml
<input bindinput="inputchar"/>

然后再在index.js文件中编写inputchar(event)函数：

//index.js
inputchar: function(event)
    var str = e.detail.value;//获取当前控件的value,在input组件中就是输入的字符串
    console.log(str);

我们在input栏中输入字符时，就可以监听到输入值的变化情况，每输入一个字符时，inputchar函数都被触发了一遍，并在控制台打印出输入的字符串。

2.2 index.js

​ index.js 是页面的脚本文件，在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例，声明并处理数据，响应页面交互事件等。

//index.js
//获取应用实例
var app = getApp()
Page(
  data: 
    motto: 'Hello World',
    userInfo: 
  ,
  //事件处理函数
  bindViewTap: function() 
    wx.navigateTo(
      url: '../logs/logs'
    )
  ,
  onLoad: function () 
    console.log('onLoad')
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo)
      //更新数据
      that.setData(
        userInfo:userInfo
      )
    )
  
)

每个页面都需要注册，index.js用Page()这个函数来注册一个页面，它接受一个object参数，用这个参数来指定页面的初始数据，生命周期函数，事件处理函数。

属性	类型	描述
data	Object	页面的初始数据
onLoad	Function	生命周期函数－－监听页面加载
onReady	Function	生命周期函数－－监听页面初次渲染完成
onShow	Function	生命周期函数－－监听页面显示
onHide	Function	生命周期函数－－监听页面隐藏
onUnload	Function	生命周期函数－－监听页面卸载
onPullDownRefreash	Function	页面相关事件处理函数－－监听用户下拉动作
其他	Any	开发者可以添加任意的函数或数据到 object 参数中，用 this 可以访问

2.3 wxss

index.wxss 是页面的样式表：

/**index.wxss**/
.userinfo 
  display: flex;
  flex-direction: column;
  align-items: center;


.userinfo-avatar 
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;


.userinfo-nickname 
  color: #aaa;


.usermotto 
  margin-top: 200px;

页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。其中样式表绝大多数的写法与css是一模一样的。

2.4 index.json

index.json是页面的配置文件，这个配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。

​

3. 页面展示

运行结果如下：

手机预览（只有获得AppId的才有权限预览）

以上是微信小程序前端开发的基本流程，而实际上要做一个内容可以更新的小程序，单有前端开发是远远不够的，还需要后台开发。后台开发与web开发的后台基本无异，可以选择用java、php、nodejs等任一语言，有一点需要注意的是小程序后台服务器必须是https协议的，这就要求必须购买云服务器，申请SSL证书，并将后台服务器设置成https服务。而做这些的前提是要先购买好服务器、数据库和域名。以上的资源配置统统可以到腾讯云主页去购买。关于后台服务器的配置，可以参考开发者工具以及开发框架简介。

如果在开发时还有困难，还可以参考W3Cschool的文档内容，我在开发现在的这个软件时，基本都是参考这里的文档的，虽然是照搬官网的内容，但是整理得非常详细，逻辑清晰实用。