微信小程序
1 微信公衆平臺
騰訊: 微信通訊(9億用戶羣) 張小龍
-微信公衆平臺-(訂閱號)-[電視臺;報紙;雜誌]
-微信公衆平臺-(小程序)-[小程序] pc/android/ios
-微店
-微信公衆平臺-(小遊戲)
2 微信小程序
小程序特點:不需要下載即可使用，用完即走.
小程序發佈時候對軟件要求項目最大1MB,升級有2MB
微信公衆平臺–註冊帳戶 [小程序] [訂閱號]
https://mp.weixin.qq.com/cgi-bin/loginpage?t=wxm2-login&lang=zh_CN
官方提供小程序開發工具
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=19022017
2.1 目錄結構與文件類型
wx/pages 項止所有組件保存目錄
index.wxml 首頁:wxml不是html(嚴格一組xml標籤)
app.wxss 全局樣式(單位 rpx;@import “wx.wxss”)
app.js 入口程序
app.json 項目配置文件
小程序中wxml是一種xml文件用於描述網頁結構
-所有標籤有開始必須有結束 <text>
-屬性必須雙引號 <button name=“btn”>
常用標籤
<view></view> 相當於 <div></div>
<text></text> 相當於 <span><p>
<image></image> 相當於 <img src="" />
<navigator></navigator> 相當於 <a>
<form></form>
#小程序在運行時有一個自動化操作,在運行自動將組件對應
wxss和js文件加載到當前組件wxml
#在小程序默認不需要引入同名樣式文件或者js文件
2.1.1 image
#image默認大小 width:320px; height:240px;
#圖片路徑 <image src=“圖片路徑” />
(1)本地絕對路徑 /pages/img/blue.png
(2)本地相對路徑 …/…/img/blue.png
(3)網絡絕對路徑 http://www.baidu.com/logo.png
#圖片常用屬性
-lazy-load 懶加載 <image lazy-load=‘true’ >
-mode
aspectFill 顯示圖片等比例縮放以短邊爲準
aspectFit 顯示圖片等比例縮放以長邊爲準
2.1.2 text
selectable false 文本內容是否可以選中複製
decode false 是否對文本的內容編碼
2.2 wxss
二個新特性
-rpx (r 響應式)
前端開發流程
(1)設計工程師 ps 創建手機效果圖 物理像素 6 750px/2
(2)前端工程師 html/css/js/… 邏輯像素 375px
小程序新單位rpx:元素寬度
(1)設計工程師 ps 創建手機效果圖 物理像素 6 750px
(2)前端工程師 小程序 邏輯像素 750rpx
#注意事項:字體大小 12px;
-@import 引入其它樣式文件
@import “樣式文件”
2.3 js
小程序爲每一個組件對應創建對象和.js文件
Page() 當前組件對象
Page({data:{},onload:function(){}…})
小程序js與原生js區別
-ECMAScript
–基本數據類型:number;string;boolean;null;undefined
–引入:Object;Math;Date;RegExp;…
-DOM/BOM 沒有
-小程序有頂級對象 wx (類似window)
查看小程序wx手冊:
https://developers.weixin.qq.com/miniprogram/dev/api/
data{msg:“tarena”}
-顯示數據 {{msg}}
-修改數據 this.setData({msg:"新值 "})
-獲取數據 var m = this.data.msg
3 組件
3.1 組件生命週期
-生命週期:一個組件從創建到銷售過程
onLoad: 組件加載完成觸發一次!!!
-發送ajax請求
-獲取其它組件傳遞過來參數options
onload(options){}
onReady: 組件初始渲染完成觸發一次
onShow: 組件顯示觸發多次/將組件切換前臺執行
onHide: 組件隱藏或者切換後臺執行
onUnload 組件卸載觸發(將組件移出內存)一次
a ->跳轉wx.redirectTo({url:"/pages/…"})->
3.2 組件特殊事件
-onPullDownRefresh 監聽用戶下拉操作[更新]
#默認小程序禁止用戶下拉操作
#解決問題
-全局修改配置:所有組件均可下拉操作
app.json{
“window”:{“enablePullDownRefresh”: true}
}
-指定組件修改配置:當前組件可以下拉操作
exam3.json “enablePullDownRefresh”: true
-onReachBottom 監聽用戶上拉觸頂操作[加載更多]
-onPageScroll(opt) 監聽用戶滑動操作
opt.scrollTop 頁面垂直方向己經滾動距離
3.3 組件跳轉與傳參
- 方式:標籤
<navigator url=“組件路徑”>文字…
跳轉路徑可以使用相對路徑也可以用絕對路徑
絕對路徑: /pages/index/index
相對路徑: …/exam/exam
#如果組件己經定義在tabbar中不能通過標籤跳轉
#跳轉成功可以後退 - 方式:編程
(1)wx.redirectTo({url:“組件路徑”});
#卸載當前組件並且跳換下一個指定組件
#不能跳轉tabbar中定義組件
(2)wx.navigateTo({url:“組件路徑”});
#**保留(可以點擊返回)**當前組件並且跳轉下一個指定組件
#不能跳轉tabbar中定義組件
(3)wx.reLaunch({url:“組件路徑”});
#保留當前組件並且跳轉下一個指定組件
#能跳轉tabbar中定義組件
程序js與標籤wxml中指定組件路徑添加/根路徑，配置文件json中不需要添加/根路徑
優先使用標籤<navigator>，其次選擇保留跳轉navigateTo
1）傳參數
url:"/pages/index/index?id=1&age=19"
2）取參數
onLoad(options){
console.log(options.id);
console.log(options.age);
}
4 微信小程序配置
-全局配置項 app.json
pages:array 配置組件路徑
window 窗口樣式
“navigationBarBackgroundColor”: “#fc0”,導航條背景色，必須十六進制顏色
“navigationBarTitleText”: “學子商城”, 導航條文本內容
“navigationBarTextStyle”: “black”, 導航文本樣式[white/black]
“enablePullDownRefresh”: true 觸發下拉操作
微信小程序驗證合法域名：設置->項目設置 ->[*]不校驗合法域名
5 tabbar底部導航欄
tabbar至少2個選項；
文件路徑不加/，不支持網絡只支持本地路徑
圖片路徑：pages/img/1.jpg
組件路徑：pages/index/index
"tabbar":{
"list":[{
pagePath:"組件路徑",
text:"文本",
iconPath:"圖標",
selectedIconPath:"選中圖標"
}]
}
-當前組件配置項 exam3.json
pagePath組件路徑一定存在
6 微信小程序數據顯示
Page({data:{},方法名:function(){}})
小程序動態獲取data值,使用雙花括號 {{msg}}，data屬性保存初始化值
控制結構
1）if
<view wx:if="{{condition}}">xxx</view>
condition:表達式也可以變量 true false
true 當前元素正常顯示
false 當前元素刪除
-if else
<view wx:elif="{{condition}}"></view>
<view wx:else></view>
2）for
<view wx:for="{{數組對象}}">
默認情況下當前對象 item 當前元素下標 index
修改默認值 wx:for-item=“當前元素” wx:for-index=“下標”
wx:key=“index”
爲了提高效率小程序在循環之前對數據排序,需要一個不重複值
7 微信小程序事件
1）pc事件:
-操作依靠 鼠標;鍵盤
-事件 click mousemove keypress …
2） 移動端事件:
-操作依靠 手指
-事件
觸摸事件–通用原生 BOM事件
addEventListener(“事件名”,function(){})
touchstart 當手指觸碰屏幕時發生不管幾個手指
touchmove 當手指在屏幕滑動時連續觸發
touchend 當手指離開屏幕時發觸發
由於原生移動事件使用時不是很方便,可以使用第三方移動函數庫zepto.js – 相當於pc的jquery
觸碰函數
tap 按一次
longtap 長按一次 300ms 以上
swipe 滑動
swipeLeft 左滑
swipeRight 右滑
swipeUp 上滑
swipeDown 下滑
$("").tap(function(){});
#注意事項:禁止屏幕滑動 *{touch-action:none}
7.1 微信小程序事件綁定
-tap 手指觸碰屏幕後馬上離開
-longtap 手指觸碰屏幕後超過300ms離開 舊
-longpress 手指觸碰屏幕後超過300ms離開 新
事件綁定
tap me 支持事件冒泡
tap me 不支持事件冒泡
7.2 微信小程序事件對象
handle1:function(e){}
type:“tap” 觸發的事件名稱
currentTarget: 綁定事件的當前元素
target: 觸發事件元素
timeStamp: 當組件打開到觸發事件經過毫秒
元素與事件處理函數傳值方法與vue相同：設置自定義屬性data-idx，e.target.dataset.idx
8 小程序異步請求
小程序中顯示數據(圖片;音頻;視頻…)，依賴服務器端數據
發送ajax請求獲取服務器數據將並保存數據
data屬性中再顯示.
wx.request({}); 小程序發送異步請求
url:"" 請求服務器端程序地址 http://127.0.0.1:3000/login
method 請求方法 GET/POST 默認GET
data:{} 請求參數 uname upwd
success:(res)=>{} 請求成功回調函數 服務器端狀態碼200
fail 請求失敗回調函數 500 …
complete 無論請求成功或者失敗都回調函數
9 輪播圖
<swiper autoplay>
<swiper-item wx:for="{{list}}" wx:key="index">
<image src="{{item.xxx}}" lazy-load mode="aspectFill"></image>
</swiper-item>
</swiper>
常見屬性:
-autoplay 自動播放
-interval 間隔時間
-indicator-dots 指示點
-vertical 是否是縱向