【 一 】小程序注冊

微信公眾平臺

https://mp.weixin.qq.com/

https://mp.weixin.qq.com/

注冊

郵箱激活

小程序賬戶注冊

微信小程序配置

微信小程序開發流程

• 添加項目成員

【 二 】云服務

lass 基礎設施服務（組裝機） 你買了一大堆的電腦配件，cpu主板，然后組裝完成后，裝上系統就可以上網，還要自己提供場地 環境。

pass平臺即服務 （品牌機） 買回來開機就行。 需要自己提供環境（電源）

saas軟件即服務 （去網吧、湯池） 電腦、場地、環境（電源，網線，飲料）都是

網吧提供的服務。

【 三 】創建微信小程序項目

3.1 創建項目流程（開發者）

# 1 獲取 小程序id-小程序后臺--》開發--》開發管理--》開發設置--》開發者ID-AppID(小程序ID)	     wx539e097341fc7588# 2 下載微信開發者工具--》這個工具必須聯網才能使用-下載地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html-wechat_devtools_1.06.2402040_win32_x64.exe# 3 一路下一步安裝--》桌面有個快捷方式-微信開發者工具就等同于 pycharm

下載開發工具

3.2 創建項目

# 1 雙擊 微信開發者工具# 2 微信掃碼--》登錄# 3 創建項目-填寫名字-路徑-APPID-不使用云開發【使用騰訊云的云函數，服務器等等，需要花錢】-不使用模版-可以選擇js基礎版--》別的別選了-TS：咱們不會-其他模版功能比較復雜對新手不友好# 4 基礎設置-設置--》編輯器設置--》改變字體大小-視圖--》外觀--》移動模擬器位置-可以勾選掉不顯示：模擬器，調試器等

3.3 本地開發支持http

# 本地開發--》使用django寫后端- django運行在 0.0.0.0:8000 地址-微信小程序才能通過ip地址訪問到我們的django項目的接口-微信小程序默認不支持http--》django運行在http上--》修改一下--》微信小程序配置-讓小程序支持 http請求

【 四 】項目目錄結構

4.1 項目目錄結構

4.1.1 目錄介紹

# 1 項目主配置文件，在項目根路徑下，控制整個項目的-app.js    # 小程序入口文件，小程序啟動，會執行這個js-app.json  # 小程序的全局配置：頂部的顏色，標題。。。-app.wxss  # 小程序全局樣式：所有樣式，全局生效# app.js 和app.json 必須有，沒有不行# 2 頁面文件-pages文件夾下，有一個個的文件夾（index,login,register）-->每個文件夾下有4個文件-xx.js     # 頁面邏輯，js代碼控制-xx.wxml   # 頁面結構，布局，html---》wxml就等同于html，但標簽有些區別-xx.json   # 頁面配置，當前頁面頂部顏色，標題。。-xx.wxss   # 頁面的樣式，如果全局樣式也有，以當前頁面為準# xx.js和xx.wxml 必須得，不能沒有# 3 其他的不重要

├── 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				【微信收錄頁面，用于搜索，上線后，搜索關鍵字就可以搜到我們】

新建頁面

• 只需要在app.json

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

選擇文件項目顯示模擬器

純凈項目

# 把項目不要的東西都刪除--》只留核心--》開發# # # # # app.json# # # # ## # # # #
{"pages": [  "pages/index/index"  # 就一個頁面],"window": {"navigationBarTitleText": "功能演示",   # 標題"navigationBarBackgroundColor": "#0000FF", #顏色"enablePullDownRefresh": false,  # 是否帶下拉刷新"backgroundColor": "#00FFFF",    # 下拉刷新顏色"backgroundTextStyle": "dark"    # light ，下拉刷新的點點什么顏色},"style": "v2",
}# # # # #app.wxss  空的# # # # ## # # # ## # # # #app.js# # # # ## # # # #
App({})# # # # #pages/index# # # # ## # # # #index.jsPage({})index.json{"usingComponents": {},"navigationBarTitleText": "登錄頁面", "navigationBarBackgroundColor": "#FFFF00","enablePullDownRefresh": true,   "backgroundTextStyle": "light" }index.wxml<view class="container">彭于晏--呸呸呸</view>index.wxss-空的

【 五 】快速上手

5.1 小程序常用組件

#1 做過htmla標簽div標簽span標簽img標簽。。。# 2 小程序沒有這些，自己封裝的叫組件-https://developers.weixin.qq.com/miniprogram/dev/component/# 3 text  ---》span 不換行，放文字
<text>我是首頁</text>
<text>我是首頁333</text>
<text>我是首頁444</text># 4 view--》div  換行
<view>我是view</view>
<view>我是view222</view>
<view><text>撒東方閃電</text></view># 5 image 標簽---》img
<image src="/images/b.jpg" style="width: 750rpx;height: 400rpx;"></image># 6 icon
<icon type="success_no_circle"  color="red"/>
<icon type="cancel" color="#ddd"/>

5.2 tabbar配置

# 在底部或在頂部的 tab頁-幾乎所有小程序都會有這個# 如何設置
1 在app.json 配置
"tabBar": {"selectedColor": "#b4282d","position": "bottom","list": [{"pagePath": "pages/index/index","text": "首頁","iconPath": "images/home.png","selectedIconPath": "images/home_select.png"},{"pagePath": "pages/my/my","text": "我的","iconPath": "images/my.png","selectedIconPath": "images/my_select.png"}]
},2 創建頁面 my3 把圖片復制到images目錄下

• app.json

{"pages": ["pages/banner/banner","pages/log/log"],"window": {"enablePullDownRefresh": false,  "backgroundColor": "#00FFFF",  "backgroundTextStyle": "dark"   },"tabBar": {"selectedColor": "#b4282d","position": "bottom","list": [{"pagePath": "pages/banner/banner","text": "首頁","iconPath": "images/home.png","selectedIconPath": "images/home_select.png"},{"pagePath": "pages/log/log","text": "我的","iconPath": "images/my.png","selectedIconPath": "images/my_select.png"}]
},"style": "v2","sitemapLocation": "sitemap.json"}

“selectedIconPath”: “images/home_select.png”
},
{
“pagePath”: “pages/log/log”,
“text”: “我的”,
“iconPath”: “images/my.png”,
“selectedIconPath”: “images/my_select.png”
}
]
},

“style”: “v2”,
“sitemapLocation”: “sitemap.json”

}