鴻蒙JS開發(fā)項(xiàng)目總結(jié)

第一部分 鴻蒙JS基礎(chǔ)入門

Project Type:

  • Service 沒有界面, 只提供數(shù)據(jù)服務(wù)
  • Application 有界面, 提供數(shù)據(jù)服務(wù)
  1. 鴻蒙不能打印對(duì)象, 只能打印字符串
console.log('888:' +JSON.stringify(data))//對(duì)象轉(zhuǎn)字符串打印

const target = JSON.parse(res.data)//把JSON規(guī)則的字符串轉(zhuǎn)換為JSONObject

  1. 預(yù)覽器會(huì)默認(rèn)被當(dāng)做PC環(huán)境, 無法請(qǐng)求數(shù)據(jù), 建議用真機(jī)/模擬器來調(diào)試網(wǎng)絡(luò)請(qǐng)求

  2. build生成的不是apk, 而是.hap

  3. 想要實(shí)現(xiàn)可視化編程: /js/default/pages 右鍵-->New-->JS Visual

1.不同設(shè)備

在.css中:

//不同設(shè)備之間的樣式設(shè)置
@media screen and (device-type: wearable){
  .title{
    font-size: 20px;
    color: #ffffff;
  }
}

@media screen and (device-type: phone) and (orientation: landscape){
  .title{
    font-size: 60px;
  }
}

2.導(dǎo)入資源使用

/// 在路徑 common/datas/ 下  新建frames.js:
export default[
  {
    //??通過js去引進(jìn)圖標(biāo)文件的時(shí)候, 一定要使用絕對(duì)路徑
    src: "/common/images/other/0.jpg",
  },
  {
    src: "/common/images/other/1.jpg",
  },
  ...
]

/// 在其他js文件中, 使用frames.js的資源;
import frames from "../../common/datas/frames.js"
//??在js中導(dǎo)入第三方數(shù)據(jù)的時(shí)候, 一定要使用相對(duì)路徑
export default{
  data:{
    frames,
  },
  handleStart(){
    this.$refs.animator.start();
  },
  ...
},

3.TodoList應(yīng)用構(gòu)建

頁面樣式設(shè)計(jì)注意事項(xiàng)

  1. 頁面css支持id、class、tag選擇器, 建議使用class選擇器
  2. 頁面樣式基于flex彈性布局進(jìn)行設(shè)置, 默認(rèn)是flex彈性布局, 需要注意, 彈性布局會(huì)自動(dòng)的拉升和壓縮內(nèi)部元素模塊寬度、高度
  3. 鴻蒙封裝的js組件, 有個(gè)專門的樣式說明, 與傳統(tǒng)CSS寫法有很大差異

示例:

在js/defalut/common/datas/todoList.js中:

//第三方 JSON 數(shù)據(jù)導(dǎo)入，注意使用相對(duì)路徑
export default [
    {
        info: '給老王打個(gè)電話',
        status: true
    },
    {
        info: '輸出工作計(jì)劃',
        status: false
    },
    {
        info: '和小王對(duì)接需求',
        status: true
    },
    {
        info: '整理客戶資料',
        status: false
    },
    {
        info: '和朋友一起聚餐',
        status: false
    }
]

在index.html中:

<div class="container">
    <text class="title">待辦事項(xiàng)</text>
    <div class="item" for="{{todoList}}">
        <text class="todo">{{$item.info}}</text>
        <switch showtext="true" checked="{{ $item.status }}"
                texton="完成" textoff="待辦"
                class="switch"></switch>
        <button class="remove" onclick="remove($idx)">刪除</button>
    </div>
    <div class="info">
        <text class="info-text">您還有</text>
        <text class="info-num">{{todoCount()}}</text>
        <text class="info-text">件事情待辦，加油！</text>
    </div>
    <div class="add-todo">
        <input class="plan-input" type="text"></input>
        <button class="plan-btn" onclick="addTodo">添加待辦</button>
    </div>
</div>

在index.js中:


import todoList from "../../common/datas/todoList.js"
export default {
    data: {
        todoList
    },
    //普通事件
    remove(index){
        console.log(index)
        this.todoList.splice(index, 1)
    },
    switchChange(index){
        this.todoList[index].status = !this.todoList[index].status
    },
    addTodo(){
        this.todoList.push({
            info:'IDE工具無法監(jiān)聽鍵盤輸入',
            status: false
        })
    },

    //定義計(jì)算屬性
    computed:{
        todoCount(){
            let num = 0;
            this.todoList.forEach(element=>{
                if(!element.status){
                    num++
                }
            })
            return num
        }
    }
}

