安裝微信開發者工具、創建項目，介紹項目的配置文件，刪除不需要的文件，只保留核心，用于從基礎開發項目。

1 小程序概述

1.1 什么是微信小程序

微信小程序是一種運行在微信內部的輕量級應用程序。
小程序無需下載和安裝，只需要在微信中下拉，搜一搜或掃一掃搜索點擊使用即可。

1.2 大前端概念

1、后端(后端接口)
(1)python的django框架。
(2)python的flask框架。
(3)python的fastapi框架。
(4)go的gin框架。
(5)go的beego框架。
(6)java的ssh框架。
(7)java的ssm框架。
(8)java的springboot框架。

2、前端(大前端)
(1)瀏覽器中訪問的頁面(web頁面)—>html、css、js。
(2)安卓的app—>java。
(3)ios的app—>object C。
(4)微信小程序—>wxml、wxss、js。
(5)桌面端—>Qt平臺(python、c++)。
(6)鴻蒙開發。

3、前端統一開發框架
(1)uni-app
國人推出，使用html、css、js，使用vue的語法，在uni-app平臺開發，打包到安卓、ios、微信小程序、web端。
uni-app是一個使用Vue.js開發所有前端應用的框架，開發者可以編寫一套代碼，就能發布到iOS、Android、Web(響應式)、以及各種小程序(微信/支付寶/百度/頭條/QQ/快手等)等多個平臺。

(2)flutter
google推出，一處開發，編譯到ios、安卓、桌面。
Flutter是由Google開發和維護的一個開源UI軟件開發工具包(SDK)，用于構建跨平臺的高性能、高保真的應用程序。
使用一套代碼庫，可以編譯并運行在iOS、Android、Web、Windows、macOS和Linux等多個平臺上，實現“一次編寫，多端運行”。

我會python的django開發，我可以開發安卓app嗎？可以開發微信小程序嗎？
django可以作為它們的后端，但是前端還是需要單獨開發。

1.3 賬號注冊

1、訪問【微信公眾平臺】，注冊一個微信小程序賬號
2、申請賬號需要準備一個郵箱，該郵箱要求：
未被微信公眾平臺注冊。
未被微信開放平臺注冊。
未被個人微信號綁定過。
如果被綁定了需要解綁或使用其他郵箱。
3、微信小程序信息配置
注冊成功后，需要打開微信公眾平臺對小程序賬號進行一些設置。
小程序后續需要提交審核和上線，提交審核時，小程序賬號信息是必填項，名稱、圖標、類目等。
小程序備案和微信認證。

1.4 開發流程

微信小程序–》本地開發環境–》線上環境。
(1)本地：微信開發者工具+Pycharm開發Django
(2)線上：
體驗版：幾個人體驗，API需要在公網。
發布：備案，API需要在公網，全國各地人都可以用。

1.5 小程序成員

微信小程序成員分為兩種：
(1)項目成員：表示參與小程序開發(我們)、運營的成員，包括運營者、開發者及數據分析者，項目成員可登陸微信公眾后臺，管理員可以在成員管理中添加、刪除項目成員，并設置項目成員的角色。
(2)體驗成員：表示參與小程序內測體驗的成員，可使用體驗版小程序，但不屬于項目成員。管理員及項目成員均可添加、刪除體驗成員。

2 創建項目

2.1 創建項目流程

1、獲取小程序id
小程序后臺–》管理–》開發管理–》開發設置–》開發者ID
AppID(小程序ID) wxxxxxxxxx
AppSecret(小程序密鑰) xxxxxxxxxxxx(不要泄露)
2、下載【微信開發者工具】–需要聯網才能使用

3、安裝目錄D:\Program Files (x86)\Tencent\微信web開發者工具。

2.2 創建項目

1 打開微信開發者工具–》使用微信掃描二維碼
2 創建項目
填寫名字、路徑、APPID
不使用云開發【使用騰訊云的云函數，服務器等等，需要花錢】。
不使用模版。

3 創建完成后，界面如下

4、設置
設置–》編輯器設置–》改變字體大小。
視圖–》外觀–》移動模擬器位置。
可以勾選掉不顯示：模擬器，調試器等。

2.3 本地開發支持http

本地開發，使用Django寫后端，
Django運行在0.0.0.0:8000地址，
微信小程序才能通過ip地址訪問到我們的Django項目的接口，
微信小程序默認不支持http，但是Django運行在http上，修改一下微信小程序的配置，讓小程序支持http請求。
右上角–》詳情–》本地設置–》不校驗合法域名。

