@微信小程序-起步-官方文檔

初始化第一個(gè)微信小程序

1. 項(xiàng)目結(jié)構(gòu)：

project_root.png

2. 文件基礎(chǔ)類(lèi)型分析

   .json 后綴的 JSON 配置文件
   .wxml 后綴的 WXML 模板文件
   .wxss 后綴的 WXSS 樣式文件
   .js 后綴的 JS 腳本邏輯文件
   

   a.根目錄app.json

        概述：
        小程序根目錄下的 app.json 文件用來(lái)對(duì)微信小程序進(jìn)行全局配置，決定頁(yè)面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多 tab 等。
        pages
        用于指定小程序由哪些頁(yè)面組成，每一項(xiàng)都對(duì)應(yīng)一個(gè)頁(yè)面的 路徑+文件名 信息。文件名不需要寫(xiě)文件后綴，框架會(huì)自動(dòng)去尋找對(duì)于位置的 .json, .js, .wxml, .wxss 四個(gè)文件進(jìn)行處理。
        window
        用于設(shè)置小程序的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色。
        tabBar
        如果小程序是一個(gè)多 tab 應(yīng)用（客戶(hù)端窗口的底部或頂部有 tab 欄可以切換頁(yè)面），可以通過(guò) tabBar 配置項(xiàng)指定 tab 欄的表現(xiàn)，以及 tab 切換時(shí)顯示的對(duì)應(yīng)頁(yè)面。
        networkTimeout
        各類(lèi)網(wǎng)絡(luò)請(qǐng)求的超時(shí)時(shí)間，單位均為毫秒。
        debug
        可以在開(kāi)發(fā)者工具中開(kāi)啟 debug 模式，在開(kāi)發(fā)者工具的控制臺(tái)面板，調(diào)試信息以 info 的形式給出，其信息有Page的注冊(cè)，頁(yè)面路由，數(shù)據(jù)更新，事件觸發(fā)等?？梢詭椭_(kāi)發(fā)者快速定位一些常見(jiàn)的問(wèn)題。
        functionalPages
        基礎(chǔ)庫(kù) 2.1.0 開(kāi)始支持，低版本需做[兼容處理]
        啟用[插件功能頁(yè)]時(shí)，插件所有者小程序需要設(shè)置其 `functionalPages` 為 `true`。
        subpackages
        微信客戶(hù)端 6.6.0 ，基礎(chǔ)庫(kù) 1.7.3 及以上版本支持
        啟用[分包加載]時(shí)，聲明項(xiàng)目分包結(jié)構(gòu)。
        寫(xiě)成 subPackages 也支持。                
        workers       
        使用 Worker處理多線(xiàn)程任務(wù)時(shí)，設(shè)置 `Worker` 代碼放置的目錄
        requiredBackgroundModes
        申明需要后臺(tái)運(yùn)行的能力，類(lèi)型為數(shù)組。目前支持以下項(xiàng)目
        plugins
        基礎(chǔ)庫(kù) 1.9.6 開(kāi)始支持，低版本需做[兼容處理]
        聲明小程序需要使用的[插件]
        preloadRule
        基礎(chǔ)庫(kù) 2.3.0 開(kāi)始支持，低版本需做[兼容處理]
        聲明[分包預(yù)下載]的規(guī)則。
        resizable
        在 iPad 上運(yùn)行的小程序可以設(shè)置支持[屏幕旋轉(zhuǎn)]
        navigateToMiniProgramAppIdList
        當(dāng)小程序需要使用 [wx.navigateToMiniProgram]、接口跳轉(zhuǎn)到其他小程序時(shí)，需要先在配置文件中聲明需要跳轉(zhuǎn)的小程序 appId 列表，最多允許填寫(xiě) 10 個(gè)。
   

   b.工具配置 project.config.json

        通常大家在使用一個(gè)工具的時(shí)候，都會(huì)針對(duì)各自喜好做一些個(gè)性化配置，例如界面顏色、編譯配置等等，當(dāng)你換了另外一臺(tái)電腦重新安裝工具的時(shí)候，你還要重新配置。
   
        考慮到這點(diǎn)，小程序開(kāi)發(fā)者工具在每個(gè)項(xiàng)目的根目錄都會(huì)生成一個(gè) project.config.json，你在工具上做的任何配置都會(huì)寫(xiě)入到這個(gè)文件，當(dāng)你重新安裝工具或者換電腦工作時(shí)，你只要載入同一個(gè)項(xiàng)目的代碼包，開(kāi)發(fā)者工具就自動(dòng)會(huì)幫你恢復(fù)到當(dāng)時(shí)你開(kāi)發(fā)項(xiàng)目時(shí)的個(gè)性化配置，其中會(huì)包括編輯器的顏色、代碼上傳時(shí)自動(dòng)壓縮等等一系列選項(xiàng)。
   

   c.頁(yè)面配置 page.json

          每一個(gè)小程序頁(yè)面也可以使用.json文件來(lái)對(duì)本頁(yè)面的窗口表現(xiàn)進(jìn)行配置。
   
          頁(yè)面的配置只能設(shè)置 app.json 中部分 window 配置項(xiàng)的內(nèi)容，頁(yè)面中配置項(xiàng)會(huì)覆蓋 app.json 的 window 中相同的配置項(xiàng)。
   

   d.wxml 微信特有的html

            區(qū)別：
              1.特有的標(biāo)簽語(yǔ)法，view,button,text等
              2.類(lèi)似vue的wx-邏輯語(yǔ)法，及類(lèi)似es6字符串模板語(yǔ)法
   

   e.wxss 微信特有的css

            區(qū)別：
              1.新增尺度單位rpx
              2.全局css及頁(yè)面css，css單文件作用域
   

   f.微信小程序邏輯交互

            區(qū)別：
              1.新增的事件機(jī)制
              2.豐富的小程序api