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

首先创建一个空项目

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

编辑home.hml页面

                          //由于菜单在操作页面的底部，所以tab-bar的部分要放在tab-content的底部    
//       {{tab.title}}     
     

编辑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

    
      更多      
    
    
          
       拍照       

编辑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页面

  
    美食大全   
  
                               

编辑cookbook.js

//@ts-nocheckimport 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

      
      想吃什么搜这里      

编辑search.js

export default {  props: ['from']}

编辑index.hml页面

编辑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');    }}

最总终大概是这样如下图