摘要：上一篇小程序開發第一篇注冊獲取同步企業項目數據微信小程序開發者工具下載小程序開發者工具使用小程序原生開發直接使用小程序開發者工具打開項目即可小程序框架開發首選官方提供類開發框架，備選。

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

下載：小程序開發者工具

使用：

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

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

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官方目錄修改版，沒有太大變動，可以自行修改）

###開發

###目錄結構
.
├── 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配置

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

項目開啟：

框架開發，不需要小程序編輯器。頭像右側3個選項，關閉編輯器，打開自己的編輯器，推薦vsCode

查看調試器 Console,會發現一堆報錯，不要慌。 wepy.js v1.7.0之前是沒有 project.config.json 配置小程序開發工具文件的，需要手動關閉。點擊開發者工具右上角 詳情 -> 項目配置

wepy.js v1.7.0之后，初始化項目有配置文件，如圖沒有報錯了，????乛?乛????完美。

預覽：項目不能超過2M，點擊小程序開發者工具 預覽 按鈕，已添加權限的開發者使用微信掃碼，小程序在手機端打開了。一般開發環境接口均為 http , 真機預覽會失敗，打開右上角膠囊按鈕菜單 -> 打開調試 即關閉了小程序https證書檢測，重新打開小程序即可預覽。

遠程調試:類似預覽，但是會重新打開一個控制臺，選擇Wxml,可以看到真機端有DOM選中，更好的調試。

視圖設計官方推薦以 iPhone6 為準。小程序適配單位為 rpx，設計圖為iPhone6是最方便開發的，量多少寫多少，只是單位用rpx。

小程序預覽、發布，都是有大小限制的，最大為2M，寸土寸金。項目中一般圖片最大，設計給圖后，首先第一步 壓縮！壓縮！壓縮！ 壓縮圖片網站，然后放到靜態資源管理平臺CDN等，生成網絡資源。 小程序原生tabbar圖片只支持 png/jpg/jpeg ,只能是本地圖片。

iconfont使用，這個就比較坑了，小程序支持iconfont，本地模擬器也是沒問題的，但是真機就尷尬了，真機不識別*tff字體圖標文件，只支持Base64格式，所以我們的 *tff文件需要轉碼（ https://transfonter.org/ ）使用方法：

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

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