1.環(huán)境準備
開發(fā)微信?程序之前，必須要準備好相應(yīng)的環(huán)境
1.1.注冊賬號
建議使用全新的郵箱，沒有注冊過其他小程序或者公眾號的。訪問注冊??，耐?完成注冊即可。
1.2.?獲取APPID
這是開發(fā)者唯一的身份驗證，應(yīng)用要發(fā)布要你上線是必須提供APPID。（當(dāng)然不發(fā)布的話不用APPID也是沒有關(guān)系的）但是后期調(diào)?微信?程序的接?等功能（比如支付、獲取手機信息等），需要索取開發(fā)者的?程序中的 APPID，所以在注冊成功后獲取APPID。登錄成功后可看到如下界面
1.3.?開發(fā)工具下載
微信?程序?帶開發(fā)者?具，集開發(fā)、預(yù)覽、調(diào)試、發(fā)布于??的完整環(huán)境。
但是由于編碼的體驗不算好，因此建議使?vs code + 微信小程序編輯工具 ?來實現(xiàn)編碼，vs code負責(zé)敲代碼， 微信編輯工具負責(zé)預(yù)覽
https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html
2.?第一個小程序
2.1 打開微信開發(fā)者工具
注意第?次登錄的時候需要掃碼登錄
2.2 新建小程序項目
登錄成功后看到如下界面。點擊加號可創(chuàng)建新的項目
2.3 微信開發(fā)者工具
微信開發(fā)者工具，詳情看官網(wǎng)。
3.小程序結(jié)構(gòu)目錄
小程序開發(fā)框架的目標是通過盡可能簡單、高效的方式讓開發(fā)者可以在微信中開發(fā)具有原生APP 體驗的服務(wù)。
整個小程序框架系統(tǒng)分為兩部分：邏輯層（App Service）和?視圖層（View）。小程序提供了自己的視圖層描述語言?WXML?和?WXSS，以及基于?JavaScript?的邏輯層框架，并在視圖層與邏輯層間提供了數(shù)據(jù)傳輸和事件系統(tǒng)，讓開發(fā)者能夠?qū)Ｗ⒂跀?shù)據(jù)與邏輯。
3.1 小程序文件結(jié)構(gòu)與傳統(tǒng)web對比
通過以上對?得出，傳統(tǒng)web是三層結(jié)構(gòu)。?微信?程序是四層結(jié)構(gòu)，多了?層配置.json?
3.2 基本項目目錄
4.?小程序配置文件
?個?程序應(yīng)?程序會包括最基本的兩種配置?件。?種是全局的app.json和????的page.json
4.1 全局配置app.json
app.json是當(dāng)前?程序的全局配置，包括了?程序的所有??路徑、界?表現(xiàn)、?絡(luò)超時時間、底部tab 等。普通快速啟動項??邊的 app.json
字段的含義
1. pages 字段??于描述當(dāng)前?程序所有??路徑，這是為了讓微信客?端知道當(dāng)前你的?程序??定義在哪個?錄。
2. window 字段?定義?程序所有??的頂部背景顏?，?字顏?定義等。
3. 完整的配置信息請參考 app.json配置?
4.tabbar
4.2 頁面配置page.json
每一個小程序頁面也可以使用.json?文件來對本頁面的窗口表現(xiàn)進行配置。頁面中配置項在當(dāng)前頁面會覆蓋?app.json?的?window?中相同的配置項。文件內(nèi)容為一個 JSON 對象，有以下屬性：
5.?創(chuàng)建好項目之后該干的事兒了
5.1創(chuàng)建好項目之后，先點到全局配置文件app.json
①刪除多余的pages里的內(nèi)容，只留下index
②修改 "navigationBarTitleText"的名字
5.2刪除多余項
①把page里的多余頁面刪除，只留下index
②點擊app.wxss，里面內(nèi)容全部刪掉
③點擊app.js，刪除全部內(nèi)容，再輸入wx-app，點擊回車，重新生成
④把utils整個刪除
5.3 打開index文件
①打開index.wxml，刪除全部內(nèi)容，輸入view回車，輸入首頁
②打開index.wxss，刪除全部內(nèi)容
③打開index.js，刪除全部內(nèi)容，再輸入wx-page，點擊回車，重新生成
④打開index.json，添加"navigationBarTitleText"——頁面標題
5.4 新增項目所需的基礎(chǔ)文件夾
style ??components ??lib ??utils ??request
5.5引入字體圖標庫
①打開 阿里巴巴矢量圖標庫
②選擇需要的圖標 加入購物車
③點擊購物車，添加至項目（項目名稱自己?。?/p>
④點擊font class 生成在線鏈接，點此復(fù)制代碼（即鏈接），用新頁面打開此鏈接
⑤把新頁面的代碼全選復(fù)制，回到項目當(dāng)中，找到styles，新建iconfont.wxss，將剛剛拷貝的代碼粘貼進來
⑥點擊app.wxss引入iconfont.wxss，@import?"./style/iconfont.wxss"
⑦使用示例 ?<text?class="iconfont?icon-04"></text>
5.6 less的使用
①編輯器vscode
②安裝插件 easy less
③在vscode的設(shè)置中加入如下，配置
"less.compile":?{"outExt":".wxss"?}
④在要編寫樣式的地方，新建less文件，如 index.less，然后正常編輯即可
例如index.wxss—>index.less，然后編寫，會自動生成新的 index.wxss
5.7 初始化頁面樣式
/*?小程序中不支持通配符?要挨個寫出來?*/
page,view,text,swiper,swiper-item,image,navigator?{
??padding:?0;
??margin:?0;
??box-sizing:?border-box; }
