小吃店项目开发记录（持续更新中) - WXOPEN Club

前言

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

建立远程库

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

项目空模板

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

一些思考

样式的处理
借鉴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名过多，不知道是否影响渲染效率。看到问题的前辈给指点下。

自定义组件
在自定义组件中加入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页面架构(提交)

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>

json

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

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

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

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

项目数据的获取(loadFirstData)

功能描述
通过调用loadFirstData请求项目需要的数据
获取数据后通过callback函数把数据发送给所有需求组件和页面
增加文件(代码)
- 增加云函数 get_firstData/checkData
- utils下添加loadFirstData.js/getData.js/storageSync.js

实现逻辑

app.js的onLouch时候加载

    wx.cloud.init()
    loadFirstData(this.globalData)

页面或组件获取数据

    getData(this,['userInfo.userName','categoryList'])

ping89 1楼•2 年前

已阅