一、入門
1.app.js
app.js 是小程序的腳本代碼。我們可以在這個文件中監(jiān)聽并處理小程序的生命周期函數(shù)、聲明全局變量。調(diào)用 MINA提供的豐富的 API,如本例的同步存儲及同步讀取本地?cái)?shù)據(jù)。
2.app.json
app.json 是對整個小程序的全局配置。我們可以在這個文件中配置小程序是由哪些頁面組成,配置小程序的窗口 背景色,配置導(dǎo)航條樣式,配置默認(rèn)標(biāo)題。注意該文件不可添加任何注釋。
eg: { "pages":[ "pages/index/index", "pages/logs/logs" ] }
// 注意:pages/index/index 最后的index,就包含了index.js index.wxml index.wxss三個文件
3.index.js
index.js 是頁面的腳本文件,在這個文件中我們可以監(jiān)聽并處理頁面的生命周期函數(shù)、獲取小程序?qū)嵗?,聲明并處理?shù)據(jù),響應(yīng)頁面交互事件等。
4..wxss
頁面的樣式表是非必要的。當(dāng)有頁面樣式表時,頁面的樣式表中的樣式規(guī)則會層疊覆蓋 app.wxss 中的樣式規(guī)則。如果不指定頁面的樣式表,也可以在頁面的結(jié)構(gòu)文件中直接使用 app.wxss中指定的樣式規(guī)則
6..wxml
布局文件
<!-- logs.wxml --> <view class="container log-list"> </view>
二、生命周期:
在index.js里面:
生命周期是:App Launch -> App Show -> onload -> onShow -> onReady
1)整個app的啟動與現(xiàn)實(shí)。app的啟動在app.js中可配置。
2)進(jìn)入各個頁面的加載顯示等。(這里,loading的指示器顯示等)。
3)界面跳轉(zhuǎn):
a)wx.navigateTo(OBJECT):保留當(dāng)前頁面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面,使用wx.navigateBack可以返回到原頁面。
b)wx.redirectTo(OBJECT):關(guān)閉當(dāng)前頁面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面。
c)wx.nacigateBack():當(dāng)前頁面關(guān)閉,回退到前一頁面。
三、八大組件
這里可以參考官方文檔,比較全面。
四、外部框架
原生的js插件和外部框架都不能使用,因?yàn)樗麄儙缀醵际遣僮鱀OM的內(nèi)容,而微信應(yīng)用號不允許操作任何DOM。動態(tài)設(shè)置的rem.js也不能支持。
五、WebSocket
微信提供WebSocket讓我們可以做即時聊天,十分方便。
六、tabBar
*注意:微信的底部菜單最多支持五欄(五個 icons)
tabBar的text屬性可以去掉,而且沒有text屬性的時候,tabBar高度會降低。
七、知識點(diǎn)
1)*注意:wechat開發(fā)工具并不完善,每次編輯了哪個頁面,必須ctrl + s:保存一下.
2)F5是刷新頁面,可以刷新測試的demo界面
*注意:修改wxml和wxss下的內(nèi)容后,直接 F5 刷新就能直接看到效果,修改js則需點(diǎn)擊重啟按鈕才能看到效果。
3)建議在subline或者webStorm下開發(fā)微信小程序
4)基于微信開發(fā)工具并不人性化目前,建議在新建頁面的時候,首先在app.json的pages中先添加:"pages/index/index",再新建一個wxml文件的同時,把對應(yīng)的js和wxss文件一起新建好,因?yàn)槲⑿艖?yīng)用號的配置特點(diǎn)就是解析到一個wxml文件時,會同時在同級目錄下找到同文件名的js和wxss文件.
5)相對于html的
6)使用class名來設(shè)置樣式,id名在這里基本沒有什么用處。原因是主要操作數(shù)據(jù),不操作dom。
7)wxss文件是引入的樣式文件,可以直接在里面寫樣式,但是不推薦
eg:
eg: @import "wxss/index.css"; body{ background:pink; }
8)app.json中 window是配置頂部的一些樣式
tabBar 是配置底部的配置
9)window作用:
用于設(shè)置小程序的狀態(tài)欄,導(dǎo)航欄,標(biāo)題,窗口背景色。// 窗口指的是頁面的back
*注:在app.json中配置的屬性會被子window的屬性所覆蓋。
屬性有:
"navigationBarBackgroundColor":"#666666"
"navigationBarTextStyle":"white" // 注意:這里僅支持white/black/light
"navigationBarTitleText":"微信demo" // 導(dǎo)航欄標(biāo)題文字
"bacgroundColor":"#333333" // 窗口的背景色
"backgroundTextStyle":"dark" // 下拉背景字體,loading圖的楊啊是,僅僅支持 dark/light
"enablePullDownRefresh":"false" // 是否開啟下拉刷新
10).js文件主要作用邏輯,和生命周期函數(shù)處理
11)小程序中的導(dǎo)入:
a).js => require
b).wxss => import
12)在css中display屬性作用
eg:
{ display:none; // 不顯示 display:block; // 此元素將顯示為塊級元素,此元素前后會帶有換行符 display:inline; // 默認(rèn)。此元素會被顯示為內(nèi)聯(lián)元素,元素前后沒有換行符。 display:inline-block; // 行內(nèi)塊元素 ....... // 參考 [display解釋](http://www.w3school.com.cn/cssref/pr_class_display.asp) }
在微信小程序中:
`display:flex;` // 參考:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 作用是 `flex `是` flexiable box` 用于移動布局。 為盒狀模型提供了最大的靈活性。任何一個容器都能夠制定為Flex布局。
webkit內(nèi)核的瀏覽器:safari是一個
*注意:設(shè)為Flex布局以后,子元素的float、clear和vertical-align屬性將失效。
13)rpx單位介紹:
微信小程序中的css尺寸單位,rpx可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定的屏幕寬度為750rpx.
參考: http://www.51xuediannao.com/javascript/xiaochengxu_rpx.html
14) indicator-dots = "{{indicatorDots}}" 為何用{{}}包裹
<swiper class="swiper_box" indicator-dots="{{indicatorDots}}" vertical="{{vertical}}">
解釋:綁定的數(shù)據(jù)。也可以說是一種MVVM的模板語法。VUE AN基本都是這么干的。語法格式。應(yīng)該是框架加進(jìn)去的自定義屬性,{}看框架咋定義,有些事function,有些是參數(shù)。標(biāo)簽里面遇到像data,ng-model, indicator-dots這樣的屬性,一般都是框架加進(jìn)去的。
15)Page()函數(shù)用來注冊一個頁面。接受一個object參數(shù)。其指定頁面的初始數(shù)據(jù),生命周期函數(shù),時間處理函數(shù)等。
Page()相當(dāng)于一個構(gòu)造函數(shù)。
Page({ data:{ indicatorDots:true, vertical:false, autoplay:true, interval:3000 }, // 時間處理函數(shù) swiperchange:function(e){ // contents } })
16) js中 var that = this; 的解釋
this對象在程序中隨時會改變,而var that=this之后,that沒改變之前仍然是指向當(dāng)時的this,這樣就不會出現(xiàn)找不到原來的對象
17)App() 函數(shù)用來注冊一個小程序。接受一個 object 參數(shù),其指定小程序的生命周期函數(shù)等。
前臺、后臺定義: 當(dāng)用戶點(diǎn)擊左上角關(guān)閉,或者按了設(shè)備 Home 鍵離開微信,小程序并沒有直接銷毀,而是進(jìn)入了后臺;當(dāng)再次進(jìn)入微信或再次打開小程序,又會從后臺進(jìn)入前臺。
只有當(dāng)小程序進(jìn)入后臺一定時間,或者系統(tǒng)資源占用過高,才會被真正的銷毀。
App.prototype.getCurrentPage()
getCurrentPage()函數(shù)用戶獲取當(dāng)前頁面的實(shí)例。
var app = getApp(); 微信提供了全局的 getApp() 函數(shù),可以獲取到小程序?qū)嵗?/p>
不要在定義于 App()內(nèi)的函數(shù)中調(diào)用 getApp() ,使用 this就可以拿到 app 實(shí)例。
不要在onLaunch的時候調(diào)用 getCurrentPage(),此時 page 還沒有生成。
通過 getApp() 獲取實(shí)例之后,不要私自調(diào)用生命周期函數(shù)。
實(shí)用經(jīng)驗(yàn),自己出錯過的
2.Page中的2個方法中, 需要用,隔開:
Page({ onLoad: function () { console.log('onLoad-search') }, // 返回前一頁 navigateBack: function(e) { console.log("back"); } })
3.設(shè)置都是 :, 不是=:
// 清除 clearText: function(e) { this.setData({ input_str:"" // 之前是=就會報(bào)錯 }) },
4.
display:none 與 display:block 相對應(yīng)后者會顯示
5.主要原則:
不是改變父元素,是改變item對應(yīng)的數(shù)據(jù)變量。
6.事件:
Page({ bindViewTap:function(event){ event.target.dataset.alphaBeta === 1 // - 會轉(zhuǎn)為駝峰寫法 event.target.dataset.alphabeta === 2 // 大寫會轉(zhuǎn)為小寫 } })
8.當(dāng)前target
console.log(e.currentTarget);
9.表達(dá)式
{{}} 里面不能嵌套 {} 或者 {{}} , 里面自然會使用變量
{{ dic-index }} // 如果index 變量為1. 結(jié)果就為dic-1
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)