1. 申請賬號
進入微信公眾平臺,申請小程序賬號
注意用于注冊的郵箱地址必須符合以下條件:
- 未用于注冊過微信公眾平臺
- 未用于注冊過微信開放平臺
- 未用于綁定過個人微信號的郵箱
每個郵箱只能申請一個微信小程序.
注冊后需要登記信息,按照引導填寫即可,不再贅述.
完成注冊后登錄,進入登錄界面.此頁面可以完成很多操作,比如修改小程序名稱,修改小程序頭像等
2. 下載開發(fā)者工具
選擇穩(wěn)定版Stable build(穩(wěn)定版的bug已經(jīng)很多了...),根據(jù)系統(tǒng)下載合適的版本
3. 新建小程序項目
打開微信開發(fā)者工具,掃碼登錄后新建項目
- 項目名稱:自己起名字,該名字不會影響用戶看到的小程序的名字(用戶看到的小程序的名字在微信公眾平臺修改)
- 目錄:項目文件存放的路徑,任意選擇
-
APPID:微信公眾平臺登錄后,在設置-賬號信息中可以找到APPID.如圖:image
- 開發(fā)模式:小程序或者小游戲,開發(fā)小程序時選擇小程序
- 后端服務:如果自己編寫后端,則選擇不使用云服務;如果不自己搭建,則可以使用云開發(fā)或者騰訊云.后端服務按需選擇.云開發(fā)最為簡單方便.
4. 開發(fā)工具概覽
在上一步中,選擇了不使用云服務后,點擊新建進入如下界面
5. 文件介紹
5.1 項目配置文件
每個小程序新建時都會自動生成一個項目配置文件(project.config.json),該文件位于項目根目錄下.其內部代碼可以用來配置小程序的項目名稱,APPID等內容,如圖所示:
5.2 主體文件
5.2.1 app.json:必填文件,用于描述小程序的公共配置
? 主要包含了小程序的所有頁面的路徑地址缔俄、導航欄樣式等。
? 代碼如下：
{
"pages": [
"pages/index/index",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"sitemapLocation": "sitemap.json"
}
5.2.1.1 pages屬性
? pages屬性對應的是所有頁面的路徑數(shù)組.如果要添加頁面,則在pages中寫頁面的路徑,然后會自動生成頁面的基本配置文件.路徑數(shù)組中第一個路徑是小程序的初始頁面.注意添加頁面路徑時,每個路徑之間有,相隔,最后一個路徑元素后沒有,
? 如果要刪除頁面,則需要手動刪除目錄和這里的路徑.
5.2.1.2 window屬性
HexColor表示只支持十六進制顏色表示方式.例如#ff0000表示紅色,也可簡寫為#f00,并且大小寫不限
5.2.1.3 tabBar屬性
tabBar表示小程序窗口底部的tab欄.屬性值如下表:
其中，list接受一個數(shù)組分瘾，只能配置2-5個tab州藕。tab按數(shù)組的順序排序，每項都是一個對象，其屬性值如表：
代碼示例:如下構造了有兩個頁面的tabBar,tab文字內容分別為首頁和設置
"tabBar": {
"list": [
{
"pagePath": "pages/home/home",
"text": "首頁"
},
{
"pagePath": "pages/settings/setting",
"text": "設置"
}
]
}
5.2.1.4 networkTimeout屬性
該屬性用于設置各類網(wǎng)絡請求的超時時間,其屬性值如下表
示例代碼:
"networkTimeout": {
"request": 20000,
"connectSocket": 20000,
"uploadFile": 20000,
"downloadFile": 20000
}
5.2.1.5 debug屬性
開啟debug模式,在開發(fā)者工具的控制臺面板中調試信息將以info的形式給出,主要包括Page的注冊篱竭、頁面路由癌刽、數(shù)據(jù)更新
事件觸發(fā)等役首，可以用來快速定位bug
.
5.2.2 app.js:必填文件,用于描述小程序的整體邏輯
app.js是小程序的全局邏輯文件,代碼如下:
//app.js
App({
onLaunch: function() {
// 展示本地存儲能力
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登錄
wx.login({
success: res => {
// 發(fā)送 res.code 到后臺換取 openId, sessionKey, unionId
}
})
// 獲取用戶信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已經(jīng)授權，可以直接調用 getUserInfo 獲取頭像昵稱显拜，不會彈框
wx.getUserInfo({
success: res => {
// 可以將 res 發(fā)送給后臺解碼出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是網(wǎng)絡請求衡奥，可能會在 Page.onLoad 之后才返回
// 所以此處加入 callback 以防止這種情況
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
},
globalData: {
userInfo: null
}
})
將其中的方法體刪除,得到以下代碼框架:
//app.js
App({
onLaunch: function() {
},
globalData: {
}
})
由此可見,所有內容都寫在App()函數(shù)內部,并且彼此之間用,隔開.App()函數(shù)的用法暫時在后面的文章介紹.
5.2.3 app.wxss:可選文件,小程序公共樣式表
app.wxss是全局樣式文件,內容如下:
/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
該文件是可選文件,可以省略不寫.
5.3 頁面文件
小程序建立時默認生成pages文件夾,用來保存頁面文件.每個頁面有自己的二級目錄.如圖所示:
<center><image src="http://r.photo.store.qq.com/psb?/V10hZptb2aUDnK/lTEFjOtrgYBVSOEPomRXsbPcRJX9tPVbtqz9jXPRUng!/r/dMMAAAAAAAAA" /></center>
每個頁面由4個文件構成:
wxml文件:構建頁面的結構,包括組件、事件等,用戶最終看到的頁面效果由該文件決定
wxss文件:用于設置顯示效果,該文件規(guī)定的顯示效果如果與app.wxss中沖突,則將覆蓋app.wxss.未覆蓋的不受影響.
js文件:用于設置當前頁面的邏輯代碼
-
json文件:用來重新設置app.json中window屬性規(guī)定的內容,只對當前頁面有效,不影響其他界面.
json文件的可用屬性如下表:
例如對home頁面的配置如下:
{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "首頁",
"backgroundColor": "#ffffff",
"enablePulDownRefresh": true,
"backgroundTextStyle": "light"
}
上述配置表示:
- 導航欄背景顏色白色
- 導航欄標題顏色黑絲
- 導航欄標題文字內容為"首頁"
- 窗口的背景色為白色
- 開啟下拉刷新
- 下拉loading的樣式為light
5.4 其他文件
? 除了以上常用文件,小程序允許用戶自定義路徑和文件名創(chuàng)建一些輔助文件.例如在utils文件夾中存放公共JS文件.默認的utils文件夾中有一個util.js文件.該文件可以作為模塊被其他頁面的JS引用.具體方式在以后的文章介紹.
? 除此之外,還可以定義一些文件夾用來存儲圖片等.
