读取本地Json

Posted on | In

鸿蒙next 带你玩转鸿蒙next读取本地json并展示UI - 掘金

完整代码

json数据
fold
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
{"data":[{
    "id": 8,
    "classid": 2,
    "name": "醋溜白菜",
    "peoplenum": "1-2人",
    "preparetime": "10-20分钟",
    "cookingtime": "10-20分钟",
    "content": "醋溜白菜，是北方人经常吃的一道菜，尤其是在多年前的冬天。那时，没有大棚菜，冬天，家家每天佐餐的基本上都是冬储大白菜，聪明的家庭主妇总是想方设法将这单调的菜变成多种菜式，于是，醋溜白菜被频繁的端上餐桌。<br />美食不分贵贱，用最平凡的原料、最简单的调料和最普通的手法做出美味的菜肴来才是美食的真谛。 <br />这次，我做的醋溜白菜，近似鲁菜的做法，使个这道菜酸甜浓郁、开胃下饭、老少咸宜。",
    "pic": "http://api.jisuapi.com/recipe/upload/20160719/115138_46688.jpg",
    "tag": "减肥,家常菜,排毒,补钙"
  }, {
    "id": 96,
    "classid": 2,
    "name": "醋熘白菜",
    "peoplenum": "1-2人",
    "preparetime": "10分钟内",
    "cookingtime": "10分钟内",
    "content": "大白菜是过去物资匮乏年代冬天里的当家菜，虽然现在冬天蔬菜品种一点也不少了，但是人们一到冬天就不自觉的习惯性的要储存几颗，至少下雪刮大风出不去门的话家里有菜也不着急没得吃。我家离早市非常近，所以我不储存，但是我家冬天也不少吃白菜，无论炒着吃做包子饺子馅儿都很爱吃，尤其我家老公更是说每天吃炖白菜也不会腻烦，嘿嘿。一般我把白菜分三部分吃，最外面的几片留起来做馅儿吃，然后里面的部分叶子做汤，帮子就做醋熘白菜或者炒白菜丝，一点不浪费吧，哈哈。",
    "pic": "http://api.jisuapi.com/recipe/upload/20160719/115155_93501.jpg",
    "tag": "下饭菜,减肥,开胃,补钙"
  }, {
    "id": 215,
    "classid": 3,
    "name": "开水白菜",
    "peoplenum": "1-2人",
    "preparetime": "10分钟内",
    "cookingtime": "10-20分钟",
    "content": "开水白菜是四川传统名菜，原系川菜名厨黄敬临在清宫御膳房时创制。后来黄敬临将此菜制法带回四川，广为流传。30多年前，川菜大师罗国荣调来北京饭店掌厨，又将“开水白菜”的烹调技术带回北京，从而成为北京饭店高档筵席上的一味佳肴。<br />千万别以为“开水”就是“白开水”， 开水白菜名说开水，实则是巧用清汤，其关键在于吊汤，汤要味浓而清，清如开水一般，成菜乍看如清水泡着几棵白菜心，一星油花也不见，但吃在嘴里，清鲜淡雅，香味浓醇，汤味浓厚，不油不腻，却清香爽口。<br />因为汤清澈见底，视之如开水，故名之“开水白菜”。",
    "pic": "http://api.jisuapi.com/recipe/upload/20160719/115218_38602.jpg",
    "tag": "健脾,家常菜,排毒,瘦身"
  }, {
    "id": 449,
    "classid": 3,
    "name": "冬笋丝炒咸白菜",
    "peoplenum": "3-4人",
    "preparetime": "10分钟内",
    "cookingtime": "10分钟内",
    "content": "哥哥腌制的咸白菜，没有等到变色我就嚷嚷要吃了，哥哥就给了一点，叫我先拿着吃，等几天再去拿，喜欢自家腌制的咸白菜，买的好咸受不了，咸白菜配冬笋和红萝卜一起烹制的，真的好鲜美，有了它，早上会多喝一碗粥呢。",
    "pic": "http://api.jisuapi.com/recipe/upload/20160719/115314_95935.jpg",
    "tag": "冬季,炒,私房菜,减肥,瘦身,肥胖"
  }, {
    "id": 526,
    "classid": 3,
    "name": "香菇冬笋炒白菜梗",
    "peoplenum": "1-2人",
    "preparetime": "10-20分钟",
    "cookingtime": "10-20分钟",
    "content": "一天，突然想把白菜的菜叶与菜梗分别做汤和炒蔬菜，白菜叶直接放入肉汤煮，白菜梗做了一道炒蔬，拿出前一天留下的香菇与冬笋，再泡些黑木耳，一道制作非常简单，吃口却是鲜美爽脆的香菇冬笋炒白菜梗出炉了，其实这道菜也是因为我懒得去买菜而凑合出来的。",
    "pic": "http://api.jisuapi.com/recipe/upload/20160719/115334_89013.jpg",
    "tag": "冬季,家常菜,晚餐,炒锅,瘦身"
  }, {
    "id": 631,
    "classid": 4,
    "name": "腊肠炒金针蘑白菜",
    "peoplenum": "1-2人",
    "preparetime": "10-20分钟",
    "cookingtime": "10分钟内",
    "content": "金针菇中含锌量比较高，有促进儿童智力发育和健脑的作用，在许多国家被誉为“益智菇”和“增智菇”。（来源于网络）",
    "pic": "http://api.jisuapi.com/recipe/upload/20160719/115357_80702.jpg",
    "tag": "家常菜,通乳,排毒,特禀质,骨质疏松,咸香,10分钟内,炒,动脉硬化,孕妇,青少年,老人,白领,便秘,健忘,晚餐,冬季,营养,增强抵抗力,消脂,补钙,提高免疫力,全菜系,1-2人,益智,待客菜,健脑益智,健脑,催乳,下奶,增强记忆力,炒锅,抗过敏"
  },
  {
    "id": 732,
    "classid": 5,
    "name": "大白菜黄豆煲猪蹄",
    "peoplenum": "1-2人",
    "preparetime": "10-20分钟",
    "cookingtime": "1-2小时",
    "content": "冬季养生滋补，一般都会用煲汤来补身。<br />各种营养食材根据其特有的效果在一起煲汤，给我们的身体增加营补给。<br />我家每天中午都会煲汤，根据季节的变换换着花样。<br />猪蹄汤既营养又滋补，而且不会油腻，是我家大小都爱的，这道汤适合冬季滋补，加入一些黄豆和冬季当家菜大白菜，可补充身体的蛋白质和钙质，即滋补又能美容。",
    "pic": "http://api.jisuapi.com/recipe/upload/20160719/115416_65189.jpg",
    "tag": "汤,丰胸,催乳,通乳,下奶,乳腺增生,内分泌失调"
  }
]
}
model类
fold
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
export class MenuModel {
  data:Array<MenuModelData>=[];
}
export class MenuModelData {
  id?: number;
  classid?: number;
  name?: string;
  peoplenum?: string;
  preparetime?: string;
  cookingtime?: string;
  content?: string;
  pic?: string;
  tag?: string;
}

