ouc_移动软件开发_个人项目

满目星辰&

已于 2022-11-26 14:16:22 修改

阅读量275

点赞数

分类专栏：移动软件开发文章标签：前端

于 2022-09-04 14:38:20 首次发布

本文链接：https://blog.csdn.net/curry303333/article/details/126689187

版权

移动软件开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、项目简介

1、灵感来源：什么是浪漫？对于理工男来说，生活中能涉及一点浪漫的可能就是学到过的“浪漫主义”，于是我联想到浪漫主义诗歌，那么，为什么不为此做一个小程序呢？

2、典型用户与场景：刚开始其实只想像Web 1.0一样做一个储存各种浪漫主义诗人跟作家生平的小程序页面，但是做到一半的时候，转念一想，这有什么典型用户场景呢？既然都是记录作家生平，有什么能留住用户呢？那就把格局打开！不止局限于看，当有人想读诗却不知道读什么好，那么能不能提供给他一个平台，能够通过一个大体的方向就能搜到关于这方面的诗呢？对于我个人来说，诗歌中的浪漫是不可以被定义的，每个人都有属于自己的浪漫，当一个人想制造一点诗歌的小浪漫的时候，我们是否可以给他一个平台，帮助他制作属于自己的小浪漫呢？于是，历史中的“浪漫”（1.0.0）便诞生了！

3.当前完成情况：这是历史中的“浪漫”的1.0.0版本，对于完成度，我想永远也不可能到达百分之百，因为对于我个人来说，一个小程序或者软件，创新与优化的空间是无限的。只能说，基本完成了自己最初的想法以及大体框架的搭建。对自己未来对于小程序的优化与更新方向有了一个基本的确定。

二、项目分析

由于个人项目代码量稍微有点大，如果全部都写在报告里的话会使报告过于冗长，于是在这里只做一个关键的代码、控件及技术分析（小程序源码下载地址我将放在本文末尾）：

1、登录界面：

登录界面使用到的是button控件以及最基本的view与image，通过wx:if的判断使其可以展示两个不同的界面，其判定条件为isLogin的值，其功能实现使用了wx:request、wx:getUserProfile以及wx:switchTab,其代码以及功能注释如下：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    src:'../../images/爱心1.png',//用户头像地址
    poetry:{}, //用于储存API返回的诗歌
    nickName:'',//用户名
    isLogin:false //判断是否是登录状态
  },

  getUserProfile:function(res) {
    wx.getUserProfile({
      desc: '获取个人信息',
      success:(res) =>{
        let info = res.userInfo
        this.setData({
          nickName:info.nickName,
          src:info.avatarUrl,
          isLogin:true
        })
      },
    })//获取个人登录信息
    wx.request({
      url: 'https://api.tianapi.com/qingshi/index', //天行API网站获取随机浪漫诗句的API
      method: 'POST', 
      data: {
	  key:'你注册的API'
	  }, 
      header: {
	  'Content-Type':'application/x-www-form-urlencoded'
	  }, 
      success: (res)=> {
        if(res.data.code == 200){
       this.setData({
         poetry:res.data.newslist[0]//将获得的诗句传递给poetry
       })
         }
      },
      fail: function (err) {
        console.log(err)
      }
    })
  },

  goto_History:function (res) {
    wx.switchTab({  

      url:'../main/main'  
      
          });  //当点击登录后的界面的Start按钮时可以跳转到主页面
  },

值得一提的是，在登录界面“进入时空胶囊”的立体字面设计时，尝试了许多方法，就是达不到想要的效果，于是直接借助了ps，下载了一个赛博风的边框（个人觉得时空胶囊跟赛博朋克风结合在一起会很浪漫），于是再在边框中加上具有立体感的字体，再通过抠图将多余的白色部分去除，将图片加到按钮上就可以达到一种镂空的效果。

2、主界面

