資訊專欄INFORMATION COLUMN
摘要：官網訪問官網更快閱讀全部免費分享課程出品全網最新微信小程序基于最新版開發者工具之初中級培訓教程分享。微信平臺說明文檔小程序的全局配置文件，比如設置小程序有哪幾個頁面組成目前是和窗口表現背景色等設置網絡超時時間設置導航條樣式等背景色。
第一章：小程序初級入門教程 工具安裝iKcamp官網：http://www.ikcamp.com
訪問官網更快閱讀全部免費分享課程：《iKcamp出品｜全網最新｜微信小程序｜基于最新版1.0開發者工具之初中級培訓教程分享》。
包含：文章、視頻、源代碼
在上一節第 8 步所展示的頁面中，可以點擊 開發者工具 直接進入到下載頁面，也可以直接訪問 官網下載地址。然后根據自己的設備選擇相應的下載
安裝過程不再復述，一路默認。
下載開發工具
§ 小程序工具起手此教程選擇的工具為 mac 平臺版本，沒差
打開安裝好的 微信web開發者工具 ，需要用 管理員 或 開發者 的微信賬號掃碼登錄。管理員賬號 是上一節第 6 步中注冊 appID 時，綁定的微信賬號。開發者賬號可在上一節第 8 步中的 添加開發者 中設置
登錄成功后，選擇 本地小程序項目，然后 添加項目
如果沒有注冊 appID，也可以開發小程序項目，但部分功能會受限，比如在手機上預覽。在這里，我們已經有了 appID
添加成功后，我們的項目會在 微信web開發者工具 中自動打開并啟動，可以在此工具中對代碼進行修改、調試、斷點、預覽，文件有修改的話，項目會實時更新。
目錄說明項目生成后，會看到如下結構的目錄文件：
├─ 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先看下最外層的三個文件：app.js 、 app.json 、 app.wxss
app.js
小程序的主入口文件，類似于我們在模塊加載器時代（requirejs/seajs）常常會碼一個 main.js 來作為程序的啟動入口。如果你有接觸過 node - express 技術棧，理解起來會更貼切。注意：文件名不可更改
我們可以在 app.js 里面對小程序在不同生命周期段進行處理，設置小程序里面的 全局變量（比如只請求一次公用的數據，讓所有的頁面都能用）。
微信平臺 app.js 說明文檔
app.json
小程序的全局配置文件，比如設置小程序有哪幾個頁面組成（目前是 index 和 logs）、窗口表現（背景色等）、設置網絡超時時間、設置導航條樣式等背景色。注意：該文件不可添加任何注釋內容
微信平臺 app.json 配置文檔
app.wxss
小程序的全局樣式文件，在小程序中，所有的樣式文件不再是 .css 后綴，全都需要以 .wxss 作為后綴。與傳統的 css 樣式相比，wxss 支持 @import 樣式導入和像素單位自適應。
獨立頁面中的局部樣式，請書寫在相對的頁面文件夾中，后面會有說明。
微信平臺 app.wxss 樣式說明文檔
app.json 文件中配置了當前小程序的兩個頁面 pages/index/index 和 pages/logs/logs，可以看到，其實就是 文件的路徑+文件名 組成。如果增加一個頁面，需要在參數 pages 中把頁面的地址配置進去。
細心的同學可能已經發現一個現象，每個頁面文件夾，與里面的文件，名字都一樣一樣滴。是的，一般情況下，一個完整的頁面需要 js 、wxss(css)、wxml(html) 組成。
比如 index 頁面，如果需要對 index 頁面進行一些獨立的配置，需要像 logs 一樣，增加 index.json 文件來保存配置信息。
{{userInfo.nickName}} {{motto}}
傳統的 html 文件由各種各樣的標簽組成，而在 wxml 中，可用的標簽元素并不多，可以看到這里涉及到了 view、image、text標簽。
view 相當于 div，你可以這么去理解。
image 相當于 img，這個應該都懂了。
text 很明顯，用來標注文本的標簽，既然是 文本，肯定是 行級元素 了。
還有一些內置好的組件標簽，自帶樣式和特性，詳見 官方文檔
作用域只在當前頁面生效，它可以覆蓋 app.wxss 里面的樣式規則。可以看到，與平時我們用的樣式文件基本沒差：
/**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;
}
頁面腳本文件 index.js
跟 app.js 一樣，包含了一個頁面的生命周期，聲明并處理數據，響應頁面交互事件等。
//index.js
//獲取應用實例
const app = getApp()
Page({
data: {
motto: "Hello World",
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse("button.open-type.getUserInfo")
},
//事件處理函數
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 是網絡請求，可能會在 Page.onLoad 之后才返回
// 所以此處加入 callback 以防止這種情況
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
// 在沒有 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
})
}
})
下期更新內容：小程序初級入門教程－小試牛刀+發布流程
iKcamp原創新書《移動Web前端高效開發實戰》已在亞馬遜、京東、當當開售。
iKcamp最新活動相關文章：
聽說 2017 你想寫前端？
前端開發者指南（2017）
翻譯連載 |《你不知道的JS》姊妹篇 | JavaScript 輕量級函數式編程
報名地址：http://www.huodongxing.com/ev...
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51369.html
摘要：官網訪問官網更快閱讀全部免費分享課程出品全網最新微信小程序基于最新版開發者工具之初中級培訓教程分享。微信平臺說明文檔小程序的全局配置文件，比如設置小程序有哪幾個頁面組成目前是和窗口表現背景色等設置網絡超時時間設置導航條樣式等背景色。 iKcamp官網：http://www.ikcamp.com 訪問官網更快閱讀全部免費分享課程：《iKcamp出品｜全網最新｜微信小程序｜基于最新版1....
摘要：官網訪問官網更快閱讀全部免費分享課程出品全網最新微信小程序基于最新版開發者工具之初中級培訓教程分享。微信平臺說明文檔小程序的全局配置文件，比如設置小程序有哪幾個頁面組成目前是和窗口表現背景色等設置網絡超時時間設置導航條樣式等背景色。 iKcamp官網：http://www.ikcamp.com 訪問官網更快閱讀全部免費分享課程：《iKcamp出品｜全網最新｜微信小程序｜基于最新版1....
摘要：微信小程序課程，面向所有具備前端基礎知識的同學官網訪問官網更快閱讀全部免費分享課程出品全網最新微信小程序基于最新版開發者工具之初中級培訓教程分享。 ?? 微信小程序課程，面向所有具備前端基礎知識的同學 ?? iKcamp官網：http://www.ikcamp.com 訪問官網更快閱讀全部免費分享課程：《iKcamp出品｜全網最新｜微信小程序｜基于最新版1.0開發者工具之初中級培訓教...
摘要：微信小程序課程，面向所有具備前端基礎知識的同學官網訪問官網更快閱讀全部免費分享課程出品全網最新微信小程序基于最新版開發者工具之初中級培訓教程分享。 ?? 微信小程序課程，面向所有具備前端基礎知識的同學 ?? iKcamp官網：http://www.ikcamp.com 訪問官網更快閱讀全部免費分享課程：《iKcamp出品｜全網最新｜微信小程序｜基于最新版1.0開發者工具之初中級培訓教...
摘要：微信小程序課程，面向所有具備前端基礎知識的同學官網訪問官網更快閱讀全部免費分享課程出品全網最新微信小程序基于最新版開發者工具之初中級培訓教程分享。 ?? 微信小程序課程，面向所有具備前端基礎知識的同學 ?? iKcamp官網：http://www.ikcamp.com 訪問官網更快閱讀全部免費分享課程：《iKcamp出品｜全網最新｜微信小程序｜基于最新版1.0開發者工具之初中級培訓教...
閱讀 2404·2021-11-24 09:39
閱讀 3223·2021-10-09 09:53
閱讀 1130·2021-09-22 16:06
閱讀 4441·2021-09-02 10:18
閱讀 800·2021-08-23 09:42
閱讀 1760·2021-08-17 10:11
閱讀 2685·2019-08-30 13:02
閱讀 2120·2019-08-30 12:49
