摘要：上一篇小程序開(kāi)發(fā)第一篇注冊(cè)獲取同步企業(yè)項(xiàng)目數(shù)據(jù)微信小程序開(kāi)發(fā)者工具下載小程序開(kāi)發(fā)者工具使用小程序原生開(kāi)發(fā)直接使用小程序開(kāi)發(fā)者工具打開(kāi)項(xiàng)目即可小程序框架開(kāi)發(fā)首選官方提供類(lèi)開(kāi)發(fā)框架，備選。

上一篇：小程序開(kāi)發(fā) 第一篇：注冊(cè)、獲取unionid同步企業(yè)項(xiàng)目數(shù)據(jù)

下載：小程序開(kāi)發(fā)者工具

使用：

小程序原生開(kāi)發(fā)：直接使用小程序開(kāi)發(fā)者工具打開(kāi)項(xiàng)目即可

小程序框架開(kāi)發(fā)：首選官方提供類(lèi)vue.js開(kāi)發(fā)框架 wepy.js ，備選 mpVue。我們選擇的是 wepy
PS：mpvue尤大大親自點(diǎn)贊，目前github已經(jīng)有10k+ star。無(wú)論哪個(gè)框架都是用來(lái)方便開(kāi)發(fā)，同時(shí)也都是需要學(xué)習(xí)成本的。大家可以根據(jù)自己項(xiàng)目進(jìn)度自行選擇，下面是一張區(qū)別圖：

wepy官方文檔入口

全局安裝或更新WePY命令行工具

        npm install wepy-cli -g

初始化項(xiàng)目

        wepy new myproject
        # 1.7.0之后的版本使用 wepy init standard myproject 初始化項(xiàng)目，使用 wepy list 查看項(xiàng)目模板

切換項(xiàng)目并安裝依賴(lài)

        cd myproject

        npm  install

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

        npm run dev

項(xiàng)目目錄結(jié)構(gòu)介紹（wepy官方目錄修改版，沒(méi)有太大變動(dòng)，可以自行修改）

###開(kāi)發(fā)

###目錄結(jié)構(gòu)
.
├── dist                   小程序運(yùn)行代碼目錄（該目錄由WePY的build指令自動(dòng)編譯生成，請(qǐng)不要直接修改該目錄下的文件）
├── node_modules           
├── src                    代碼編寫(xiě)的目錄（該目錄為使用WePY后的開(kāi)發(fā)目錄）
|   ├── api                接口集合目錄（目前我們使用 Promise 封裝小程序接口，集中設(shè)置登錄緩存、環(huán)境切換, 直接向外暴露方法）
|   ├── components         WePY組件目錄（組件不屬于完整頁(yè)面，所以不會(huì)有josn配置，不能直接配置小程序）
|   |   ├── com_a.wpy      可復(fù)用的WePY組件a
|   |   └── com_b.wpy      可復(fù)用的WePY組件b
|   ├── images             tabbar圖片存放
|   ├── mixins             可復(fù)用方法抽離庫(kù)
|   |   └── test.js        page頁(yè)中引入后調(diào)用 mixins = [test], 當(dāng)前page方法優(yōu)先執(zhí)行，混合函數(shù)方法后執(zhí)行，與 vue相反
|   ├── mocks              本地mock數(shù)據(jù)
|   ├── pages              WePY頁(yè)面目錄（屬于完整頁(yè)面）
|   |   ├── index.wpy      index頁(yè)面（經(jīng)build后，會(huì)在dist目錄下的pages目錄生成index.js、index.json、index.wxml和index.wxss文件）
|   |   └── other.wpy      other頁(yè)面（經(jīng)build后，會(huì)在dist目錄下的pages目錄生成other.js、other.json、other.wxml和other.wxss文件）
|   ├── styles             基礎(chǔ)樣式庫(kù)
|   |   ├── iconfont       字體圖標(biāo)文件夾
|   |   └── base.css       基礎(chǔ)樣式庫(kù)，原子類(lèi)等。
|   ├── utils              工具函數(shù)庫(kù)
|   |   └── util.js        存放第三方工具庫(kù)和一些基礎(chǔ)方法，比如日期格式化、文件大小格式化、節(jié)流函數(shù)等
|   └── app.wpy            小程序配置項(xiàng)（全局?jǐn)?shù)據(jù)、樣式、聲明鉤子等；經(jīng)build后，會(huì)在dist目錄下生成app.js、app.json和app.wxss文件）
└── package.json           項(xiàng)目的package配置

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

