小吃店项目开发记录（持续更新中)
发布于 4 年前 作者 mxiao 4032 次浏览 来自 分享

前言

新人学习小程序开发，为了得到更多的意见，在此把项目过程中的思路做一次记录，希望前辈同仁看到我有问题的地方给予指点。

建立远程库

选择了码云，建立好master和dev分支，master作为最后版本发布，dev作为开发分支，本地clone，在dev分支开发。

项目空模板

建立项目空模板 (就是没有多余目录和代码的空项目)

一些思考

  1. 样式的处理
    借鉴ColorUI，考虑把所有样式文件写在全局里面。根目录下添加style目录包含全局样式文件main.wxss和全局字体图标文件iconfont.wxss文件，项目中所有组件、模板和页面都不写自己的样式，全部依赖引入全局样式。通过class名关联

     例如:

       <view class="height-24 theme flex column ">view>
   /*main.wxss*/
  page {
    height: 100%;
    /*主题背景颜色*/
    --theme-bg: #18b357;
    /*主题文字颜色*/
    --theme-color: #f5f5f5;
    /*主题黑色*/
    --theme-black: #333;
    /*主题红色 */
    --theme-red: #f40;
    background-color: var(--theme-bg, white);
  }
  .theme{
   background-color: var(--theme-bg)
   color:var(--theme-color);
  }
  .height-12 {
   height:50%;;
  }
  .height-24{
  height:100%;
  }
  .flex{
  display:flex;
  }
  .column{
  flex-direction:column;
  }
  .

这样写的好处是统一管理main.wxss比较方便，写代码时候，不用老跳转到wxss文件，维护的时候一眼就能看出样式，节省代码。
不好之处在于偶尔遇到多标签共有样式，需要在每个标签都书写，感觉问题不大
另外class名过多，不知道是否影响渲染效率。看到问题的前辈给指点下。

  1. 自定义组件
    在自定义组件中加入config.js文件用以记录组件所需数据和引用的其他工具，方便维护

    例如:
    自定义topNav组件中的config.js

    const systemInfo = wx.getSystemInfoSync()
const capsule = wx.getMenuButtonBoundingClientRect();  //右上胶囊位置信息
const statusBarHeight = systemInfo.statusBarHeight; //系统状态栏高度
const navigationBarHeight = capsule.top + capsule.bottom - statusBarHeight; //组件上导航组件高度 
export { statusBarHeight, navigationBarHeight }

    自定义tabbar组件中的config.js

     export const tabbarList = [{
 "title": "小吃店",
 "name": "首页",
 "icon": {
     "default": "i-home",
     "selected": "i-home-selected"
 }
 },
 {
     "title": "分类",
     "name": "分类",
     "icon": {
         "default": "i-category",
         "selected": "i-category-selected"
     }
 },
 {
     "title": "会员",
     "name": "会员",
     "icon": {
         "default": "i-huiyuan",
         "selected": "i-huiyuan-selected"
     }
 },
 {
     "title": "我的",
     "name": "我的",
     "icon": {
         "default": "i-mine",
         "selected": "i-mine-selected"
     }
 }
 ]

建立index页面架构(提交)

  1. wxml

     <view class="height-24 flex column ">
   
   <h-topNav title="{{tabbarList[active].title}}" />
   
   <view class="flex-1 overflow-hidden">
     <view wx:if="{{active === 0}}"> view>
<view wx:if="{{active === 1}}"> view> <view wx:if="{{active === 2}}"> view> <view wx:if="{{active === 3}}"> view> view> <h-tabbar model:active="{{active}}"/> view>

  • json

            {
            "usingComponents": {
                "h-topNav": "/components/h-topNav/h-topNav",
                "h-tabbar": "/components/h-tabbar/h-tabbar"
            }
        }

  • js

            import { tabbarList } from "../../components/h-tabbar/config"
        Page({
            data: {
                tabbarList,
                active: 0,
            },
            onLoad: function () {
            }
        })

  • 当前效果图

    • 首页内容构建

    • 加入店铺位置展示模块

      功能描述  
点击shopLocation模板实现跳转到shopLocation页面用以展示店面地图位置

    2.   
    
    增加文件(代码)
    
    
    
    *   template下加入shopLocation模板
    *   index.wxml下 引入模板
    *   增加shopLocation页面
    *   images下增加一个位置图片
    
    
    
3.   
    
    实现逻辑
    
    
    
    *   shopLocation模板内通过navigator组件跳转到shopLocation页面
    *   shopLocation页面通过map组件引入mark数据展示商铺地图位置。
    
    
    
4.   
    
    效果图不贴了

    一些思考

    本应该接着添加index页面内容，可想到接下来的内容要用到数据，还是想先把数据弄下来吧。(用的云开发)
    这里是思考最多的地方，没有过项目经验，后台数据结构，目录结构，商品条目等等，反复多次重做后，决定按下面思路做一次，不行再重做吧，希望有经验的前辈多多指点。

    1. 建立商品集合、轮播图集合、商品类别集合、活动公告集合等，这是做为根数据(有备份功效)，通过后台云函数添加数据。
    2. 建立projectData集合 用于项目直接获取的数据集合，因为项目不大，商品数量不多，为了减少云端请求,做一个firstData记录用于小程序启动时自动加载的数据，里面包含各个页面组件用到的数据(来自根数据),例如通过根数据商品分类和商品信息变成商品分类列表数据，要使用的轮播图数据和公告活动数据都提炼到firstData记录里面

      通过app.js的onLauch加载loadFirstData函数获取数据，获取数据后通过回调函数把数据发送给要数据的页面或组件，避免需求数据的组件和页面通过云函数请获取数据，毕竟数据不多，一次都拿过来就可以了。到这里每个需要数据的组件和页面都有数据了。

    项目数据的获取(loadFirstData)

    • 功能描述
      通过调用loadFirstData请求项目需要的数据
      获取数据后通过callback函数把数据发送给所有需求组件和页面
    • 增加文件(代码)
      • 增加云函数 get_firstData/checkData
      • utils下添加loadFirstData.js/getData.js/storageSync.js
    • 实现逻辑
      1. app.js的onLouch时候加载
          wx.cloud.init()
    loadFirstData(this.globalData)
      1. 页面或组件获取数据
          getData(this,['userInfo.userName','categoryList'])
    1 回复

    已阅

    回到顶部