【牛角书】鸿蒙手把手教你做美食大全

首先创建一个空项目

然后给项目命名，尽量用英文创建名称。编辑cookbook.hml页面。编辑home.scss页面。编辑cookbook.js。编辑index.hml页面。编辑index.css页面。编辑search.hml。编辑index.js页面。编辑home.js页面。编辑search.js。最总终大概是这样如下图。编辑more.hml。

编辑home.hml页面

<element name ="cookbook" src="./cookbook/cookbook"></element>
<element name ="category" src="./category/category"></element>
<element name ="map" src="./map/map"></element>
<element name ="more" src="./more/more"></element>
<div class="container">
    <tabs class = "tabs" index="0" vertical="false" onchange="change">
        <tab-content class="tab-content" scrollable="{{pageScollable}}">
           <cookbook ></cookbook>
            <category></category>
            <map></map>
            <more></more>
        </tab-content>
        <tab-bar class="tab-bar" mode="fixed">//由于菜单在操作页面的底部，所以tab-bar的部分要放在tab-content的底部
           <div class="tabs-item" for="{{(index,tab) in tabs}}">
              // <image src="{{currentSelected === index ? tab.tinIcon : tab.icon}}"></image>
               <text>
                   {{tab.title}}
               </text>
           </div>
        </tab-bar>
    </tabs>
</div>

编辑home.scss页面

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}
 
.title {
    font-size: 60px;
    text-align: center;
    width: 100%;
    height: 40%;
    margin: 10px;
}
 
@media screen and (orientation: landscape) {
    .title {
        font-size: 60px;
    }
}
 
@media screen and (device-type: tablet) and (orientation: landscape) {
    .title {
        font-size: 100px;
    }
}

编辑home.js页面

export default {
    data:{
        tabs: [
        {
            id: 'tab1',
        title: '美食大全',
        icon:'/common/images/cookbook.png',//图标
        tintIcon: '/common/images/cookbook-active.png',//图片着色
        component: 'cookbook'//切换的时候显示的组件
        },
        {
            id: 'tab2',
            title: '分类',
            icon:'/common/images/menu.png',
            tintIcon: '/common/images/menu-active.png',
            component: 'category'
          },
          {
           id: 'tab3',
           title: '地图',
           icon:'/common/images/location.png',
           tintIcon: '/common/images/location-active.png',
           component: 'map'
          },
          {
           id: 'tab4',
           title: '更多',
           icon:'/common/images/more.png',
           tintIcon: '/common/images/more-active.png',
           component: 'more'
           }
        ],
 
        currentSelected:0，
        pageScrollable: true
    },
    change: function(e) {
       this.currentSelected = e.index
    },
 
handlePageScrollable(e){
  this.pageScrollable = e.detail
 }
}

编辑more.hml

<div class="more-container">
    <div class="cb-title">
         <text>
           更多
         </text>
    </div>
    <div class="camera-container">
         <camera class="camera" ref="camera"></camera>
         <div>
            <text>
            
 
            </text>
         </div>
         <button @click="handleClick" class="btn-takephone">
            拍照
         </button>
     </div>
</div>

编辑more.js

export default {
 data: {
   photoUri: '',
   checked: true
 },
 
 handleClick() {
   this.$refs.camera.takePhoto({
     success(uri) {
        this.photoUri = uri
     },
     fail(error) {
        console.log(error)
     }
     })
 },
 
handleChange(obj) {
  this.$emit('pageScrollable', obj.checked)
 }
 
}

编辑cookbook.hml页面

<element name="cb-swiper"src="./swiper/swiper"></element>
<element name="cb-hotcate"src="./hotcate/hotcate"></element>
<element name="cb-top10"src="./top10/top10"></element>
<element name="cb-serch"src="../../../common/components/serch/serch"></element>
 
 
<div class="cb-container">
  <div class="cb-title">
        <text>
          美食大全
        </text>
  </div>
  <div class="cb-body">
        <list>
          <list-item class="cb-body-item">
            <cb-swiper list="{{list}}"></cb-swiper>
            <cb-search from="index"></cb-search>
            <cb-hotcate></cb-hotcate>
            <cb-top10 list="{{list}}"></cb-top10>
          </list-item>
         </list>
  </div>
</div>

编辑cookbook.js

//@ts-nocheck
import list from '../../common/data/cookbook-list.json';
 
 
export default {
  data: {
     list: []
  },
 
  onInit() {
//      this.list = list.data
 
    fetch.fetch({
      url: 'http//securit.qfjava.cn/hm/cookbook-list.json',
      responseType: 'json',
      success: res =>{
         const result = JSON.parse(res.data)
         this.list = result.data
         consle.log(result)
      }
    })
  }
}

编辑search.hml

<div class="search-container {{from==='cate' ? 'cate-outer-bg': 'index-outer-bg'}}>
      <div class="search-input {{from==='cate' ? 'cate-inner-bg': 'index-inner-bg'}}">
          <image src="/common/images/search.png"></image>
          <text>想吃什么搜这里</text>
      </div>
</div>

编辑search.js

export default {
  props: ['from']
 
}

编辑index.hml页面

<element name="cb-home" src="../home/home"></element>
<div>
      <cb-home></cb-home>
</div>

编辑index.css页面

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}
 
.title {
    font-size: 60px;
    text-align: center;
    width: 100%;
    height: 40%;
    margin: 10px;
}
 
@media screen and (orientation: landscape) {
    .title {
        font-size: 60px;
    }
}
 
@media screen and (device-type: tablet) and (orientation: landscape) {
    .title {
        font-size: 100px;
    }
}

编辑index.js页面

export default {
    data: {
        title: ""
    },
    onInit() {
        this.title = this.$t('strings.world');
    }
}

最总终大概是这样如下图