3 項目目錄

3.1 項目目錄結構

1、項目主配置文件
項目主配置文件必須放到項目的根目錄下，控制整個項目
(1)app.js： 小程序入口文件，小程序啟動，會執行這個js
(2)app.json：小程序的全局配置文件：頂部的顏色、標題等等
(3)app.wxss：小程序的全局樣式
注意：app.js和app.json文件是必須的，不能沒有

2、頁面文件
小程序有一個個頁面，每個頁面所需的文件，都存放在pages目錄下，一個頁面一個文件夾
pages文件夾下，有一個個的文件夾(index,login,register)，每個文件夾下有4個文件。
(1)xx.js： 頁面邏輯 js代碼存放位置
(2)xx.wxml：頁面結構 類html文件存放位置
(3)xx.wxss：頁面樣式 css存放位置，若全局樣式也有，以當前頁面為準
(4)xx.json：小頁面配置 當前頁面頂部顏色，標題
注意：xx.js文件和xx.wxml文件是必須的，不能沒有

├── components                  【頁面中使用的組件】
├── pages   					【頁面文件目錄】
│   ├── index					【頁面】
│   │   ├── index.js				【頁面JS】
│   │   ├── index.json				【頁面配置】
│   │   ├── index.wxml				【頁面HTML】
│   │   └── index.wxss				【頁面CSS】
│   └── logs					【頁面】
│       ├── logs.js					...
│       ├── logs.json				...
│       ├── logs.wxml				...
│       └── logs.wxss				...
├── utils						【自定義工具】
│	└── utils.js					【功能的定義】
├── app.js						【全局JS】
├── app.json					【全局配置】
├── app.wxss					【全局CSS】
├── project.config.json			【開發者工具默認配置】
├── project.private.config.json	【開發者工具用戶配置,在這里修改，優先用這個，可以刪除】
├── .eslintrc.js				【ESlint語法檢查配置】
├── sitemap.json				【微信收錄頁面，用于搜索，上線后，搜索關鍵字就可以搜到我們】

3.2 配置文件

3.2.1 app.json(全局配置)

1、小程序全局配置文件，用于配置小程序的一些全局屬性和頁面路由，默認標題，頂部顏色，是否有下拉刷新。
2、app.json 配置示例
entryPagePath：小程序默認啟動首頁
pages：小程序總共有多少個頁面
window：全局的默認窗口表現，頂部顏色，是否有下拉，它控制很多東西，這個經常用。

