調(diào)試
- 通過
console.log(e)可以打印任何東西锋玲，當(dāng)然可以通過斷點(diǎn)查看 - 此時(shí)如果是真機(jī)調(diào)試的話，點(diǎn)擊右上角也可以打開調(diào)試功能盾碗，但只能打印信息（從新打開后點(diǎn)擊右下角的
vConsole）
Paste_Image.png
代碼運(yùn)行
- 文檔 說會自動保存，但通過實(shí)際測試京髓，修改代碼后需要手動保存芥玉，而且沒有全部文件保存灿巧，修改一個(gè)文件保存一個(gè)抠藕，command + r 不能更新，command + s 就會保存并編譯運(yùn)行
查看代碼是否已保存
-
沒保存最新就有個(gè)小綠點(diǎn)
沒保存就有個(gè)小綠點(diǎn)
新建項(xiàng)目
- 必須要有index文件购岗，不然總是提示報(bào)錯(cuò)，找不到路徑
文件格式 文檔
- js 文件中Page必須是首字段乾吻，不能修改，數(shù)據(jù)都放data里面诡必，自定義事件同級
//獲取應(yīng)用實(shí)例
var app = getApp()
Page({
// 數(shù)據(jù)
data: {
motto: 'MiHome_Store'
},
//事件處理函數(shù)
bindViewTap: function () {
wx.navigateTo({
url: '../logs/logs'
})
}
})
wxml 文件是 數(shù)據(jù)界面展示 稿蹲，跟HTML 一樣涂炎，只是標(biāo)簽不一樣了，可參考官方文檔
wxss 文件是 界面樣式修改震缭，更CSS 差不多欢瞪，聽說暫時(shí)不能完美兼容CSS3
json 文件是 基本配置遣鼓，如果是在app.json 中寫的就是全局配置骑祟；如果在對應(yīng)頁面中寫就指定頁面的配置，但是pages只能寫在app.json 中潜圃，注意：必須在pages設(shè)置項(xiàng)目中的文件路徑，才能正常使用文件吧凉，pages 第一個(gè)配置的路徑就會首先顯示的界面
圖片格式支持
- 不支持jpeg 格式胀瞪，支持png傍妒、支持j'p
創(chuàng)建tabBar
- 在app.json 中設(shè)置,此時(shí)顯示的路徑必須是已經(jīng)在pages 中配置好
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "框架",
"iconPath": "image/wechat.png",
"selectedIconPath": "image/wechatHL.png"
},
{
"pagePath": "pages/component/component",
"text": "組件",
"iconPath": "image/wechat.png",
"selectedIconPath": "image/wechatHL.png"
},
{
"pagePath": "pages/api/api",
"text": "API",
"iconPath": "image/wechat.png",
"selectedIconPath": "image/wechatHL.png"
},
{
"pagePath": "pages/tool/tool",
"text": "工具",
"iconPath": "image/wechat.png",
"selectedIconPath": "image/wechatHL.png"
}
]
}
頁面中設(shè)置窗口配置信息
- app.json中需要添加window標(biāo)簽，子頁面json不需要添加window標(biāo)簽,直接在{}內(nèi)設(shè)置
"window": {
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "小程序",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light",
"enablePullDownRefresh": false
}
{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "gitkong",
"navigationBarTextStyle":"black"
}
項(xiàng)目文件快速創(chuàng)建
-
直接在app.json 的 pages 中設(shè)置路徑就可以，比如你想在pages文件夾中創(chuàng)建image文件夾苛吱，image文件夾中創(chuàng)建四個(gè)文件橡疼，image.js住拭、image.json杠娱、image.wxml趴俘、image.wxss 太惠，只需要添加路徑pages/image/image 就行了
快速創(chuàng)建 文件
數(shù)據(jù)讀取
單個(gè)字段屬性缚柳，通過 {{xxx}}
autoplay="{{autoplay}}"其中autoplay是 js 里面的data json 中的字段-
數(shù)組遍歷，通過 wx:for或者類似iOS 的 banner_list[0]單個(gè)獲榷掠摹（默認(rèn)下標(biāo)變量是index，對應(yīng)當(dāng)前項(xiàng)變量是item）
wx:for-items="{{banner_list[0].banner}}"- 可以使用block 標(biāo)簽 配合，item 就是遍歷后的某一個(gè)，通過點(diǎn)語法繼續(xù)向下獲取
<block wx:for-items="{{banner_list[1].banner}}"> <image src="{{item.pic_url}}" class="menue-image" /> </block>- 參照文檔：列表渲染
數(shù)據(jù)更新
- 改變js 中的 data 數(shù)據(jù) ， 通過this.setData 修改;this 是當(dāng)前頁面的一個(gè)實(shí)例對象厨钻，當(dāng)然如果是嵌套方法里面就要注意使用this，此時(shí)this就代表內(nèi)部嵌套的方法
// name 是 data 中的一個(gè)字段屬性诱建，通過點(diǎn)擊方法changeName 修改
changeName:function(){
this.setData({
name : 'gitkong'
})
}
傳值
-
一般頁面中不需要傳形參值（表單也不需要）格仲，默認(rèn)是把當(dāng)前的控件傳進(jìn)去，在方法中可以獲取實(shí)參e（名字隨你寫），HTML 中可以通過document獲取當(dāng)前的控件對象驱敲，但小程序這邊廢棄了，雖然方法還存在，但調(diào)用是一點(diǎn)效果都沒有的
changeName: function(e){
this.change(e)
}
> 此時(shí)獲取到的e 就是 當(dāng)前的控件對象，用 `console.log(e)` 打印
- 當(dāng)然，如果你在js 需要 獲取到 wxml（界面） 中 傳遞的值稿湿，利用 id 或者 `data-你喜歡的變量名` 給個(gè)view綁定 個(gè)值押赊，然后在實(shí)參獲取到了，當(dāng)然你喜歡傳多少個(gè)都可以，名字不一樣就行绍填，**注意：不管你外部命名的變量名是否含有大寫字母，dataset內(nèi)部獲取到的字段key 都全部轉(zhuǎn)成小寫，獲取的時(shí)候注意，例如`id="{{detailFrameItem.detailName}}" data-index="{{detailIndex}}"` ，此時(shí)注意：里面dataset 里面的字段都是小寫，不管你在外面怎么寫叁怪；比如此時(shí)我傳入 data-detailIndex（駝峰命名法）血柳，此時(shí)dataset 對應(yīng)的字段是 detailindex**
WXML
<button class = "name" bindtap = "changeName" data-src = "{{name}}">{{name}}</button>
js
changeName: function(e){
console.log(e)
console.log(e.target.dataset.src)
}
- 形參一般是在js 文件中傳遞，通過 `this.方法名(形參)` 調(diào)用并傳參
change:function(e){
// 此時(shí)打印的就是 hello
console.log(e)
},
changeName: function(e){
this.change('hello')
console.log(e.target.dataset.src)
},
#頁面跳轉(zhuǎn)
- 通過 `wx.navigateTo` 方法跳轉(zhuǎn),同級目錄就只有一個(gè) `../` 上層有多少個(gè)就添加多少個(gè)`../`
wx.navigateTo({
url: '../question/question'
})
- 通過 `navigator` 標(biāo)簽，在 WXML 中創(chuàng)建并傳入跳轉(zhuǎn)的url
#換行
- `<br>` 是不行的，要用 `\n`
#setData 里面不能處理任何邏輯映皆，只能是賦值
this.setData({
xx : ''
})
# JS 的 forin 是遍歷出角標(biāo)，并不能直接獲取數(shù)組元素
for (var item in items){
console.log(items[item].name)
}
# let 接收變量
- 小程序使用let 接收變量澈驼，然后修改了徘六，編譯通過待锈，運(yùn)行還不報(bào)錯(cuò)谍失；所以推薦都是用var 來接收吧颠印，防止手殘，找問題找死你
# js 里面的點(diǎn)語法
- 編寫代碼的時(shí)候，js 文件中询件，你可以點(diǎn)任何東西舆瘪，他不報(bào)錯(cuò)也不提示
# 注釋問題
- 都可以通過快捷鍵 command + / 注釋
- **注意：app.json 里面不能添加注釋，編譯不過**
# 斷點(diǎn)問題
- 如果你打了斷點(diǎn)，沒取消剩拢，然后去編輯代碼，當(dāng)你編譯觸發(fā)斷點(diǎn)后性穿，界面不會跳到調(diào)試界面勺三，所以要注意自己的斷點(diǎn)喔
# wxss 文件中代碼不提示
- 在wxss 文件中，如果首次布局對應(yīng)的 class選擇器或者id 選擇器需曾，不會提示吗坚，但第二次就會提示了，類似于xcode 8 的一個(gè)bug呆万，導(dǎo)入文件的時(shí)候商源，首次不會提示，需要手動打
# 快速拷貝單行
- WXML 里面編寫代碼同樣桑嘶，一行可以寫到底，寫得很長躬充，全選復(fù)制就麻煩逃顶，其實(shí)它像HTML 一樣，只要你光標(biāo)停在那充甚，不選中以政，command + c 就是復(fù)制整行代碼了
#標(biāo)簽內(nèi)容換行問題
- 設(shè)置寬度了，但如果是英文伴找，不會換行盈蛮，如果是中文，會自動換行
#json 格式顯示
- 因?yàn)樾〕绦蛑袥]有了code標(biāo)簽技矮，因此不能直接顯示json 數(shù)據(jù)抖誉，可以手動添加\n 實(shí)現(xiàn)換行，但\t 沒效果衰倦，不能實(shí)現(xiàn)縮進(jìn)
#頁間文本中使用嵌套袒炉，換行問題
- 里面的標(biāo)簽不要使用view，view會默認(rèn)換行樊零，而text不會
#WXML 字符轉(zhuǎn)義問題
- 在小程序中我磁，HTML 對應(yīng)的轉(zhuǎn)義字符已經(jīng)不適用了，官方文檔也沒發(fā)現(xiàn)有對應(yīng)的解決辦法驻襟，測試能通過 js 中獲取
#text標(biāo)簽嵌套事件綁定響應(yīng)問題
- 默認(rèn)text是不能響應(yīng)事件的夺艰，view可以，如果嵌套text標(biāo)簽內(nèi)部要響應(yīng)事件沉衣，最外層的text需要綁定響應(yīng)事件才能響應(yīng)
#路徑問題
app.json 中的路徑是絕對路徑郁副，而圖片加載、文件導(dǎo)入都是相對路徑豌习，可以通過../回到上一級來獲取
#import 和 include 導(dǎo)入問題
- import 是 導(dǎo)入模板霞势，就是使用 `template` 定義的
- include 是 導(dǎo)入標(biāo)簽內(nèi)容
#require 獲取其他 js 文件的路徑問題
- `var common = require('../../../../../alert.js')` 此時(shí)如果路徑不正確烹植，不會報(bào)錯(cuò)，但會將整個(gè)項(xiàng)目的路徑打亂愕贡，還沒搞清楚
#快速關(guān)閉其他標(biāo)簽的問題
- 右鍵選擇關(guān)閉其他標(biāo)簽或者關(guān)閉右側(cè)標(biāo)簽草雕，此時(shí)會彈出一個(gè) `檢查` 按鈕，而且是截取了屏幕的點(diǎn)擊事件固以，此時(shí)需要先 按 `esc` ,去掉 `檢查` 按鈕墩虹，然后才能選擇關(guān)閉標(biāo)簽
#HTTPS 請求
- 模擬器調(diào)試情況下，可以關(guān)閉ATS檢查憨琳，請求http可以獲取數(shù)據(jù)
- 真機(jī)情況下诫钓，就必須使用HTTPS請求
# 數(shù)組操作
- 跟js完全一樣，通過 `concat` 拼接數(shù)組篙螟，通過 `slice` 截取數(shù)組
# textarea 的注意問題
- textarea 使用會有默認(rèn)的高度菌湃，而且默認(rèn)是透明顏色，因此容易出現(xiàn)遮擋問題而沒發(fā)現(xiàn)遍略。
# 列表中數(shù)據(jù)保存的問題
- 如果是列表數(shù)據(jù)的話惧所，很容易出現(xiàn)數(shù)據(jù)被清空，因?yàn)楹芏鄷r(shí)候我們通過setData重新賦值绪杏，此時(shí)修改的內(nèi)容沒更新下愈，就出現(xiàn)清空情況，作者是通過綁定事件蕾久，監(jiān)聽輸入焦點(diǎn)不在的時(shí)候势似，保存一次數(shù)據(jù)
# picker 真機(jī)不顯示的問題
- 如果你的picker 里面是input 并且disable為false，那么在模擬器上是可以正常使用的僧著，但真機(jī)上就沒辦法顯示履因；換成view標(biāo)簽就行了
#video 標(biāo)簽播放問題
- 模擬器上面是不能全屏播放，而且多個(gè)視頻都共用一套盹愚，真機(jī)不是
#安卓設(shè)配flex問題
- 蘋果使用flex布局沒問題搓逾，但放到安卓上就出現(xiàn)很多問題，flex沒效果杯拐，需要使用 `display: -webkit-flex;`
#小程序上使用 `background-image ` 的使用問題
- 真機(jī)上不能顯示本地路徑的圖片霞篡，網(wǎng)絡(luò)的可以
- 模擬器上都能正常顯示
#監(jiān)聽上拉加載更多的狀態(tài)，可以實(shí)現(xiàn)系統(tǒng)的方法 `onReachBottom`
# form 表單提交問題
- 使用form提交雖然快捷端逼，但適配安卓的時(shí)候就出現(xiàn)很多問題朗兵，會出現(xiàn)按鈕點(diǎn)擊無效果，不建議使用form表單提交
# 小程序或者js中的常量表示
- const 表示 常量顶滩，var 表示變量余掖，let 也是變量，但是局部變量（外界不能訪問）