資訊專(zhuān)欄INFORMATION COLUMN
摘要：官網(wǎng)訪(fǎng)問(wèn)官網(wǎng)更快閱讀全部免費(fèi)分享課程出品全網(wǎng)最新微信小程序基于最新版開(kāi)發(fā)者工具之初中級(jí)培訓(xùn)教程分享。微信平臺(tái)說(shuō)明文檔小程序的全局配置文件，比如設(shè)置小程序有哪幾個(gè)頁(yè)面組成目前是和窗口表現(xiàn)背景色等設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間設(shè)置導(dǎo)航條樣式等背景色。
第一章：小程序初級(jí)入門(mén)教程 工具安裝iKcamp官網(wǎng)：http://www.ikcamp.com
訪(fǎng)問(wèn)官網(wǎng)更快閱讀全部免費(fèi)分享課程：《iKcamp出品｜全網(wǎng)最新｜微信小程序｜基于最新版1.0開(kāi)發(fā)者工具之初中級(jí)培訓(xùn)教程分享》。
包含：文章、視頻、源代碼
在上一節(jié)第 8 步所展示的頁(yè)面中，可以點(diǎn)擊 開(kāi)發(fā)者工具 直接進(jìn)入到下載頁(yè)面，也可以直接訪(fǎng)問(wèn) 官網(wǎng)下載地址。然后根據(jù)自己的設(shè)備選擇相應(yīng)的下載
安裝過(guò)程不再?gòu)?fù)述，一路默認(rèn)。
下載開(kāi)發(fā)工具
§ 小程序工具起手此教程選擇的工具為 mac 平臺(tái)版本，沒(méi)差
打開(kāi)安裝好的 微信web開(kāi)發(fā)者工具 ，需要用 管理員 或 開(kāi)發(fā)者 的微信賬號(hào)掃碼登錄。管理員賬號(hào) 是上一節(jié)第 6 步中注冊(cè) appID 時(shí)，綁定的微信賬號(hào)。開(kāi)發(fā)者賬號(hào)可在上一節(jié)第 8 步中的 添加開(kāi)發(fā)者 中設(shè)置
登錄成功后，選擇 本地小程序項(xiàng)目，然后 添加項(xiàng)目
如果沒(méi)有注冊(cè) appID，也可以開(kāi)發(fā)小程序項(xiàng)目，但部分功能會(huì)受限，比如在手機(jī)上預(yù)覽。在這里，我們已經(jīng)有了 appID
添加成功后，我們的項(xiàng)目會(huì)在 微信web開(kāi)發(fā)者工具 中自動(dòng)打開(kāi)并啟動(dòng)，可以在此工具中對(duì)代碼進(jìn)行修改、調(diào)試、斷點(diǎn)、預(yù)覽，文件有修改的話(huà)，項(xiàng)目會(huì)實(shí)時(shí)更新。
目錄說(shuō)明項(xiàng)目生成后，會(huì)看到如下結(jié)構(gòu)的目錄文件：
├─ pages/ │ ├─ index/ │ ├─ index.js │ ├─ index.wxml │ ├─ index.wxss │ ├─ logs/ │ ├─ logs.js │ ├─ logs.json │ ├─ logs.wxml │ ├─ logs.wxss ├── utils/ │ ├─ util.js ├── app.js // 必備文件 ├── app.json // 必備文件 ├── app.wxss先看下最外層的三個(gè)文件：app.js 、 app.json 、 app.wxss
app.js
小程序的主入口文件，類(lèi)似于我們?cè)谀K加載器時(shí)代（requirejs/seajs）常常會(huì)碼一個(gè) main.js 來(lái)作為程序的啟動(dòng)入口。如果你有接觸過(guò) node - express 技術(shù)棧，理解起來(lái)會(huì)更貼切。注意：文件名不可更改
我們可以在 app.js 里面對(duì)小程序在不同生命周期段進(jìn)行處理，設(shè)置小程序里面的 全局變量（比如只請(qǐng)求一次公用的數(shù)據(jù)，讓所有的頁(yè)面都能用）。
微信平臺(tái) app.js 說(shuō)明文檔
app.json
小程序的全局配置文件，比如設(shè)置小程序有哪幾個(gè)頁(yè)面組成（目前是 index 和 logs）、窗口表現(xiàn)（背景色等）、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置導(dǎo)航條樣式等背景色。注意：該文件不可添加任何注釋內(nèi)容
微信平臺(tái) app.json 配置文檔
app.wxss
小程序的全局樣式文件，在小程序中，所有的樣式文件不再是 .css 后綴，全都需要以 .wxss 作為后綴。與傳統(tǒng)的 css 樣式相比，wxss 支持 @import 樣式導(dǎo)入和像素單位自適應(yīng)。
獨(dú)立頁(yè)面中的局部樣式，請(qǐng)書(shū)寫(xiě)在相對(duì)的頁(yè)面文件夾中，后面會(huì)有說(shuō)明。
微信平臺(tái) app.wxss 樣式說(shuō)明文檔
app.json 文件中配置了當(dāng)前小程序的兩個(gè)頁(yè)面 pages/index/index 和 pages/logs/logs，可以看到，其實(shí)就是 文件的路徑+文件名 組成。如果增加一個(gè)頁(yè)面，需要在參數(shù) pages 中把頁(yè)面的地址配置進(jìn)去。
細(xì)心的同學(xué)可能已經(jīng)發(fā)現(xiàn)一個(gè)現(xiàn)象，每個(gè)頁(yè)面文件夾，與里面的文件，名字都一樣一樣滴。是的，一般情況下，一個(gè)完整的頁(yè)面需要 js 、wxss(css)、wxml(html) 組成。
比如 index 頁(yè)面，如果需要對(duì) index 頁(yè)面進(jìn)行一些獨(dú)立的配置，需要像 logs 一樣，增加 index.json 文件來(lái)保存配置信息。
{{userInfo.nickName}} {{motto}}
傳統(tǒng)的 html 文件由各種各樣的標(biāo)簽組成，而在 wxml 中，可用的標(biāo)簽元素并不多，可以看到這里涉及到了 view、image、text標(biāo)簽。
view 相當(dāng)于 div，你可以這么去理解。
image 相當(dāng)于 img，這個(gè)應(yīng)該都懂了。
text 很明顯，用來(lái)標(biāo)注文本的標(biāo)簽，既然是 文本，肯定是 行級(jí)元素 了。
還有一些內(nèi)置好的組件標(biāo)簽，自帶樣式和特性，詳見(jiàn) 官方文檔
作用域只在當(dāng)前頁(yè)面生效，它可以覆蓋 app.wxss 里面的樣式規(guī)則。可以看到，與平時(shí)我們用的樣式文件基本沒(méi)差：
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #aaa;
}
.usermotto {
margin-top: 200px;
}
頁(yè)面腳本文件 index.js
跟 app.js 一樣，包含了一個(gè)頁(yè)面的生命周期，聲明并處理數(shù)據(jù)，響應(yīng)頁(yè)面交互事件等。
//index.js
//獲取應(yīng)用實(shí)例
const app = getApp()
Page({
data: {
motto: "Hello World",
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse("button.open-type.getUserInfo")
},
//事件處理函數(shù)
bindViewTap: function() {
wx.navigateTo({
url: "../logs/logs"
})
},
onLoad: function () {
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse){
// 由于 getUserInfo 是網(wǎng)絡(luò)請(qǐng)求，可能會(huì)在 Page.onLoad 之后才返回
// 所以此處加入 callback 以防止這種情況
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
// 在沒(méi)有 open-type=getUserInfo 版本的兼容處理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
},
getUserInfo: function(e) {
console.log(e)
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
})
下期更新內(nèi)容：小程序初級(jí)入門(mén)教程－小試牛刀+發(fā)布流程
iKcamp原創(chuàng)新書(shū)《移動(dòng)Web前端高效開(kāi)發(fā)實(shí)戰(zhàn)》已在亞馬遜、京東、當(dāng)當(dāng)開(kāi)售。
iKcamp最新活動(dòng)相關(guān)文章：
聽(tīng)說(shuō) 2017 你想寫(xiě)前端？
前端開(kāi)發(fā)者指南（2017）
翻譯連載 |《你不知道的JS》姊妹篇 | JavaScript 輕量級(jí)函數(shù)式編程
報(bào)名地址：http://www.huodongxing.com/ev...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/115523.html
摘要：官網(wǎng)訪(fǎng)問(wèn)官網(wǎng)更快閱讀全部免費(fèi)分享課程出品全網(wǎng)最新微信小程序基于最新版開(kāi)發(fā)者工具之初中級(jí)培訓(xùn)教程分享。微信平臺(tái)說(shuō)明文檔小程序的全局配置文件，比如設(shè)置小程序有哪幾個(gè)頁(yè)面組成目前是和窗口表現(xiàn)背景色等設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間設(shè)置導(dǎo)航條樣式等背景色。 iKcamp官網(wǎng)：http://www.ikcamp.com 訪(fǎng)問(wèn)官網(wǎng)更快閱讀全部免費(fèi)分享課程：《iKcamp出品｜全網(wǎng)最新｜微信小程序｜基于最新版1....
摘要：官網(wǎng)訪(fǎng)問(wèn)官網(wǎng)更快閱讀全部免費(fèi)分享課程出品全網(wǎng)最新微信小程序基于最新版開(kāi)發(fā)者工具之初中級(jí)培訓(xùn)教程分享。微信平臺(tái)說(shuō)明文檔小程序的全局配置文件，比如設(shè)置小程序有哪幾個(gè)頁(yè)面組成目前是和窗口表現(xiàn)背景色等設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間設(shè)置導(dǎo)航條樣式等背景色。 iKcamp官網(wǎng)：http://www.ikcamp.com 訪(fǎng)問(wèn)官網(wǎng)更快閱讀全部免費(fèi)分享課程：《iKcamp出品｜全網(wǎng)最新｜微信小程序｜基于最新版1....
摘要：微信小程序課程，面向所有具備前端基礎(chǔ)知識(shí)的同學(xué)官網(wǎng)訪(fǎng)問(wèn)官網(wǎng)更快閱讀全部免費(fèi)分享課程出品全網(wǎng)最新微信小程序基于最新版開(kāi)發(fā)者工具之初中級(jí)培訓(xùn)教程分享。 ?? 微信小程序課程，面向所有具備前端基礎(chǔ)知識(shí)的同學(xué) ?? iKcamp官網(wǎng)：http://www.ikcamp.com 訪(fǎng)問(wèn)官網(wǎng)更快閱讀全部免費(fèi)分享課程：《iKcamp出品｜全網(wǎng)最新｜微信小程序｜基于最新版1.0開(kāi)發(fā)者工具之初中級(jí)培訓(xùn)教...
摘要：微信小程序課程，面向所有具備前端基礎(chǔ)知識(shí)的同學(xué)官網(wǎng)訪(fǎng)問(wèn)官網(wǎng)更快閱讀全部免費(fèi)分享課程出品全網(wǎng)最新微信小程序基于最新版開(kāi)發(fā)者工具之初中級(jí)培訓(xùn)教程分享。 ?? 微信小程序課程，面向所有具備前端基礎(chǔ)知識(shí)的同學(xué) ?? iKcamp官網(wǎng)：http://www.ikcamp.com 訪(fǎng)問(wèn)官網(wǎng)更快閱讀全部免費(fèi)分享課程：《iKcamp出品｜全網(wǎng)最新｜微信小程序｜基于最新版1.0開(kāi)發(fā)者工具之初中級(jí)培訓(xùn)教...
摘要：微信小程序課程，面向所有具備前端基礎(chǔ)知識(shí)的同學(xué)官網(wǎng)訪(fǎng)問(wèn)官網(wǎng)更快閱讀全部免費(fèi)分享課程出品全網(wǎng)最新微信小程序基于最新版開(kāi)發(fā)者工具之初中級(jí)培訓(xùn)教程分享。 ?? 微信小程序課程，面向所有具備前端基礎(chǔ)知識(shí)的同學(xué) ?? iKcamp官網(wǎng)：http://www.ikcamp.com 訪(fǎng)問(wèn)官網(wǎng)更快閱讀全部免費(fèi)分享課程：《iKcamp出品｜全網(wǎng)最新｜微信小程序｜基于最新版1.0開(kāi)發(fā)者工具之初中級(jí)培訓(xùn)教...
閱讀 2416·2021-08-18 10:21
閱讀 2526·2019-08-30 13:45
閱讀 2158·2019-08-30 13:16
閱讀 2117·2019-08-30 12:52
閱讀 1366·2019-08-30 11:20
閱讀 2626·2019-08-29 13:47
閱讀 1626·2019-08-29 11:22
閱讀 2762·2019-08-26 12:11