項(xiàng)目開(kāi)啟：

框架開(kāi)發(fā)，不需要小程序編輯器。頭像右側(cè)3個(gè)選項(xiàng)，關(guān)閉編輯器，打開(kāi)自己的編輯器，推薦vsCode

查看調(diào)試器 Console,會(huì)發(fā)現(xiàn)一堆報(bào)錯(cuò)，不要慌。 wepy.js v1.7.0之前是沒(méi)有 project.config.json 配置小程序開(kāi)發(fā)工具文件的，需要手動(dòng)關(guān)閉。點(diǎn)擊開(kāi)發(fā)者工具右上角 詳情 -> 項(xiàng)目配置

wepy.js v1.7.0之后，初始化項(xiàng)目有配置文件，如圖沒(méi)有報(bào)錯(cuò)了，????乛?乛????完美。

預(yù)覽：項(xiàng)目不能超過(guò)2M，點(diǎn)擊小程序開(kāi)發(fā)者工具 預(yù)覽 按鈕，已添加權(quán)限的開(kāi)發(fā)者使用微信掃碼，小程序在手機(jī)端打開(kāi)了。一般開(kāi)發(fā)環(huán)境接口均為 http , 真機(jī)預(yù)覽會(huì)失敗，打開(kāi)右上角膠囊按鈕菜單 -> 打開(kāi)調(diào)試 即關(guān)閉了小程序https證書(shū)檢測(cè)，重新打開(kāi)小程序即可預(yù)覽。

遠(yuǎn)程調(diào)試:類(lèi)似預(yù)覽，但是會(huì)重新打開(kāi)一個(gè)控制臺(tái)，選擇Wxml,可以看到真機(jī)端有DOM選中，更好的調(diào)試。

視圖設(shè)計(jì)官方推薦以 iPhone6 為準(zhǔn)。小程序適配單位為 rpx，設(shè)計(jì)圖為iPhone6是最方便開(kāi)發(fā)的，量多少寫(xiě)多少，只是單位用rpx。

小程序預(yù)覽、發(fā)布，都是有大小限制的，最大為2M，寸土寸金。項(xiàng)目中一般圖片最大，設(shè)計(jì)給圖后，首先第一步 壓縮！壓縮！壓縮！ 壓縮圖片網(wǎng)站，然后放到靜態(tài)資源管理平臺(tái)CDN等，生成網(wǎng)絡(luò)資源。 小程序原生tabbar圖片只支持 png/jpg/jpeg ,只能是本地圖片。

iconfont使用，這個(gè)就比較坑了，小程序支持iconfont，本地模擬器也是沒(méi)問(wèn)題的，但是真機(jī)就尷尬了，真機(jī)不識(shí)別*tff字體圖標(biāo)文件，只支持Base64格式，所以我們的 *tff文件需要轉(zhuǎn)碼（ https://transfonter.org/ ）使用方法：

轉(zhuǎn)碼成功后替換 iconfont.css 內(nèi) @font-face下src 內(nèi)容即可，當(dāng)然這里也有坑，base64后 icon 沒(méi)有顏色了，所以單色值icon可以用 iconfont, 色彩比較多的icon還是用壓縮后的網(wǎng)絡(luò)圖片吧

PS：有坑一起填，有發(fā)現(xiàn)新坑，或者寫(xiě)的不對(duì)的地方請(qǐng)指正