MoodleMobile2客製化

要客製化MoodleMobile2的圖片、風格顏色、及預設網站很容易，只要俢改一些參數內容，然後重新編

修改 config.xml

  • <widget>後面的id，這個是最重要的，以邊是把網址倒過來寫，然後再加上app的名稱，這個id是需要唯一值，在上架的時後，也是會檢查這個id，如果相同是不能上架的，目前是修改成「tw.edu.welearn.moodlemobile」，後面的版本最好不要修改，這樣之後官方有更新時，就依官方的版本走，比較不會有問題

  • <name>這個參數就是app安裝好後，所看到的文字，這邊使用「一起魔課」

  • <description>只是說明，修改成「WeLearn Moodle Mobile official app」

  • <author>這部份目前沒有做修改

原始內容

<widget xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" id="com.moodle.moodlemobile" version="3.4.0">
  <name>Moodle Mobile</name>
  <description>
        Moodle Mobile official app
    </description>
  <author href="http://moodle.com" email="mobile@moodle.com">
        Moodle Mobile team
    </author>

修改內容

<widget xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" id="tw.edu.welearn.moodlemobile" version="3.4.0">
  <name>一起魔課</name>
  <description>
        WeLearn Moodle Mobile official app
    </description>
  <author href="http://moodle.com" email="mobile@moodle.com">
        Moodle Mobile team
    </author>

修改 www/config.json

  • app_id：此id需要和config.xml設定值相同

  • languages：預設值為「en」，修改成「zh-tw」

  • demo_sites：這部分請清空…改為「""」

  • siteurl：此設定值為app進入後主要連線的網址，目前設定成「https://welearn.edu.tw」

原始內容

修改內容

修改scss/app.scss

修改此檔為改變app底色，原本為橘色，修改成與一起魔課相同為藍色

在$yellow-dark;這行下方加入$blue2的設定

修改$mm-color後方的變數為$blue2，還有下方兩行的色碼，為啟動畫面的背景顏色，會搭配「www/img/logo_white.png 」顯示

更換圖檔

  • www/img/logo_white.png ：當app切換畫面時，有時後會出現Moodle的圖案

  • www/img/logo.png ：在登入畫面時，上方的logo圖

  • resources/splash.png ：app完整關閉不能在背景執行，剛啟動時會出現的畫面 (2732X2732)

  • resource/iso/icon.png ：安裝在iOS行動裝置上的icon圖 (1024x1024)

  • resource/android/icon.png ：安裝在Android行動裝置上的icon圖 (1024x1024)

執行ionic resource

圖檔都更新好後，請執行「ionic resource」，將會自動產生不同size的圖檔，請確認過程是否有錯，果有錯請先檢查圖檔的size是否正確。

PreviousiOS

Last updated

Was this helpful?