uni-app小程序开发-项目起步

用户38855616762
154 阅读3分钟

准备接口文档

  1. 咸虾米API接口库

  2. 小兔鲜儿-小程序版接口

准备模版代码

  1. uniappVue3版本+咸虾米壁纸：uniappVue3版本基础demo及咸虾米壁纸项目的开源代码

  2. 小兔鲜儿-vue3+ts-uniapp

准备设计工具

  1. 即时设计 - 可实时协作的专业 UI 设计工具

准备素材代码

依赖组件

在project/components/目录下创建组件，直接选择新建组件的按钮即可

量图

  1. 将图片拖入即时设计项目

  2. 选择工具：切片工具

  3. 将需要量的部分使用切片工具包裹

模式一：创建软件项目（新项目）

方式一：HBuilderX

  1. 选择项目类型

    普通项目

    uni-app √

    Wap2App

    5+App

    IDE插件

  2. 取名

    咸虾米壁纸：wallpaper-kt

  3. 选择存放路径

    D:

  4. 选择模版

    默认模版

  5. 其他选项

    uni-app x: false

    uniCloud: false

    Vue版本选择: 2

    上传到GitCode代码托管平台（CSDN）: flase

  6. 创建

引入静态资源

  1. 准备静态资源目录

    project/                  # 项目根目录
    ├── common/               # 测试类静态资源目录（上线后会删除的）
    │   └── images/           # 测试类图片资源目录
    └── static/               # 非测试类静态资源目录
        └── images/           # 非测试类图片资源目录

设计页面结构（底部tab页面分类）

咸虾米壁纸：

  • 首页
  • 分类
  • 我的

准备页面基础结构

project/pages/index/index.vue-首页

project/pages/classify/classify.vue-分类

project/pages/user/user.vue-我的

<template>
  <view class="homeLayout">
      
  </view>
</template>
    
<script setup>
    
</script>
    
<style lang="scss" scoped>
    
</style>

准备更细致的基础结构

分类页

<template>
  <view class="classLayout">
    <view class="classify">
      <theme-item v-for="item in 15"> </theme-item>
    </view>
  </view>
</template>

<script setup></script>

<style lang="scss" scoped>
.classify {
  padding: 30rpx;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15rpx;
}
</style>

我的

<template>
  <view class="userLayout">

  </view>
</template>

<script setup></script>

<style lang="scss" scoped>

</style>

引入素材代码

将基本结构包裹在父标签中

<template>
  <view class="homeLayout">
    <!-- 此处放置基本结构 -->
  </view>
</template>

配置盒子模型

  1. 配置公共样式

    project/common/style/common-style.scss

    问：为什么将common-style.scss放在common目录下，而不放在static目录下？

    答：

    1. common目录与static区别之一：

      • static目录下的文件无论是否被引入，都会被编译

      • common目录下的文件只有被引入时，才会被编译

    2. common-style.scss更适合common目录的方式

    view {
  border: 3px solid red;
}

  2. 引入公共样式

    project/App.vue

    • 代码定位
    @import "common/style/common-style.scss"
    • 整体代码
    <script>
  export default {
    onLaunch: function() {
      console.log('App Launch')
    },
    onShow: function() {
      console.log('App Show')
    },
    onHide: function() {
      console.log('App Hide')
    }
  }
</script>

<style lang="scss">
/*添加在此处*/
@import "common/style/common-style.scss"
</style>

开始开发

开始正式开发。

设置全局顶部导航栏

// 导航栏标题文字颜色
// 导航栏标题文字内容
// 导航栏背景色
// 下拉背景色

"globalStyle": {
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "咸虾米壁纸",
  "navigationBarBackgroundColor": "#fff",
   "backgroundColor": "#F8F8F8"
}

设置项目底部tab页面切换标签

  1. 引入底部tab页面切换标签icon

    project/static/images/tabBar/

  2. 配置路由规则和icon图标

    project/pages.json

    "tabBar" {
  "list": [
    {
      "text": "推荐",
      "pagePath": "pages/index/index",
      "iconPath": "static/images/tabBar/home.png",
      "selectedIconPath": "static/images/tabBar/home-h.png"
    },
    {
      "text": "分类",
      "pagePath": "pages/classify/classify",
      "iconPath": "static/images/tabBar/classify.png",
      "selectedIconPath": "static/images/tabBar/classify-h.png"
    },
    {
      "text": "我的",
      "pagePath": "pages/user/user",
      "iconPath": "static/images/tabBar/user.png",
      "selectedIconPath": "static/images/tabBar/user-h.png"
    }
  }
}

  3. 配置icon与文字颜色

    "tabBar" {
  "color": "#9799a5",
  "selectedColor": "#28B389"
}

配置/检查全局样式的盒子模型

Banner图

咸虾米

project/common/style/common-style.scss

  • 代码定位
view,swiper,swiper-item {
  border: 3px solid red;
}
  • 整体代码
view,swiper,swiper-item {
  border: 3px solid red;
}
avatar
文章
阅读
粉丝