iKcamp官網:http://www.ikcamp.com
訪問官網更快閱讀全部免費分享課程:《iKcamp出品|全網最新|微信小程序|基于最新版1.0開發(fā)者工具之初中級培訓教程分享》忆蚀。
包含:文章吧寺、視頻、源代碼
第一章:小程序初級入門教程
工具安裝
在上一節(jié)第 8 步所展示的頁面中,可以點擊 開發(fā)者工具
直接進入到下載頁面艇肴,也可以直接訪問 官網下載地址蜕衡。然后根據自己的設備選擇相應的下載
安裝過程不再復述,一路默認骆膝。
下載開發(fā)工具
<a>§ 小程序工具起手</a>
此教程選擇的工具為 mac 平臺版本黑毅,沒差
- 打開安裝好的
微信web開發(fā)者工具
嚼摩,需要用管理員
或開發(fā)者
的微信賬號掃碼登錄。管理員賬號
是上一節(jié)第 6 步中注冊appID
時矿瘦,綁定的微信賬號枕面。開發(fā)者賬號可在上一節(jié)第 8 步中的添加開發(fā)者
中設置
- 登錄成功后,選擇
本地小程序項目
缚去,然后添加項目
- 如果沒有注冊
appID
潮秘,也可以開發(fā)小程序項目,但部分功能會受限易结,比如在手機上預覽枕荞。在這里柜候,我們已經有了appID
- 添加成功后,我們的項目會在
微信web開發(fā)者工具
中自動打開并啟動躏精,可以在此工具中對代碼進行修改渣刷、調試、斷點矗烛、預覽辅柴,文件有修改的話,項目會實時更新瞭吃。
目錄說明
項目生成后碌嘀,會看到如下結構的目錄文件:
├─ 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
技術棧牡拇,理解起來會更貼切。注意:<span style="color:red">文件名不可更改</span>
我們可以在app.js
里面對小程序在不同生命周期段進行處理穆律,設置小程序里面的全局變量
(比如只請求一次公用的數據惠呼,讓所有的頁面都能用)。
微信平臺 app.js 說明文檔
app.json
小程序的全局配置文件峦耘,比如設置小程序有哪幾個頁面組成(目前是index
和logs
)剔蹋、窗口表現(背景色等)、設置網絡超時時間辅髓、設置導航條樣式等背景色泣崩。注意:<span style="color:red">該文件不可添加任何注釋內容</span>
微信平臺 app.json 配置文檔
app.wxss
小程序的全局樣式文件,在小程序中洛口,所有的樣式文件不再是.css
后綴矫付,全都需要以.wxss
作為后綴。與傳統(tǒng)的css
樣式相比第焰,wxss
支持@import
樣式導入和像素單位自適應买优。
獨立頁面中的局部樣式,請書寫在相對的頁面文件夾中挺举,后面會有說明杀赢。
微信平臺 app.wxss 樣式說明文檔
小程序的頁面文件
app.json
文件中配置了當前小程序的兩個頁面 pages/index/index
和 pages/logs/logs
,可以看到湘纵,其實就是 文件的路徑+文件名
組成脂崔。如果增加一個頁面,需要在參數 pages
中把頁面的地址配置進去梧喷。
細心的同學可能已經發(fā)現一個現象脱篙,每個頁面文件夾娇钱,與里面的文件,名字都一樣一樣滴绊困。是的文搂,一般情況下,一個完整的頁面需要 js
秤朗、wxss(css)
煤蹭、wxml(html)
組成。
比如 index
頁面取视,如果需要對 index
頁面進行一些獨立的配置硝皂,需要像 logs
一樣,增加 index.json
文件來保存配置信息作谭。
來看下 wxml
文件與 html
文件的區(qū)別
<!--index.wxml-->
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像昵稱 </button>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
傳統(tǒng)的 html
文件由各種各樣的標簽組成稽物,而在 wxml
中,可用的標簽元素并不多折欠,可以看到這里涉及到了 view
贝或、image
、text
標簽锐秦。
- view 相當于
div
咪奖,你可以這么去理解。 - image 相當于
img
酱床,這個應該都懂了羊赵。 - text 很明顯,用來標注文本的標簽,既然是
文本
,肯定是行級元素
了皂贩。
還有一些內置好的組件標簽,自帶樣式和特性靡挥,詳見 官方文檔
頁面樣式表 index.wxss
作用域只在當前頁面生效,它可以覆蓋 app.wxss
里面的樣式規(guī)則衩茸∏垩可以看到,與平時我們用的樣式文件基本沒差:
/**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
})
}
})
下期更新內容:小程序初級入門教程-
小試牛刀
+發(fā)布流程
iKcamp原創(chuàng)新書《移動Web前端高效開發(fā)實戰(zhàn)》已在亞馬遜、京東聚霜、當當開售狡恬。
相關文章:
聽說 2017 你想寫前端珠叔?
前端開發(fā)者指南(2017)
翻譯連載 |《你不知道的JS》姊妹篇 | JavaScript 輕量級函數式編程