四个主界面采用了四个不同的主题色，并且在点击底部按钮时图标也会改变，这是对每个不同页面的xxx.json进行的设计调整，然后对于中国浪漫主义诗人以及欧洲浪漫主义作家的列出采用的就是基本的view与image控件，而在搜索与创造浪漫的的实现时，应用了几项新的技术：

（1）input：

input控件是实现用户与小程序交互的重要控件之一，这使得小程序能够读取到用户输入的东西，并将其储存作为后台关键数据之一，而这里使用的input则是作为API的关键词上传到服务器，具体实现如下：

  //xxx.wxml部分
   <input type="text" placeholder="请输入关键词" bindinput="setword" maxlength="50" class="input1"/>//绑定setword函数
  
  
  //xxx.js部分：
  
  setword:function (res) {
    this.setData({
      keyword:res.detail.value//读取输入的数据储存在data中的keyword中以便后续使用
    })
  },

（2）相对位置与绝对位置：

这是一个在进行UI设计时很有用的方法，因为我在UI设计时想产生图三与图四那种图片与文字或者图片与图片重叠的效果，但是image控件与view控件在不作任何修改的时候占用的空间是单独分开的，不能做到重合的效果，于是这个时候便需要wxss中的position参数出场了。只要将想要移动的图片或者文字的position参数设为absolute便可以通过left、right、top和bottom调整其在窗口中的位置，以图四为例：

//xxx.wxml部分

  <button bindtap="getInfo" plain="true"><image src="../../images/按钮4.png" class="love"></image></button>
  <image src="../../images/点击图标.png" class="click"></image>
  <view class="tips">点击生成诗句</view>
  
///xxx.wxss部分

.love{
  width: 500rpx;
  height: 500rpx;
  position: relative;
  margin-bottom: 50rpx;
}

.click{
  top: 500rpx;
  left: 450rpx;
  width: 165rpx;
  height: 180rpx;
  position: absolute;
}

.tips{
  left: 450rpx;
  top: 680rpx;
  position: absolute;
}

//更多position的用法可参考https://developers.weixin.qq.com/community/develop/article/doc/000ac07c29c7c04e620db098756c13

（3）swiper：

对于swiper控件，其实是备用方案。在小程序中swiper控件是用来轮流展示搜索到的诗歌的，但是其实刚开始的预想不是这样的。我最初的设想是可以做一个按钮控件，通过其绑定的函数达到点击一下换一首诗的效果，也有自己的一个基本想法：定义一个全局静态变量，每次点击变量就加1，在通过变量作为poetry数组的下标来访问不同的诗歌，当变量达到诗歌数量时再将其置零，开启一轮新的循环，但是在写这个报告前，我所定义的变量还是一直报错，也搜了很多资料，只能怪自己学艺不精，不懂变通，但是还是会一直探索，知道解决这个问题，以下是swiper控件的实现代码，以图四为例：

 <swiper indicator-dots="true" autoplay="true" interval="5000" duration="500" class="change">
    <swiper-item>
      <view>{{poetry[0].list}}</view>
    </swiper-item>
    <swiper-item>
      <view>{{poetry[1].list}}</view>
    </swiper-item>
    <swiper-item>
      <view>{{poetry[2].list}}</view>
    </swiper-item>
  </swiper>
  
  //三个下标的不同分别代表三首不同的诗

以上便是小程序的一个大体控件构成，view与image是最基本的使用所以没在上面太多阐述，block的话仅仅用于封装了小程序部分代码以便于达wx:if的实现，在小程序中多次通过wx:request实现对API的使用，因为没有使用云开发，所以只能通过这个方法来实现与云端的连接。（顺带一提，在小程序UI的设计上真的花了很多时间！虽然可能对于部分程序员来说功能实现更加重要，但是对于我来说，前端UI与后端功能实现同等重要，一个好的UI往往能给用户一个良好的第一印象，这也是留住用户的资本之一！）

小程序源码地址：GitHub - beihaidaoxingwan/beihaidaoxingwan-ouc_Mobile-app-development_personal-project