个人中心

目标/Objective

1. 熟悉微信小程序开发流程

2. 熟悉微信小程序项目结构

3. 熟悉微信小程序页面结构

4. 掌握微信小程序常见的结构和样式设计

知识点/Points

1. 结构 wxml

- <image>

- <view>

2. 行为 js

- 无

3. 样式 wxss

- flex

- fixed

- box-shadow

- border

- border-radius

- font

- @font-face

- @import

4. 配置 json

- navigationStyle

5. 其他 other

- node.js

- express

前期准备/Pre

1. 图片 - 本地或在线或放于资源服务器

2. 字体 - 本地并转换为base64格式

3. 资源服务器 - 启动

node index.js

开发步骤/Steps

创建项目info并打开

修改配置app.json

- 增加info页面配置信息

- 删除原有示例页面index和logs配置信息

配置页面info.json

- 导航栏样式自定义

"navigationStyle": "custom"

设计info页面结构.wxml

- <image>作为背景

- <view>作为九宫格元素

设计info页面样式.wxss

- 导入自定义字体样式文件到项目并引入到info页面

- 图像作为背景，铺满全屏

- 内容固定定位；铺满全屏；flex纵向布局

- 头像圆角、边框

- 标题首字特别设计

- 兴趣导航区九宫格；字体由谷歌字体转换并导入

- 利用Snipaste自吸取图片素材颜色并应用到内容的字体颜色

- 其他布局和样式自定

要求/Requirement

独立完成

实验报告：采用学院统一下发的实验模板文件，以文字说明，配以必要的效果图片或核心代码，展示并说明数据来源、实施过程、各部分功能、具体内容和实现细节；最后导出为PDF，按照要求命名，提交个人学习通作业

未按要求在规定时间内提交视为无效，不得分

相关格式规范，请参考论文格式规范 Paper Prettier

推荐/Links