4.多端設(shè)備規(guī)則

在手機(jī)P40設(shè)備上1px = 3物理像素

在TV設(shè)備上1px = 2 物理像素

在穿戴wearable設(shè)備上 1px = 2 物理像素

// 我們常用類型來進(jìn)行判斷，按照 phone、tv、wearable 順序輸出不同響應(yīng)式的頁面布局
@media screen and (device-type: phone)  {}
@media screen and (device-type: tv)  {}
@media screen and (device-type: wearable)  {}

5.路由傳參

// 頁面跳轉(zhuǎn)并傳參
switch(index){
  case 0:
    router.push({
      uri:"pages/index/index",
      params:{
        info:"這是路由傳遞的參數(shù)"
      }
    });
    break;
  case 1:
    ...
}
    
    
// 接收頁面跳轉(zhuǎn)后傳遞過來的參數(shù), 在index.html中直接使用:
<text>{{info}}</text>

6.項(xiàng)目配置

{
  "app": {
    "bundleName": "net.newsmth.newsmthcard", //包名
    "vendor": "newsmth",
    "version": {
      "code": 1000000,
      "name": "1.0.0"
    }
  },
  "deviceConfig": {},
  "module": {
    "package": "net.newsmth.newsmthcard",
    "name": ".MyApplication",
    "mainAbility": "net.newsmth.newsmthcard.MainAbility",
    "deviceType": [
      "phone"
    ],
    "distro": {
      "deliveryWithInstall": true,
      "moduleName": "entry",
      "moduleType": "entry",
      "installationFree": false
    },
    "abilities": [
      {
        "skills": [
          {
            "entities": [
              "entity.system.home"
            ],
            "actions": [
              "action.system.home"
            ]
          }
        ],
        "orientation": "portrait",//固定手機(jī)豎向展示
        "visible": true,
        "name": "net.newsmth.newsmthcard.MainAbility",
        "icon": "$media:icon",
        "description": "$string:mainability_description",
        "label": "$string:entry_MainAbility",
        "type": "page",
        "launchType": "standard"
      },
      {
        "name": "net.newsmth.newsmthcard.DetailAbility",
        "icon": "$media:icon",
        "description": "$string:detailability_description",
        "label": "$string:entry_DetailAbility",
        "type": "page",
        "launchType": "standard"
      }
    ],
    "js": [
      {
        "pages": [
          "pages/index/index",
          "pages/detail/index"
        ],
        "name": "default",
        "window": {
          "designWidth": 720,
          "autoDesignWidth": true
        }
      }
    ]
  }
}

很多功能JS實(shí)現(xiàn)不了, 比如數(shù)據(jù)庫, 需要使用java

7.卡片布局判斷

<div class="grid_pattern_layout">
<!--    1*2-->
    <div if="{{ mini }}" class="mini_container">
        <image src="/common/image_1.png" class="mini_image"></image>
        <text class="mini_text">標(biāo)題mini</text>
    </div>

<!--    2*2-->
    <div class="normal_container">
         <!--    2*4--> 
        <div if="{{ dim2X4 }}" class="preview_container">
        </div> 
      
        <!--    4*4-->
        <div class="detail_container">
        </div>
      
    </div>
</div>

8.toast

import prompt from '@system.prompt';

export default {
  
  test1(e) {
            //觸發(fā)彈窗
        prompt.showToast({
            message: '彈窗內(nèi)容'
        })
    },
}

第二部分 服務(wù)卡片

1.service Widget(服務(wù)卡片)

  • 顯示卡片的方法:

    1.按住App的圖標(biāo), 向上滑動(dòng), 當(dāng)手指劃出圖標(biāo)后會(huì)彈出卡片. 例如, 運(yùn)動(dòng)健康, 12的卡片和22的卡片 2*4

    • 2.直接將卡片放到桌面上:

      (1)使用1的方式彈出卡片, 然后點(diǎn)擊右上角的圖釘

      (2)按住App的圖標(biāo), 然后點(diǎn)擊"服務(wù)卡片",然后選擇相應(yīng)的卡片, 點(diǎn)擊"添加到桌面"

      (3)長(zhǎng)按桌面已有卡片, 然后點(diǎn)擊"更多服務(wù)卡片"進(jìn)行選擇

  • 服務(wù)卡片的事件 -—- 與宿主程序進(jìn)行交互的四個(gè)方法(在java/MainAbility.java中)

    1. onCreateForm(Intent intent) 卡片創(chuàng)建時(shí)觸發(fā)
    2. onUpdateForm(long formld) 卡片更新時(shí)觸發(fā), formld:卡片對(duì)應(yīng)的id
    3. onDeleteDorm(long formld) 卡片刪除時(shí)觸發(fā)
    4. onTriggerFormEvent(long formld, String message) 卡片與宿主程序交互時(shí)觸發(fā)