{"entryPagePath": "pages/login/login","pages": ["pages/index/index","pages/login/login"],"window": {"navigationBarTitleText": "功能演示",   # 標題"navigationBarBackgroundColor": "#0000FF", #顏色"enablePullDownRefresh": false,  # 是否帶下拉刷新"backgroundColor": "#00FFFF",    # 下拉刷新顏色"backgroundTextStyle": "dark"    # light ，下拉刷新的點點什么顏色},"style": "v2","sitemapLocation": "sitemap.json"
}

3.2.2 xxx.json(頁面配置)

1、小程序頁面配置文件，也稱局部配置文件，用于配置當前頁面的窗口樣式、頁面標題等。
2、app.json中的部分配置，也支持對單個頁面進行配置，可以在頁面對應的xxx.json 文件來對本頁面的表現進行配置。
3、頁面中配置項在當前頁面會覆蓋app.json中相同的配置項(樣式相關的配置項屬于app.json中的window屬性，但這里不需要額外指定window字段)。

{"usingComponents": {},"navigationBarTitleText": "登錄頁面","navigationBarBackgroundColor": "#000080","enablePullDownRefresh": true,"backgroundTextStyle": "light"
}

定義了當前頁面需要使用的自定義組件，usingComponents是一個對象，鍵(key)是組件的名稱，值(value)是組件的路徑。

3.2.3 project.config.json(項目配置)

(1)project.config.json
(2)project.private.config.json
小程序項目的配置文件，用于保存項目的一些配置信息和開發者的個人設置。

3.2.4 搜索相關配置

微信現已開放小程序內搜索，開發者可以通過sitemap.json配置，或者管理后臺頁面收錄開關來配置其小程序頁面是否允許微信索引。

當開發者允許微信索引時，微信會通過爬蟲的形式，為小程序的頁面內容建立索引。
當用戶的搜索詞條觸發該索引時，小程序的頁面將可能展示在搜索結果中。

爬蟲訪問小程序內頁面時，會攜帶特定的user-agent：mpcrawler及場景值：1129。
需要注意的是，若小程序爬蟲發現的頁面數據和真實用戶的呈現不一致，那么該頁面將不會進入索引中。

以后用戶搜索小程序，任意頁面有關鍵字，都會被搜索到。

{"desc": "關于本文件的更多信息","rules": [{"action": "allow","page": "*"}]
}

3.3 WebView渲染模式

webview渲染模式和skyline渲染模式
(1)webview：老一點，穩定，支持低版本和高版本。
(2)skyline：新一點，不太穩定，不支持低版本。

默認使用Skyline渲染模式，支持最新的基礎庫，不支持低版本客戶端。
現在改成webview模式，打開app.json，去掉下面的三個配置項。

"renderer": "skyline",
"rendererOptions": {"skyline": {"defaultDisplayBlock": true,"disableABTest": true,"sdkVersionBegin": "3.0.0","sdkVersionEnd": "15.255.255"}
},
"componentFramework": "glass-easel",  

3.4 新建頁面

方式一：
1、在pages上，新建文件夾，logs
2、在文件夾上右鍵，新建頁面，寫上名字logs，自動創建出四個文件
3、在 app.json中的pages就會多一行

"pages": ["pages/index/index","pages/logs/logs"
],

方式二：
新建頁面可以直接在app.json中增加一行，pages下會自動創建出一個頁面。

"pages": ["pages/index/index","pages/logs/logs","pages/login/login"
],   

3.4 默認啟動頁面

修改小程序一啟動，就顯示的頁面。
方式一：修改順序

# app.json，誰在第一行，一打開小程序就顯示那個頁面"pages": ["pages/index/index","pages/logs/logs","pages/login/login"],

方式二：通過entryPagePath配置

# app.json
"entryPagePath": "pages/index/index",

方式三：臨時添加，臨時看一下

3.5 調試小程序

3.5.1 調試基礎庫

微信小程序的基礎庫，一直在做版本升級
例如：轉發功能、發送朋友圈功能
不同的功能是在不同版本中加入的。

假設我們基于老版本的基礎庫開發的，有的新功能可能沒有，
在開發的時候，做功能如果發現寫了沒效果，確認一下這個基礎庫是否支持這個功能。

3.5.2 調試窗口

Wxml：頁面布局。
Console：調試，我們打印的，小程序自己打印的。
Network：網絡請求。
AppData：當前頁面定義的變量。
Storage：本地存儲。

3.5.3 真機調試

微信掃二維碼，這樣在微信上就可以看到了。

3.6 純凈項目

刪除不需要的，只保留核心，用于從基礎開發。
(1)刪除components文件夾
(2)刪除.eslintrc.js
(3)刪除project.config.json
(4)刪除project.private.config.json
(5)刪除sitemap.json

3.6.1 app.js

// app.js
App({})

3.6.2 app.json

{"pages": ["pages/index/index"],"window": {"navigationBarTitleText": "功能演示",   "navigationBarBackgroundColor": "#0000FF", "enablePullDownRefresh": true,  "backgroundColor": "#00FFFF",    "backgroundTextStyle": "dark"},"style": "v2"
}

(1)導航欄的顯示文本：功能演示
(2)導航欄的背景色：藍色
(3)是否下拉刷新：是
(4)下拉刷新的背景色：淺綠色
(5)下拉刷新里點號的顏色：light或dark

3.6.3 app.wxss(空的)

3.6.4 pages/index/index.js

// index.js
Page({})

3.6.5 pages/index/index.json

{"usingComponents": {},"navigationBarTitleText": "登錄頁面",   "navigationBarBackgroundColor": "#FF0000", "enablePullDownRefresh": true,  "backgroundColor": "#00FFFF",    "backgroundTextStyle": "light"
}

頁面自己的配置優先使用。

3.6.6 pages/index/index.wxml

<!--index.wxml-->
<view class="container">周筆暢
</view>

3.6.7 pages/index/index.wxss(空的)

4 參考附錄

參考微信公眾平臺官網
參考微信開發者工具下載地址
參考小程序全局配置的參考地址
參考小程序頁面配置的參考地址
參考小程序項目配置的參考地址
參考小程序搜索相關配置的參考地址
參考小程序調試基礎庫