小程序開發 第二篇：使用微信小程序開發者工具、wepy框架初始化項目

上一篇：小程序開發 第一篇：註冊、獲取unionid同步企業項目數據

1.微信小程序開發者工具

• 下載：小程序開發者工具
• 使用：
• 小程序原生開發：直接使用小程序開發者工具打開項目即可

• 小程序框架開發：首選官方提供類vue.js開發框架 wepy.js ，備選 mpVue。我們選擇的是 wepy
  PS：mpvue尤大大親自點贊，目前github已經有10k+ star。無論哪個框架都是用來方便開發，同時也都是需要學習成本的。大家可以根據自己項目進度自行選擇，下面是一張區別圖：
  

2.wepy.js 初始化項目

• wepy官方文檔入口
• 全局安裝或更新WePY命令行工具

        npm install wepy-cli -g

• 初始化項目

        wepy new myproject
        # 1.7.0之後的版本使用 wepy init standard myproject 初始化項目，使用 wepy list 查看項目模板

• 切換項目並安裝依賴

        cd myproject

        npm  install

• 開啓實時編譯，官方給出的指令是 wepy build --watch，不習慣- -，那就在package.json -> scripts 配置一條新命令 "dev": "wepy build --watch"， 我們就可以愉快的 npm run dev

        npm run dev

• 項目目錄結構介紹（wepy官方目錄修改版，沒有太大變動，可以自行修改）

###開發

###目錄結構
<pre>
.
├── dist                   小程序運行代碼目錄（該目錄由WePY的build指令自動編譯生成，請不要直接修改該目錄下的文件）
├── node_modules           
├── src                    代碼編寫的目錄（該目錄爲使用WePY後的開發目錄）
|   ├── api                接口集合目錄（目前我們使用 Promise 封裝小程序接口，集中設置登錄緩存、環境切換, 直接向外暴露方法）
|   ├── components         WePY組件目錄（組件不屬於完整頁面，所以不會有josn配置，不能直接配置小程序）
|   |   ├── com_a.wpy      可複用的WePY組件a
|   |   └── com_b.wpy      可複用的WePY組件b
|   ├── images             tabbar圖片存放
|   ├── mixins             可複用方法抽離庫
|   |   └── test.js        page頁中引入後調用 mixins = [test], 當前page方法優先執行，混合函數方法後執行，與 vue相反
|   ├── mocks              本地mock數據
|   ├── pages              WePY頁面目錄（屬於完整頁面）
|   |   ├── index.wpy      index頁面（經build後，會在dist目錄下的pages目錄生成index.js、index.json、index.wxml和index.wxss文件）
|   |   └── other.wpy      other頁面（經build後，會在dist目錄下的pages目錄生成other.js、other.json、other.wxml和other.wxss文件）
|   ├── styles             基礎樣式庫
|   |   ├── iconfont       字體圖標文件夾
|   |   └── base.css       基礎樣式庫，原子類等。
|   ├── utils              工具函數庫
|   |   └── util.js        存放第三方工具庫和一些基礎方法，比如日期格式化、文件大小格式化、節流函數等
|   └── app.wpy            小程序配置項（全局數據、樣式、聲明鉤子等；經build後，會在dist目錄下生成app.js、app.json和app.wxss文件）
└── package.json           項目的package配置
</pre>

• 現在，我們初始化一個小程序項目，myproject 項目編譯後生成一個 dist 文件夾，這個文件夾存放變異後的小程序原生代碼。打開小程序開發者工具選中 dist 文件，填寫 appid、項目名稱(本地開發名稱隨便填寫，並非小程序真正名稱)。

• 項目開啓：

• • 框架開發，不需要小程序編輯器。頭像右側3個選項，關閉編輯器，打開自己的編輯器，推薦vsCode
  • 查看調試器 Console,會發現一堆報錯，不要慌。 wepy.js v1.7.0之前是沒有 project.config.json 配置小程序開發工具文件的，需要手動關閉。點擊開發者工具右上角 詳情 -> 項目配置

• wepy.js v1.7.0之後，初始化項目有配置文件，如圖沒有報錯了，؏؏☝ᖗ乛◡乛ᖘ☝؏؏完美。

3.真機調試

• 預覽：項目不能超過2M，點擊小程序開發者工具 預覽 按鈕，已添加權限的開發者使用微信掃碼，小程序在手機端打開了。一般開發環境接口均爲 http , 真機預覽會失敗，打開右上角膠囊按鈕菜單 -> 打開調試 即關閉了小程序https證書檢測，重新打開小程序即可預覽。
• 遠程調試:類似預覽，但是會重新打開一個控制檯，選擇Wxml,可以看到真機端有DOM選中，更好的調試。

---

小程序開發注意事項

1. 視圖設計官方推薦以 iPhone6 爲準。小程序適配單位爲 rpx，設計圖爲iPhone6是最方便開發的，量多少寫多少，只是單位用rpx。
2. 小程序預覽、發佈，都是有大小限制的，最大爲2M，寸土寸金。項目中一般圖片最大，設計給圖後，首先第一步 壓縮！壓縮！壓縮！ 壓縮圖片網站，然後放到靜態資源管理平臺CDN等，生成網絡資源。 小程序原生tabbar圖片只支持 png/jpg/jpeg ,只能是本地圖片。
3. iconfont使用，這個就比較坑了，小程序支持iconfont，本地模擬器也是沒問題的，但是真機就尷尬了，真機不識別*tff字體圖標文件，只支持Base64格式，所以我們的 *tff文件需要轉碼（ https://transfonter.org/ ）使用方法：

轉碼成功後替換 iconfont.css 內 @font-face下src 內容即可，當然這裏也有坑，base64後 icon 沒有顏色了，所以單色值icon可以用 iconfont, 色彩比較多的icon還是用壓縮後的網絡圖片吧

PS：有坑一起填，有發現新坑，或者寫的不對的地方請指正

---