如何同時(shí)控制多個(gè)服務(wù)卡片

// 在java/MainAbility.java中:
@Override
protected ProviderFormInfo onCreateForm(Intent intent) {
    HiLog.info(TAG, "onCreateForm");
    long formId = intent.getLongParam(AbilitySlice.PARAM_FORM_IDENTITY_KEY, INVALID_FORM_ID);
   // 將每一個(gè)創(chuàng)建的服務(wù)卡片的formid保存到list中
}
@Override
protected void onDeleteForm(long formId) {
    //刪除不需要的服務(wù)卡片
}

2.行內(nèi)樣式

標(biāo)簽顯示模式轉(zhuǎn)換 display塊轉(zhuǎn)行內(nèi)：display:inline;

行內(nèi)轉(zhuǎn)塊：display:block;

塊、行內(nèi)元素轉(zhuǎn)換為行內(nèi)塊： display: inline-block;

比如實(shí)現(xiàn)like評(píng)論結(jié)尾的"刪除"按鈕:
<text class="content">
    <span>{{info.name}}：{{info.content}}</span>
    <span if="{{info.canDelete}}" class="delete" @click="delete">刪除</span>
</text>

3.鴻蒙UI框架生命周期

JS UI的Ability生命周期
下面是幾個(gè)主要生命周期函數(shù)。
● onCreate ()
當(dāng)應(yīng)用創(chuàng)建時(shí)調(diào)用。（應(yīng)用的生命周期）
● onInit ()
頁面數(shù)據(jù)初始化完成時(shí)觸發(fā)，只觸發(fā)一次。
● onReady ()
頁面創(chuàng)建完成時(shí)觸發(fā)，只觸發(fā)一次。
● onShow ()
頁面顯示時(shí)觸發(fā)。
● onHide ()
頁面消失時(shí)觸發(fā)。
● onDestroy ()
頁面銷毀時(shí)觸發(fā)

4.鴻蒙js開發(fā)暗黑模式適配

@media screen and (dark-mode: true){
    .title{
        color: aliceblue;
    }
}

方案二: 關(guān)閉暗黑模式追隨系統(tǒng)

config.json里module層級(jí)下有個(gè)colorMode，可以根據(jù)需要設(shè)置light/dark/auto

5.js 中編碼（encode）和解碼（decode）的三種方法

unescape, decodeURI, decodeURIComponent?

6.js map的key排序

 * map排序 對(duì)map的key值進(jìn)行排序
 * @param map 
 * @param sortFunc  
 * eg:
 * let map = {
 * key1: { name: 'wdf', sortid: 10 },
 * key2: { name: 'wwx', sortid: 1 },
 * key3: { name: 'sss', sortid: 5 },
 * }
 *  map = sortMap(map, (a, b) => { return a.sortid - b.sortid })
 */
function sortMap(map: {}, sortFunc?: (v1, v2) => number) {
    let keys = Object.keys(map)
    let sortkeys = keys.sort(sortFunc)
    let sortMap = {}
    sortkeys.forEach(k => { sortMap[k] = map[k] })
    map = sortMap
    return map
}

7.js中g(shù)et請(qǐng)求中將json格式的對(duì)象拼接成復(fù)雜的url參數(shù) 

const queryStr = Object.keys(query)
            .reduce((ary, key) => {
                if (query[key]) {
                    ary.push(encodeURIComponent(key) + '=' + encodeURIComponent(query[key]));
                }
                return ary;
            }, [])
            .join('&');
url += `?${queryStr}`;

8.前端js幾種加密/解密方法

9.Promise和Async/await的理解和使用

https://www.wolai.com/x3SycgxN1kUXKjrUA2y4jh#7Le4q5RCZcGfeRF2N6NrMR

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容