項目地址:https://github.com/gaoruishan/Oldsland.git
步驟:
(1)創建項目:選擇目錄文件夾
(2)點擊無APPID
(3)不勾線"創建QuickStart項目"
新建:
(1)項目文件:app.js,app.json,app.wxss三個必須文件
(2)代碼文件:創建src/ ... 頁面文件:xxx.js,xxx.wxml兩個必須文件
1,小程序關鍵文件:
app.js 以.js後綴是腳本文件
app.json 以.json後綴是配置文件
app.wxss 以.wxss後綴是樣式表文件
以.wxml後綴是頁面結構文件
2,格式化代碼: command+f
最近文件:command+e
搜索文件:command+p
全局查找:shift+command+f
3,視圖和渲染
(1)數據的綁定:
使用雙括號{{txt}} 在.js中 data: {
txt:"這裏text是內容"
}
(2)改變數據:this.setData({txt:"恭喜你 中獎了~"})
(3)點擊事件:bindtap="btnClick"
(4)判斷標籤:wx:if="" wx:else
(5)循環標籤:wx:for="" 改變名字:wx:for-item="" 刪除:newList.shift 固定條目:{{item}}和固定序號:{{index}}
(6)模板:
一種:<include src="templates/header"/>導入帶視圖
一種:<import src="templates/footer"/>
<template is="foot2" data="{{text:importText}}"/>
小結:
(1)在wxml中賦值:{{}},在js中data初始化
(2)在wxml標籤中: 關鍵字=""
(3)在js中事件: 事件名: function (可選參數) { }
(4)在js中獲取數據:this.data.變量名
(5)在js中設置數據: this.setData({變量名:新數據})
"src/jikexueyuan/day02/index"
4,微信小程序事件
事件類型
(1)事件類型:點擊事件:tap,長按事件:longtap,觸摸事件:touchstart touchend touchmove touchcancel,其他 submit input
(2)事件的冒泡:冒泡事件,非冒泡事件
(3)事件綁定:bind 綁定,catch 綁定
(4)事件對象:類型type,時間戳timeStamp,事件源組件target,當前組件currenttarget,觸摸點事touches
5,小案例:快遞查詢
(1)輸入框:<input class='input-order' type='number' bindinput='getInput' placeholder="請輸入訂單號"/>
(2)顯示:<scroll-view scroll-y >
<view wx:for='{{xxx}}'>
</view>
</scroll-view>
(3)請求數據:getExpressInfo: function (nu,callBack) {
wx.request({
url: 'http://apis.baidu.com/kuaidicom/express_api/express_api?muti=0&order=desc&nu='+nu,
method:'GET',
data: {
x: '',
y: ''
},
header: {
// 'content-type': 'application/json',// 默認值
'apikey': '985236102e5c282413267e40b3a049f3'
},
success: function (res) {
// console.log(res.data)
callBack(res.data)
}
})
}
6,生命週期
(1)APP: onLaunch --> onShow, 切換後臺: onHide, 發生錯誤:onError
(2)Page: onLoad --> onShow --> onReady, 切換後臺:onHide,卸載:onUnload
(3)頁面跳轉: 不帶返回: wx.redirectTo({
url: '../login/login',
})
帶參數可返回:wx.navigateTo({
url: 'user?id=1&title=標題',
})
跳回Tab:wx.switchTab({
url: '../user/index',
})
7,flex佈局
(1)
8,相對定位和絕對定位
(1)相對定位:相對自身進行定位,參照物是自己
(2)絕對定位:相對離它最近的一個已定位的父級元素進行定位
9,樣式的屬性
(1)尺寸:width,height
(2)背景:background
(3)邊框:border
(4)邊距:margin,padding
(5)文本:font
10,選擇器
(1)類選擇器:.xxx{}
(2)ID選擇器:#xxx{}
(3)元素選擇器:name{}
(4)包含選擇器:.xxx xx{}
(4)子元素選擇器:.xxx > xx{}
11,滑塊視圖容器
<swiper autoplay='true' interval='2000' indicator-dots='true'>
<block wx:for='{{imgUrls}}'>
<swiper-item>
<image src='{{item}}' bindtap='startDetail'></image>
</swiper-item>
</block>
</swiper>
注:autoplay 是否自動切換; interval 自動切換時間間隔;indicator-dots 是否顯示面板指示點;
12,可滾動視圖區域
<scroll-view scroll-y style='height:250px' bindscrolltoupper='scrollToUpper' bindscrolltolower ='scrollToLower' scroll-top='{{scrollTop}}' scroll-into-view='{{intoView}}'>
<view id="green" class="scroll-view-item bc_green"></view>
<view id="red" class="scroll-view-item bc_red"></view>
<view id="yellow" class="scroll-view-item bc_yellow"></view>
<view id="blue" class="scroll-view-item bc_blue"></view>
</scroll-view>
注:scroll-y 允許縱向滾動;bindscrolltoupper 滾動到頂部/左邊;scroll-top 設置豎向滾動條位置;scroll-into-view 值應爲某子元素id（id不能以數字開頭）;
13,引入js:var http = require("../../../util/http.js")
注:有幾層目錄,../幾個;以引用http.js爲參考,進一層目錄加一個../
14,導航跳轉:wx.navigateTo({
url: "posts/post"
});
注:不能以/xx 開頭,以當前所在的js爲參考,../是跳出一層目錄,/xx是進入一層
15,flex佈局:
博客:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?^%$
/* 設置flex佈局 */
display: flex;
/* 水平-主軸 *//* flex-direction: row *//* 垂直-主軸 */
flex-direction: row;
/* 包裹換行 */
flex-wrap: wrap;
/* 等同於:flex-direction: row;flex-wrap: wrap; */
/* flex-flow: row wrap; */
/* 主軸上對齊: 左對齊flex-start,右對齊flex-end,居中center
左右間距相等space-around,左右對齊中間等分space-between
*/
justify-content: center;
/* 交叉軸對齊: 上對齊flex-start,下對齊flex-end,居中center
填充父高度stretch(子元素無高度),子元素文字一行對齊baseline
*/
align-items: center;
注意，設爲 Flex 佈局以後，子元素的float、clear和vertical-align屬性將失效。
16,導入說明:
js導入:var appconfig = require("../../data/appconfig.js");
xml導入:<import src="read-item/read-item-template.wxml" />
css導入:@import "read-item/read-item-template.wxss";
17,css中的position說明
/*
*當你定義的CSS中有position屬性值爲absolute、relative或fixed，
*用z-index此取值方可生效。
*此屬性參數值越大，則被層疊在最上面。
**/
.read-detail-line {
margin: 0 auto;
height: 1px;
width: 660rpx;
position: relative;
top: -40rpx;
background-color: #eee;
z-index: -99;
}
/*使用絕對佈局: 居中顯示 */
.read-detail-play image {
width: 100rpx;
height: 100rpx;
left: 50%;
margin-left: -50rpx;
position: absolute;
top: 150rpx;
}
18,使用Component組件:
(1)創建:Component({
behaviors: [],
// 數據和屬性值
properties: {},
data: {}, // 私有數據，可用於模版渲染
// 生命週期函數，可以爲函數，或一個在methods段中定義的方法名
attached: function(){},
moved: function(){},
detached: function(){},
// 內部方法建議以下劃線開頭
methods: {}
})
(2)xx.json中使用:"usingComponents": { "read-component": "xx/xx/"}
(3)xx.wxml中引用: <read-component />
19,在CSS中，BOX的Padding屬性:
padding:5px;就是上下左右都爲5；
padding:0px,5px;就是上下爲0，左右爲5；
padding:10px 5px 15px;就是上位10，左右爲5，下爲15；
padding:0px,5px,10px,15px;就是上爲0，右爲5，下爲10，左爲15，
padding的順序是順時針方向的
20,重組數據和打開對象
// 組裝數據格式
var movieSubjects = {};
movieSubjects["inTheaters"]={
categoryTitle: categoryTitle,
movieData:data
};
this.setData(movieSubjects);
//擴展運算符 用...打開指定的key對象
<template is='movieItem' data='{{...inTheaters}}' />
21,綁定數據,必須用小寫!!!
data-movieId='{{id}}' -->movieid
22, ES6模塊字符串(拼接字符串問題)
let a = 123;
console.log(`${a}456`)
console.log(`${this.test()}456`)
23,Promise對象(保存數據狀態,可return,可.then)
//resolve:成功, reject:失敗
const promise = new Promise((resolve,reject)=>{
//1,只有一個返回參數,可以去掉function
//2,只有一行代碼,可以去掉{}
wx.getSystemInfo({
success:(res)=> resolve(res),
fail:(error)=>reject(error)
})
})
//使用.then獲取成功/失敗回調
promise.then(
res=> console.log(res),
err=> console.log(err)
)
24,陰影
box-shadow: 0 0 3px 0 #999;
0 必需。水平陰影的位置
0 必需。垂直陰影的位置
3px 可選。模糊距離。
0 可選。陰影的尺寸。
#999 可選。陰影的顏色。
25,單行文本 省略號
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
26,字體間距
letter-spacing: 3rpx;