UI布局代码
fold
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
import resourceManager from '@ohos.resourceManager';  
import { common } from '@kit.AbilityKit';  
import { MenuModel, MenuModelData } from '../bean/MenuModel';  
import Logger from './Logger'  
import util from '@ohos.util';  
import buffer from '@ohos.buffer';  
  
  
@Entry  
@Component  
struct Index {  
  @State message: string = 'Hello World'  
  @State Menulist: Array<MenuModelData> = [];  
  
  aboutToAppear() {  
    let mContext = getContext() as common.UIAbilityContext;  
    this.getjson(mContext);  
  }  
  
  async getjson(context: common.UIAbilityContext) {  
    //读取本地json。读到的数据是 buffer Uint8Array 类型  
    let getjson = await context.resourceManager.getRawFileContent('data.json');  
    //getRawFileContent读出来是个buffer 我们需要将 buffer 转成json字符串  
    let textDecoderOptions: util.TextDecoderOptions = { ignoreBOM: true }  
    let textDecoder = util.TextDecoder.create("utf-8", textDecoderOptions);  
    let result = textDecoder.decodeWithStream(getjson, { stream: false });  
    console.log(result)  
    Logger.error("result --- > " + result)  
    //解析json转换成model  
    let menumodel: MenuModel = JSON.parse(result);  
    this.Menulist = menumodel.data;  
  }  
  
  build() {  
    List({ space: 10 }) {  
      ForEach(this.Menulist, (item: MenuModelData) => {  
        ListItem() {  
          Flex({ direction: FlexDirection.Row }) {  
            Image(item?.pic)  
              .width(100)  
              .height(100)  
              .objectFit(ImageFit.Fill)  
              .borderRadius(5.0) //圆角需要float类型  
  
            Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween }) {  
              Flex({ direction: FlexDirection.Column }) {  
                Text(item?.name)  
                  .fontSize(18)  
                  .fontColor(Color.Black)  
                  .textAlign(TextAlign.Start)  
                Text(item?.content)  
                  .fontColor(Color.Gray)  
                  .fontSize(15)  
                  .maxLines(2)  
                  .textOverflow({ overflow: TextOverflow.Ellipsis })  
              }  
  
              Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) {  
                Text(item?.cookingtime)  
                  .fontSize(13)  
                  .fontColor(Color.Gray)  
                  .textAlign(TextAlign.Start)  
  
                Button("查看")  
                  .height(16)  
                  .width(50)  
              }  
            }            .margin({ left: 10 })  
            .height(100)  
          }  
          .padding({ left: 10, right: 10 })  
        }  
      })  
    }  
  }}