创新实训——记录2

目录

内容综述

项目架构

index：主页

内容

代码实现

draw：画板

内容和实现 

my：个人中心

内容

Tabs组件的实现

组件实现

在index页面中应用

总结

---

内容综述

本文将会详细阐述微信小程序前端项目的正式搭建过程。

项目架构

根据之前的研究，核心功能画板已经实现，现在是要将画板整理到正式的项目中。由于我们采用迭代增量开发的过程，我目前确定的项目功能主要包含三部分：登录、画板、骨刻文相关介绍。因此，骨刻文项目会采用一个单页面TabBar，展示各个功能。

先通过微信开发者工具新建项目，然后构建以下文件结构：

其项目架构，与上一篇博客所说是一致的，大致是：components保存封装的组件；icon保存图片；pages保存各个页面；utils保存工具JavaScript函数；app.js是全局JavaScript文件；app.json是全局配置文件；app.wxss是全局样式文件；剩下两个文件都是配置文件。

通过在app.json中配置Tabbar，得到如下结果：

首页、画板、个人中心分别对应index、draw、my三个文件夹。

index：主页

内容

index目录下保存了项目展示的第一页，也就是主页。它主要完成用户的登录、骨刻文相关信息展示。经过思考，我决定，先展示一个登录页面，在用户登录完成后，将用户信息保存在app.js中，并且跳转到信息展示页面。

代码实现

首先需要在app.js中保存用户信息，以便全局都可以访问到。因此在app.js的globalData中新建：

userInfo保存用户信息对象，包括头像、微信名等；openid是微信小程序中的用户唯一身份标识。

然后，在index/index.wxml中，搭建页面结构。当用户信息为空时，将会展示一个登录页面，用户点击按钮，然后弹出对话框，确认用户是否授权登录。在这个登录页，我使用了骨刻文的背景图片。整体wxml代码如下：

index.js的data中，同样建立userInfo变量：

 

使用wx:if判断，当userInfo还未获取时，userInfo.avatarUrl为undefined，因此会显示bgImg背景图和beforeHavaUserMenu按钮区域。经过调整布局，得到如下界面：

对按钮intoGame，需要设置open-type为getUserInfo，绑定点击事件函数为getUserProfile。在index.js中实现这个函数：

使用wx.getUserProfile的API，获取用户信息。获取信息之后，再调用wx.login，获取用户的openid，并保存在全局变量中。至此，用户登录过程已经实现。

登录完成后，按照wxml中的判断逻辑，应该展示骨刻文相关信息。为此，我去访问了刘凤君老师的骨刻文网站：

  

我初步选定展示刘凤君的介绍、论文、专著等。对于这些，我仍然需要封装一个TabBar来在index页面中实现内容的切换。这里就用到了前面提到的components文件夹，我封装了Tabs组件，具体如何实现将在后面说明。借助Tabs组件，在wxml文件中搭建代码结构：

使用Tabs组件，通过4个block传入相关内容，每个分别展示相关信息。这些都是静态数据，牵涉到的逻辑不多，因此不再细说。最终得到的页面如下：

 

 

 

这样就完成了信息的展示。至此，index页面功能基本实现。

draw：画板

内容和实现 

对于画板，在上一篇博客中已经详细说明了。这里采取旧版接口，直接完全复用代码即可。直接给出结果：

对于导出图片，将会在后端搭建成功后一并写出。

my：个人中心

内容

个人中心应该展示的信息包括用户微信名、用户头像和用户参与的详细数据。但这些必须仅能在用户登录后展示，如果用户还没有登录，则应该提示用户先前往首页登录。在my.js中，同样保存了userInfo，它是来自globalData。为了保证它能够第一时间更新，我在onShow生命周期函数中更新userInfo，保证每次展示my页面时都能够获取当前的userInfo：

 

由此，搭建wxml代码：

 

userInfo将会展示用户的信息和数据；promrammer_data中显示了我们团队的人员名单（这个后期可以放到另一个地方）。因此，当用户没有登录时：

当用户在首页登录后得到：

目前这些数据都是静态的，因此没有很难的逻辑。

Tabs组件的实现

组件实现

前面说到，在index页面中使用了Tabs组件，完成了各个信息页的展示。在components目录下，新建Tabs组件：

先确定组件需要外部传来的信息，在Tabs.js中记录，主要就是信息数组：

数组的每一项应该包含id、name、isActive，是项的标识、内容、是否active。在wxml文件中搭建结构，先遍历数组：

为每个项绑定点击事件函数handleTap，传入参数index。当用户点击某一项时，组件将会通过itemChange事件把用户点击的index返回给外部，交给外部修改其isActive，以此改变其显示结果，并把修改后的数组传回组件。handleTap函数的实现如下：

关于样式，就是active类和普通类的区别，不再给出。在Tabs组件的下半部分，借助插槽，由外部传入展示的元素，根据active的不同展示相应的信息。

在index页面中应用

首先在index.js中先建立tabs数组：

在wxml页面中使用：

 

通过tabs属性传入tabs数组，并且绑定handleItemChange函数处理itemChange事件：

在函数中，遍历tabs，将用户点击的那一项的isActive修改为true，其余修改为false。然后，只传入isActive为true的那一项对应的内容即可。这些也都是静态数据，因此我直接将文字存储在了index.js中。最终实现的效果在前面已经展示了。

总结

本文实现了微信小程序前端的项目结构搭建与基本功能实现。后续，我将会完成画板的全部功能、登录信息的完全实现，以及功能的其他扩展。