每天的學(xué)習(xí)記錄饺藤，可能有的地方寫的不對，因為剛學(xué)流礁，以后發(fā)現(xiàn)錯的話會回來改掉
整體流程 https://developers.weixin.qq.com/miniprogram/dev/framework/config.html
基礎(chǔ)組件 https://developers.weixin.qq.com/miniprogram/dev/component/button.html
樣式可以到這里學(xué)http://www.w3school.com.cn/css/index.asp
http://www.runoob.com/cssref/pr-pos-clip.html
數(shù)據(jù)的操作
https://www.hishop.com.cn/xiaocx/show_36805.html
方法學(xué)習(xí)
簡單的提示
toast 和android的toast一樣涕俗，這里默認1500ms自動消失，也可以調(diào)用hiden消失
默認的icon是success也就是一個對號神帅，設(shè)置為none就只顯示文字了再姑。
wx.showToast({
title: 'login success',
icon:'none'
duration:1000
})
loading 顯示一個loading，需要手動調(diào)用hidden消失
wx.showLoading({
title: '加載中',
})
setTimeout(function(){
wx.hideLoading()
},2000)
modal確認對話款
wx.showModal({
title: 'title',
content: 'content',
success: res => {
if (res.confirm) {
wx.showToast({
title: 'click ok',
})
}else if(res.cancel){
wx.showToast({
title: 'click cancel',
})
}
}
})
actionsheet 列表選擇器
代碼,如果列表數(shù)據(jù)要動態(tài)的找御，那這里引用一個變量即可元镀，你去修改變量這里自然也就變了。
wx.showActionSheet({
itemList: ['老大', '老二', '老三'],
itemColor:"blue",
success:function(res){
wx.showToast({
title: ''+res.tapIndex,
icon:'none'
})
},
fail:function(res){
wx.showToast({
title: 'cancel',
icon:'loading'
})
}
})
效果圖如下
大致瞅下demo的代碼
首先看下目錄結(jié)構(gòu)
從android開發(fā)者的角度來分析
每一個js文件就相當于一個activity霎桅，當然了不太準栖疑，里邊需要一個Page的東西的。
每一個js如果是一個頁面的話滔驶，那么就需要注冊才能用蔽挠，android是在manifest.xml里注冊，那么小程序是在哪里瓜浸？
在app.json里，如下圖,pages標簽下的都是比原。另外window屬性應(yīng)該是設(shè)置的頁面默認的屬性插佛，當然了是設(shè)置標題的主要
{
"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/learn/learn"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "icanseno",
"navigationBarTextStyle":"black"
}
}
app.js 看起來很像我們的application屋群。
.wxml 文件含懊，感覺就像我們android里的布局文件
.wxss文件逝钥，很像是樣式文件狈惫，對控件的屬性進行設(shè)置仪壮。比如設(shè)置寬高处面，位置斤斧，邊距等等
.json文件捂刺，很像我們manifest下每個activity下的配置文件冬殃，比如 label囚痴，theme那些。
頁面跳轉(zhuǎn)
url 后邊跟著跳轉(zhuǎn)頁面的路徑审葬，2個點自然是上一級了
wx.navigateTo({
url: '../learn/learn',
})
設(shè)置點擊事件
bindtap 就是設(shè)置點擊事件的深滚，后邊起個名字奕谭。class就是一個樣式的名字，樣式在wxss里寫
<button bindtap='bindLoginTap' class='button-login'>login</button>
//設(shè)置登陸點擊事件
bindLoginTap:function(){
//隨便干點啥
}
仿照已有的兩個頁面寫一個簡單頁面
learn.wxml文件如下,弄了2個輸入框痴荐，一個按鈕
<view class='container'>
<view class='login-edit'>
<input class='input-phone'></input>
<input class='input-password'></input>
<button bindtap='bindLoginTap' class='button-login'>login</button>
</view>
</view>
learn.wxss文件如下
還沒學(xué)規(guī)則血柳，就仿著寫，看他用的點加class名字生兆，我也這樣寫难捌。
不過這里碰到問題了，不知道距離這種單位咋區(qū)分的鸦难，我看demo里是rpx根吁，可px又啥啥，
.login-edit{
display: flex;
flex-direction:column;
margin: 40rpx;
}
.input-phone{
background: red;
height: 50rpx;
}
.input-password{
background: blue;
height: 60rpx;
margin-top: 20px;//這里20px看上去和60rpx差不多明刷，不知道單位咋算的婴栽，先放著
}
.button-login{
margin-top: 50px;
padding-left: 100px;
padding-right: 100px;
}
本來計劃
https://developers.weixin.qq.com/miniprogram/dev/api/ui.html#wxsettopbartextobject
本來打算先學(xué)這些方法的，不過想想界面咋弄都還不會辈末，還是先去學(xué)咋畫界面吧
先學(xué)這個
https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/file.html#JSON-%E9%85%8D%E7%BD%AE
{{ }} 這樣的表達式
這個和占位符差不多愚争，里邊有個變量，這個變量改變以后這里對應(yīng)的值也就發(fā)生變化了挤聘，如果學(xué)過databinding的話估計好理解一些轰枝。
如下
//wxml文件里有如下的文本
<text class='login-text'>{{logintip}}</text>
//js里，初始化的時候賦值為login
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
logintip:'login'
},
//比如點擊登錄按鈕我們改變這個字段组去，可以看到我們修改了logintip的值以后鞍陨，文本顯示的內(nèi)容自動就修改了
//處理登陸點擊事件
bindLoginTap:function(){
this.setData({
logintip:'點擊登錄了'
})
},
this的使用
上邊的this沒啥問題，可以找到setData方法从隆，可如果我們再套一層诚撵，如下
onPullDownRefresh: function () {
this.setData({
logintip: '登錄'
})
setTimeout(function(){
//在這里用this.setData就不行了，這個this已經(jīng)不是我們要的那個this拉
},2222)
},
有兩種方法键闺，
第一種寿烟，用個臨時變量保存下這個this
onPullDownRefresh: function () {
var temp=this;//賦值給一個臨時變量
setTimeout(function(){
temp.setData({
logintip: '登錄'
})
wx.stopPullDownRefresh()
},2222)
},
第二種,就像lamda表達式吧
onPullDownRefresh: function(){
//這里修改下，function（參數(shù)）改成參數(shù)=》這種辛燥，因為沒有參數(shù)筛武，所以用any代替
setTimeout(any=>{
this.setData({
logintip: '登錄'
})
wx.stopPullDownRefresh()
},2222)
},
頁面下json數(shù)據(jù)的設(shè)置
好像不支持雙斜杠注釋，編譯的時候會一直提示掛了挎塌。徘六。
{
"navigationBarTitleText": "第一個練習(xí)界面",//導(dǎo)航欄標題文字內(nèi)容
"navigationBarBackgroundColor": "#ff0000",//導(dǎo)航欄標題顏色，僅支持 black/white
"navigationBarTextStyle": "white",//導(dǎo)航欄背景顏色
"enablePullDownRefresh": true,//是否開啟下拉刷新
"backgroundColor": "#ffffff",//窗口的背景色
"backgroundTextStyle": "dark",//下拉 loading 的樣式榴都，僅支持 dark/light
"onReachBottomDistance":20,//頁面上拉觸底事件觸發(fā)時距頁面底部距離待锈，單位為px
"disableScroll":true //設(shè)置為 true 則頁面整體不能上下滾動；只在 page.json 中有效
}
//最后兩個屬性沒有提示嘴高，比較坑炉擅，還得手動寫辉懒。 另外上邊是目前所有的頁面的配置屬性了，單獨頁面只能配置window屬性用來覆蓋app.json下的window屬性
app.json的
完整的如下,tabbar不是必須的谍失，還有坑眶俩。
{
"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/learn/learn",
"pages/justtest/test"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "icanseno",
"navigationBarTextStyle":"black"
},
"networkTimeout": {
"request": 20000,
"connectSocket": 20000,
"uploadFile": 20000,
"downloadFile": 20000
},
"debug": true
,
"tabBar": {
"color": "#000000",
"selectedColor":"#ff0000",
"backgroundColor":"#ffffff",
"borderStyle":"black",
"position":"bottom",
"list": [
{
"pagePath": "pages/index/index",
"text": "test",
"iconPath": "res/all.png",
"selectedIconPath": "res/all_select.png"
},
{
"pagePath": "pages/learn/learn",
"text": "first",
"iconPath": "res/set.png",
"selectedIconPath": "res/set_select.png"
}
]
}
}
我看這里有個tabbar，我也加上了快鱼，完事發(fā)現(xiàn)這東西也不顯示啊颠印。而且咋顯示啊，然后就想到了抹竹，小程序的第一個頁面是在哪里設(shè)置的线罕？
就是pages列表下的第一個，誰放到第一個誰就是啟動頁窃判。
那么問題來了tabbar咋辦钞楼？tabbar要顯示成啟動頁，那么它的list下的第一個pagepath就必須和pages列表下的第一個一樣袄琳。
而且發(fā)現(xiàn)询件，tabbar里的這些頁面，無法在通過其他地方進入了唆樊。比如上邊的宛琅，我把learn也放到了tabbar，
其他地方我有個按鈕點擊也跳到learn頁面逗旁，如下嘿辟，結(jié)果沒反應(yīng)，剛學(xué)片效，也不知道對不對红伦，先這樣吧
wx.navigateTo({
url: '../learn/learn',
})
image 以及循環(huán)添加控件
https://developers.weixin.qq.com/miniprogram/dev/component/image.html
默認數(shù)組的當前項的下標變量名為 index，數(shù)組當前項的變量名默認為 item
如果想改名字淀衣，可以這樣寫wx:for-item="itemData" wx:for-index="i"
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/list.html
<view>
<text wx:if="{{isWaiting}}">等待加載數(shù)據(jù)..</text>
<block wx:else>
<image mode='aspectFit' style='width:100px; height:100px;background-color: #ff0000;' src='../../res/all.png'></image>
<view wx:for="{{array}}" wx:for-item="itemData" wx:for-index="i">
<view>{{itemData.index}}</view>
<button>{{itemData.name}}</button>
</view>
</block>
</view>
學(xué)習(xí)下wx:if wx:else 的用法
{{}}占位符色建，在標簽里邊一般得加個雙引號的。
wx:for= 后邊跟個數(shù)組舌缤，wx:for-item= 后邊給循環(huán)的數(shù)據(jù)起個別名，后邊用到
{{itemData.index}}就是根據(jù)上邊的item的名字來獲取數(shù)據(jù)的
我們在js的data數(shù)據(jù)里添加如下的數(shù)組
array:[{
index:0,
name:'大哥'
},
{
index: 1,
name: '二哥'
},
{
index: 2,
name: '三哥'
}
]
wx: 這玩意也不提示某残，用起來不爽
checkbox
默認是選中狀態(tài)国撵，"{{false}}" 這種有效，直接弄個單引號false是無效的玻墅。
<checkbox checked="{{false}}">{{"checkbox"+number}}</checkbox>
<button type="{{ck?'warn':'default'}}"
代碼里動態(tài)修改ck的值介牙，可以改變button的type。
動態(tài)改變數(shù)組里的數(shù)據(jù)
從這里看到的https://blog.csdn.net/JaRiS_jade/article/details/79269233
data: {
array:[{
index:0,
name:'大哥',
check:false
},
{
index: 1,
name: '二哥',
check: false
}
]
}
點擊按鈕修改
雙引號括起來代表變量澳厢，0是數(shù)組索引环础，這里修改的是第一個囚似。
btnclick0: function (res) {
this.setData({
"array[0].check" : true
})
}
第二種寫法,用一個變量保存，不過使用的時候變量要加個中括號代表是變量
btnclick0: function (res) {
var hello = "array[0].check"
this.setData({
[hello]:true
})
}
數(shù)組列表設(shè)置點擊事件
注意data-any (any任意類型) 方法线得，我們這里注入了一個id等于數(shù)據(jù)的index索引饶唤。
下邊弄了2個 data-id 和 data-check
<view bindtap="arrayclick" wx:for="{{array}}" wx:key="index" >
<view>{{item.index}} {{index}}</view>
<button type="{{item.check?'warn':'default'}}" data-id="{{index}}" data-check="{{item.check}}" bindtap='itemclick'>{{item.name}}</button>
</view>
把點擊事件寫到外層也是可以的，如下
<view wx:for="{{array}}" wx:key="index" data-id="{{index}}" data-check="{{item.check}}" bindtap='itemclick'>
<view>{{item.index}} {{index}}</view>
<button type="{{item.check?'warn':'default'}}" >{{item.name}}</button>
</view>
js里這樣寫
//res.currentTarget.dataset保存所有的data-的數(shù)據(jù)
itemclick:function(res){
var id=res.currentTarget.dataset.id
var ck = res.currentTarget.dataset.check
var temp = "array[" + id + "].check"
// var state=this.data.array[id].check
// console.log("change============="+!state)
this.setData({
[temp]:!ck
})
}
單選設(shè)置
原理就是在js里定義一個clickindex的變量保存當前選中的item的index贯钩，完事代碼如下
我這里比較簡單募狂，就修改type， 按鈕默認就是灰色的角雷，warn是紅色的祸穷，注意 ‘warn’單引號，其他效果的話邏輯是一樣的勺三。
<view class="single_choice_views">
<view bindtap="singleclick" wx:for="{{array2}}" wx:key="index" data-id="{{index}}">
<button type="{{item.index==clickindex?'warn':'default'}}">{{item.name}}</button>
</view>
</view>
js代碼
data: {
clickindex:0,
//省略其他 雷滚，點擊按鈕以后修改clickindex為點擊的按鈕的index即可。
singleclick:function(res){
var id=res.currentTarget.dataset.id
this.setData({
clickindex:id
})
}
控件的隱藏和顯示
第一種吗坚，設(shè)置他的display屬性為none祈远，這種的結(jié)果就相當于gone，不占位置
第二種刻蚯，設(shè)置visibility=hidden绊含，這種相當于invisible，只是看不到炊汹，但還占著位置
<button style='visibility:hidden'>preview images</button>
<button style='display:none'>preview images2</button>
動態(tài)改變可以這樣寫躬充，其中state是個數(shù)字，可以是0,1,2
注意讨便，外邊雙引號充甚，里邊單引號
<button style="visibility:{{state==0?'visible':'hidden'}}">preview images</button>
<button style="display:{{state==0?'none':'flex'}}">preview images2</button>
當然了，你也可以使用不同的樣式來處理
<view class="view_stop_hidden{{state!=0?'view_stop_show':''}}">
<button bindtap='tapstoprecord' >stop record</button>
</view>
//或者
<view class="{{state==0?'view_stop_hidden':'view_stop_show'}}"></view>
wxss文件里
.view_stop_hidden{
display: none;
}
.view_stop_show{
display: flex;
}
說一下自己的理解霸褒，感覺wxss里的屬性都可以寫到wxml了伴找，添加到style屬性里即可
比如
style='display:none;visibility:visible;width:100wpx;height:100wpx'
選擇本地圖片
https://developers.weixin.qq.com/miniprogram/dev/api/media-picture.html#wxchooseimageobject
返回一個文件集合
res.tempFilePaths 里邊是文件路徑的數(shù)組
res.tempFiles 返回的是一個File數(shù)組， path是路徑废菱，size是文件大小技矮，
wx.chooseImage({
count: 1, //默認9張
sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有
sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機殊轴，默認二者都有
success: function(res) {
console.log("file===========" + res.tempFilePaths + "===" + res.tempFilePaths.length+"==="+
res.tempFiles[0].path + "====" + res.tempFiles[0].size)
},
})
圖片預(yù)覽
urls里傳一堆網(wǎng)絡(luò)圖片地址衰倦，current傳你默認要顯示哪一張的圖片地址，不傳的話默認就是顯示urls里的第一張圖旁理，圖片可左右滑動
wx.previewImage({
urls: ['https://xxx', 'https://xxx'
],
current: '', // 當前顯示圖片的http鏈接
})
錄音
簡單測試下樊零，2個按鈕，
第一個按鈕點擊開始后孽文，可暫停驻襟，可繼續(xù)夺艰。
操作沒問題，臺式機沒麥克風沉衣，返回錯誤了郁副，沒法測試，等換手機測試再看一下
operateRecorder:fail DevicesNotFoundError
tapstartrecord: function() {
var recorderManager=wx.getRecorderManager()
if(this.data.state==0){
recorderManager.onStart(() => {
console.log('recorder start')
})
recorderManager.onPause(() => {
console.log('recorder pause')
})
recorderManager.onStop((res) => {
console.log('recorder stop', res)
const { tempFilePath } = res
})
recorderManager.onFrameRecorded((res) => {
const { frameBuffer } = res
console.log('frameBuffer.byteLength', frameBuffer.byteLength)
var fs=frameBuffer.byteLength/1024
var show=fs+"K"
if(fs/1024>0){
show=fs/1024+"M"
}
this.setData({
filesize:show
})
})
recorderManager.onError((res)=>{
console.log("onError=================" + res.errMsg)
})
const options = {
duration: 60000,
sampleRate: 44100,
numberOfChannels: 1,
encodeBitRate: 192000,
format: 'mp3',
frameSize: 50
}
recorderManager.start(options)
this.setData({
state:1
})
}else if(this.data.state==1){
recorderManager.pause
this.setData({
state:2
})
}else {
recorderManager.resume
this.setData({
state: 1
})
}
},
tapstoprecord: function() {
if(this.data.state==0){
return
}
var recorderManager = wx.getRecorderManager()
recorderManager.stop
this.setData({
state: 0
})
}
display
看到這個屬性就順道學(xué)習(xí)下
https://blog.csdn.net/u013673799/article/details/70157294
.root_view{
display: flex;
flex-direction: column;
height: 100%;
background-color: #b99a9ab7
}
flex-direction 默認是row也就是水平的厢蒜，column是垂直的霞势，還有2種帶reverse的，就和android里的rtl一樣斑鸦，從右邊或者下邊開始排列愕贡。
flex-wrap 3種可選
nowrap（不換行，默認值）
wrap（換行）
wrap-reverse（與wrap的效果相反）
.view_text{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
display：block
block表示[塊內(nèi)]容器模式巷屿，總是使用新行開始顯示固以，小程序的3個視圖容器（view，srcoll-view嘱巾，swiper）默認值均為display:block
結(jié)果
<view class='root_view'>
<button bindtap='tapchooseimage'>choose image</button>
<button bindtap='tappreviewimage' >preview images</button>
<button bindtap='tapstartrecord'>{{states[state]}}</button>
<view class="view_stop_hidden{{state!=0?'view_stop_show':''}}">
<button bindtap='tapstoprecord' >stop record</button>
<view>錄音文件信息</view>
<text>{{filesize}}</text>
</view>
<view class='view_text'>
<rich-text class='view_text1'>text1</rich-text>
<rich-text class='view_text2'>text2</rich-text>
<rich-text class='view_text3'>text3</rich-text>
</view>
</view>
wxss
.root_view{
display: flex;
flex-direction: column;
height: 100%;
background-color: #b99a9ab7
}
.view_stop_hidden{
display: none;
}
.view_stop_show{
display: block;
}
.view_text1{
background: #ff0000;
width: 100rpx;
height: 50px;
}
flex 憨琳，column的情況下，發(fā)現(xiàn)上邊3個按鈕是居中顯示的旬昭，而且寬度都是wrap的篙螟。
可下邊那個隱藏按鈕顯示出來的 時候?qū)挾仁莔atch_parent的。
分析一下應(yīng)該是display=block的原因
display：block
這種情況下问拘，子控件如果設(shè)置固定寬度遍略，那就顯示固定寬度，如果沒有設(shè)置寬度骤坐，那么默認和屏幕寬度一樣绪杏，另外子view每行就一個，
感覺block一設(shè)置纽绍，子view的有的屬性咋就無效了蕾久。待研究。拌夏。僧著。。障簿。盹愚。。卷谈。。霞篡。世蔗。端逼。。
gravity設(shè)置
align-items: center; justify-items: center;
align和justify的到底是水平還是垂直方向起作用污淋，感覺是和view的flex-direction有關(guān)系的顶滩，
不知道哪里不對，感覺除了center其他都沒效果寸爆。礁鲁。。赁豆。仅醇。。魔种。析二。。节预。
--------------------------------------20180808學(xué)習(xí)----------------------------------------
測試
.view_text{
display: flex;
height: 200px;
flex-direction: column;
align-items: center;//使得水平方向居中
justify-content: center;//使得垂直方向居中
background: #d6a0a0;
}
然后看著不爽叶摄，想把text文字居中，可咋看都不居中啊安拟。搜了好幾個帖子都沒效果蛤吓，最后看到百度一個帖子
text是行內(nèi)元素 不能用text-align,你把text標簽改成view 或者把text設(shè)置display:block.
補充下 因為行內(nèi)元素長度隨內(nèi)容變化，所以他不能讓你在一行的中間糠赦，因為他的長度就是文字長度会傲。
先看下wxml文件,最早都是text，先把最后一個改成view測試
<view class='view_text'>
<rich-text class='view_text1'>text1</rich-text>
<text class='view_text2'>text2</text>
<view class='view_text3'>text3</view>
</view>
wxss代碼
.view_text2{
display: block;
background: #00ff00;
text-align: center;
width: 150rpx;
height: 50px;
}
.view_text3{
display: flex;
flex-direction: column;
background: #2600ff;
align-items: center;
justify-content: center;
width: 150rpx;
height: 50px;
}
結(jié)果如下圖愉棱，只有最后一個可以做到完全居中唆铐，第二個只能做到水平居中。
目前就這樣奔滑，等以后知道咋弄再來修改代碼艾岂。。朋其。
template 模板
上圖的wxml文件中有如下的代碼
<!--右側(cè)有箭頭 -->
<template name="list">
<view class="tui-youjiantou">
<navigator url="{{item.url}}">
<block>
<text>{{item.title}}</text>
</block>
</navigator>
</view>
</template>
下邊的代碼就引用了上邊的模板王浴，另外下邊的代碼里也在自身定義了2個簡單的模板
<import src="../../template/simpletp" />
<template name='test1'>
<view>header test</view>
</template>
<template name='test2'>
<view>{{item}}</view>
</template>
<scroll-view style="height:100%;" scroll-y="true">
<view>
<template is='test1' /> just test
<view wx:for="{{['a','b','c','d']}}">
<template is="test2" data="{{item}}" />
</view>
</view>
<template wx:for="{{days}}" is="list" data="{{item}}"></template>
</scroll-view>
簡單的就是 template標簽后邊跟個name，里邊要寫啥看自己需求了梅猿。
這個可以寫在當前正在用的wxml文件里氓辣，也可以寫在單獨的wxml文件了，別處調(diào)用袱蚓。
還是建議寫到單獨的wxml文件里钞啸，因為模板肯定是多出調(diào)用才叫模板啊架谎。找的時候也方便找。
<template name='test1'>
<view>header test</view>
</template>
一般都這樣弄個文件夾把模板文件寫到里邊渴析，如下圖
引用外部模板的2步
其他地方使用的時候需要import導(dǎo)入箱玷，后邊src跟路徑
<import src="../../template/simpletp" /> 此代碼放在需要模板的wxml文件里。
另外絮吵，如果模板有樣式的話弧烤，那么在引用模板的wxss文件里也需要添加引用
@import "../../template/simpletp.wxss";
使用的時候也簡單，如下template標簽蹬敲，后邊 is跟上模板的name暇昂。如果要傳遞數(shù)據(jù) 用data
模板擁有自己的作用域，只能使用 data 傳入的數(shù)據(jù)以及模版定義文件中定義的 <wxs /> 模塊伴嗡。
<template is="test2" data="{{item}}" />
for循環(huán)的話有2種寫法都可以,可以直接在模板上for循環(huán)急波，也可以在外層for循環(huán)
<view wx:for="{{['a','b','c','d']}}">
<template is="test2" data="{{item}}" />
</view>
<template wx:for="{{days}}" is="list" data="{{item}}"/>
for循環(huán)給模板傳多條數(shù)據(jù)咋辦
我們除了item要傳過去，index也要傳過去咋辦闹究？
data里邊是可以寫key：value的鍵值對的幔崖，多個數(shù)據(jù)逗號隔開，如下渣淤，我們把index和item都傳過去了赏寇。如果你想加其他的也沒問題，再加上一個key：value即可价认。
<template name='test2'>
<view>{{content}}&&{{index}}</view>
</template>
<view wx:for="{{['a','b','c','d']}}">
<template is="test2" data="{{content:item,index:index}}" />
</view>
以前沒注意嗅定，今天測試才發(fā)現(xiàn)，模板里變量的名字用踩，需要和使用模板的地方傳的數(shù)據(jù)的名字一樣渠退。
如下舉例,2個xxx的地方名字要一樣的。
<template name='test2'>
<view>{{xxx}}</view>
</template>
//使用
<template data="{{xxx}}"></template>
模塊
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/01wxs-module.html
每一個 .wxs 文件和 <wxs> 標簽都是一個單獨的模塊
方便測試脐彩，同級目錄下新加個文件test3.wxs
var a="i come from a test wxs file"
var b="bbbb"
var change=function(b){
return b+"...changed"
}
//只有exports的東西其他地方才可以使用,比如上邊的變量b碎乃，外界是找不到的
exports: 通過該屬性，可以對外共享本模塊的私有變量與函數(shù)惠奸。
module.exports={
aaaa:a, //可以改名字
change:change
}
module.exports.message='message.............'
如何使用
<wxs src="test3.wxs" module="mtools"/> //src指向文件路徑梅誓， module 起個名字，下邊用到
{{mtools.aaaa}}
<view>{{mtools.change(mtools.message)}}</view>
也可以直接添加wxs標簽佛南，就寫在wxml文件里
{{mlocal.hello}}
{{mlocal.getsize("yes")}}
<wxs module="mlocal">
var hello = "hello world"
var getsize = function(char) {
return char.length
}
module.exports = {
hello: hello,
getsize: getsize,
}
</wxs>
一個wxs文件可以引用另一個的梗掰，如下使用require方法，參數(shù)傳相對路徑即可
var a="i come from a test wxs file"
var tt=require("other.wxs")
console.log("==============1111"+tt.hello)
module.exports={
aaaa:a,
}
運算符
基礎(chǔ)運算符嗅回，自增及穗，自減，亦或绵载，位運算埂陆，比較苛白，等值
這幾個不知道啥，
var a = 10, b = 20;
// delete 運算
console.log(true === delete a.fake);
// void 運算
console.log(undefined === void a);
// typeof 運算
console.log("number" === typeof a);
參數(shù)
如下焚虱，方法定義的時候function后邊是沒有寫參數(shù)的丸氛，可使用的時候可以傳N個參數(shù)。
var a = function(){
console.log(3 === arguments.length);
console.log(100 === arguments[0]);
console.log(200 === arguments[1]);
console.log(300 === arguments[2]);
};
a(100,200,300);
//這樣也行
var change=function(b){
return b+"...changed"
}
change("aaa",3,4)//只有第一個有用
尺寸單位
rpx（responsive pixel）: 可以根據(jù)屏幕寬度進行自適應(yīng)著摔。規(guī)定屏幕寬為750rpx。如在 iPhone6 上定续，屏幕寬度為375px谍咆，共有750個物理像素，則750rpx = 375px = 750物理像素私股，1rpx = 0.5px = 1物理像素摹察。
樣式導(dǎo)入
/** common.wxss **/
.small-p {
padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
padding:15px;
}
全局樣式與局部樣式
定義在 app.wxss 中的樣式為全局樣式，作用于每一個頁面倡鲸。在 page 的 wxss 文件中定義的樣式為局部樣式供嚎，只作用在對應(yīng)的頁面，并會覆蓋 app.wxss 中相同的選擇器峭状。
-------------------20180809---------------------------------
wxss樣式
微信這文檔太簡單了克滴。完事看下他提供的demo，里邊樣式一堆都看不懂优床。
這種中間帶個空格的也沒看到介紹劝赔。等我研究下。好像多個樣式就是用空格的胆敞。
<view class="flex-item bc_green">1</view>
下劃線和刪除線
text-decoration: underline;
text-decoration:line-through;
scroll-view標簽
https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
測試代碼如下
<view>
<scroll-view scroll-y style='height:200px;' bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-with-animation="{{true}}"
scroll-into-view="{{toview}}" scroll-top="{{scrollTop}}">
垂直滾動着帽，高度200
<view id="text1" style="height:150px; background:#ff0000; color:#ffffff;">text1</view>
<view id="text2" style='height:150px; background:#0000ff; color:#ffffff;'>text2</view>
</scroll-view>
<button bindtap='gotext1' style='margin-top:30px'>go text1</button>
<button bindtap='gobottom'>go bottom</button>
<button bindtap='gotop'>go top</button>
<button bindtap='scroll20'>scrollTop 10</button>
</view>
效果圖如下，圈圈里的就是scroll-view
scroll-into-view 后邊跟一個view的id移层，滾動到哪個view就設(shè)置哪個仍翰；
scroll-y 表示垂直方向移動，對應(yīng)的scroll-x 水平的
scroll-with-animation 滾動的時候是否帶動畫
scroll-top 滾動到某個位置观话，
bindscrolltoupper 監(jiān)聽往上滾動予借，或者往左滾動
bindscrolltolower 監(jiān)聽往下滾動，或者往右滾動
bindscroll 監(jiān)聽滾動
寫在最后匪燕，小程序的文檔就是個坑貨
寫的簡單蕾羊，也不全。結(jié)果想寫個水平的scrollview咋都不行帽驯，只好百度 https://www.cnblogs.com/Anne3/p/7053643.html
找到別人寫的樣式才可以龟再。
<scroll-view scroll-x style="width: 100%;white-space: nowrap;">
<button bindtap='gotext1' class="btn_width" >go text1</button>
<button bindtap='gobottom' class="btn_width">go bottom</button>
<button bindtap='gotop' class="btn_width">go top</button>
<button bindtap='scroll20' class="btn_width">scrollTop 10</button>
</scroll-view>
//樣式
.btn_width{
width: 100px;
display: inline-block;
}
主要的兩點，scrollview需要white-space: nowrap;屬性尼变，要不控件多了自動換行了利凑，沒法滾浆劲，
子控件需要 display: inline-block;
swiper 就是我們常說的banner圖
https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
<swiper indicator-dots="{{true}}" indicator-color='#ff0000' indicator-active-color='#0000ff' autoplay="{{true}}" current='0' interval='5000' vertical="{{false}}" previous-margin='5px' next-margin='5px' display-multiple-items='1' bindchange='swiperchange'>
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" width="355" height="150" />
</swiper-item>
</block>
</swiper>
imgUrls: [
'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
],
swiperchange:function(event){
//source===autoplay or touch
console.log("swiper change======"+event.detail.current+"==============="+event.detail.source)
}
movable-view 可移動的
https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html
<movable-area style="width:100%;" scale-area>
<movable-view direction="all" inertia out-of-bounds scale="{{true}}">
movable view
<view style="width:200px;height:300px;background:#ff0000;color:#ffffff;">place holder</view>
</movable-view>
</movable-area>
icon
progress
<progress percent='30' show-info stroke-width="12" color="#215980" active style='width:100%'/>
checkbox checkbox-group
文檔又是個坑，效果圖是垂直的哀澈，可又不告訴你咋垂直牌借，又得百度搜
https://blog.csdn.net/wangshop_11/article/details/54236745
lable包裹的話用style='display:flex'
下邊這個checkbox標簽里沒有設(shè)置值，相反在前邊弄了個值割按，因為默認的checkbox文字在右邊的膨报，這里是左邊的效果
<view>
<checkbox-group bindchange="checkboxChange">
<label style='display:flex;padding-left:10px' wx:for="{{items}}" wx:key="name">
{{item.value}}
<checkbox style="margin-left:10px" value="{{item.value}}" color='#215980' checked="{{item.checked}}"></checkbox>
</label>
</checkbox-group>
</view>
view包裹的話用style="flex-direction:column;
<checkbox-group bindchange="checkboxChange">
<view style="flex-direction:column;" wx:for="{{items}}">
<checkbox value="{{item.name}}" checked="{{item.checked}}">{{item.value}}</checkbox>
</view>
</checkbox-group>
form表單
<form bindsubmit="formSubmit" bindreset="formReset">
<switch name="switch"/>
<slider name="slider" show-value ></slider>
<input name="desc" placeholder='input some thing'></input>
checkbox
<checkbox-group name="cg-country">
<checkbox value="TA" >thai</checkbox>
<checkbox value="CN" >china</checkbox>
<view>
radio
</view>
</checkbox-group>
<radio-group name="radio-group">
<label><radio value="radio1"/>radio1</label>
<label><radio value="radio2"/>radio2</label>
</radio-group>
<view class="btn-area">
<button formType="submit">Submit</button>
<button formType="reset">Reset</button>
</view>
點擊按鈕結(jié)果：{{show}}
</form>
formSubmit: function (e) {
console.log('form發(fā)生了submit事件，攜帶數(shù)據(jù)為：', e.detail.value)
this.setData({
show: JSON.stringify(e.detail.value)
})
},
formReset: function () {
console.log('form發(fā)生了reset事件')
this.setData({
show: 'reset.........'
})
},
-------------------------20180810----------------------
picker選擇器
1-普通選擇器适荣，就一列mode = selector默認的就是這個
<view>普通選擇器现柠，結(jié)果是：{{array[index]}}</view>
<picker range="{{array}}" value="{{index}}" bindchange='bindPickerChange'>click </picker>
<view>普通選擇器2，結(jié)果是：{{array[index]}}</view>
<picker range="{{objectArray}}" range-key='name' value="{{index}}" bindchange='bindPickerChange'>click </picker>
range 后邊跟一個數(shù)組弛矛，如果數(shù)組里是對象的話够吩，那么需要range-key來指定列表顯示哪個字段
value是要顯示哪個的index
bindchange 事件返回的也是index
如下js
array: ['美國', '中國', '巴西', '日本'],
objectArray: [
{
id: 0,
name: '美國'
},
{
id: 1,
name: '中國'
},
{
id: 2,
name: '巴西'
},
{
id: 3,
name: '日本'
}
],
index: 0,
bindPickerChange: function (e) {
console.log('picker發(fā)送選擇改變，攜帶值為', e.detail.value)
this.setData({
index: e.detail.value
})
},
2~多列選擇器 mode='multiSelector'
<view>多列選擇丈氓，結(jié)果：{{multiArray[0][multiIndex[0]]}}周循，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}</view>
<picker mode='multiSelector' bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">click </picker>
value 是個數(shù)組保存每列的下角標 multiIndex: [0, 0, 0]万俗；
bindchange==value 改變時觸發(fā) change 事件湾笛，event.detail = {value: value}
bindcolumnchange==某一列的值改變時觸發(fā) columnchange 事件，event.detail = {column: column, value: value}闰歪，column 的值表示改變了第幾列（下標從0開始）迄本，value 的值表示變更值的下標
js,上邊wxml里用的是multiArray，如果用objectMultiArray课竣，那么就需要指定range-key=‘name’
multiArray: [['無脊柱動物', '脊柱動物'], ['扁性動物', '線形動物', '環(huán)節(jié)動物', '軟體動物', '節(jié)肢動物'], ['豬肉絳蟲', '吸血蟲']],
objectMultiArray: [
[
{
id: 0,
name: '無脊柱動物'
},
{
id: 1,
name: '脊柱動物'
}
], [
{
id: 0,
name: '扁性動物'
},
{
id: 1,
name: '線形動物'
},
{
id: 2,
name: '環(huán)節(jié)動物'
},
{
id: 3,
name: '軟體動物'
},
{
id: 3,
name: '節(jié)肢動物'
}
], [
{
id: 0,
name: '豬肉絳蟲'
},
{
id: 1,
name: '吸血蟲'
}
]
],
multiIndex: [0, 0, 0],
這個時候數(shù)據(jù)是不完整的嘉赎，如果切換脊椎動物，那么數(shù)據(jù)哪來于樟？看下邊
不過這個列子好像有問題公条，這樣寫，就算點取消那么數(shù)據(jù)也發(fā)生變化了迂曲。
bindMultiPickerChange: function (e) {
console.log('picker發(fā)送選擇改變靶橱，攜帶值為', e.detail.value)
this.setData({
multiIndex: e.detail.value
})
},
bindMultiPickerColumnChange: function (e) {
console.log('修改的列為', e.detail.column, '，值為', e.detail.value);
var data = {
multiArray: this.data.multiArray,
multiIndex: this.data.multiIndex
};
data.multiIndex[e.detail.column] = e.detail.value;
switch (e.detail.column) {
case 0:
switch (data.multiIndex[0]) {
case 0:
data.multiArray[1] = ['扁性動物', '線形動物', '環(huán)節(jié)動物', '軟體動物', '節(jié)肢動物'];
data.multiArray[2] = ['豬肉絳蟲', '吸血蟲'];
break;
case 1:
data.multiArray[1] = ['魚', '兩棲動物', '爬行動物'];
data.multiArray[2] = ['鯽魚', '帶魚'];
break;
}
data.multiIndex[1] = 0;
data.multiIndex[2] = 0;
break;
case 1:
switch (data.multiIndex[0]) {
case 0:
switch (data.multiIndex[1]) {
case 0:
data.multiArray[2] = ['豬肉絳蟲', '吸血蟲'];
break;
case 1:
data.multiArray[2] = ['蛔蟲'];
break;
case 2:
data.multiArray[2] = ['螞蟻', '螞蟥'];
break;
case 3:
data.multiArray[2] = ['河蚌', '蝸牛', '蛞蝓'];
break;
case 4:
data.multiArray[2] = ['昆蟲', '甲殼動物', '蛛形動物', '多足動物'];
break;
}
break;
case 1:
switch (data.multiIndex[1]) {
case 0:
data.multiArray[2] = ['鯽魚', '帶魚'];
break;
case 1:
data.multiArray[2] = ['青蛙', '娃娃魚'];
break;
case 2:
data.multiArray[2] = ['蜥蜴', '龜', '壁虎'];
break;
}
break;
}
data.multiIndex[2] = 0;
console.log(data.multiIndex);
break;
}
this.setData(data);
},
3~時間選擇mode='time'
<view>時間選擇路捧，結(jié)果：{{time}}</view>
<picker mode='time' value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">click </picker>
value 就是一個具體的時間关霸，格式"hh:mm"
start ，end分別限制時間的范圍
bindchange的方法里杰扫，返回的就是具體的時間
bindTimeChange: function (e) {
console.log('picker發(fā)送選擇改變队寇，攜帶值為', e.detail.value)
this.setData({
time: e.detail.value //攜帶值為 21:01
})
},
4~日期選擇 mode='date'
<view>日期選擇，結(jié)果：{{date}}</view>
<picker mode='date' value="{{date}}" start='2015-02-12' end='2018-12-12' bindchange="bindDateChange" >click </picker>
value就是選中的日期 格式就是"YYYY-MM-DD"
bindechange 方法返回的也是具體的日期 章姓，如2016-09-01
年月日是可選的佳遣，如果你只要年识埋，增加屬性fields="year",如果只要年月，那么增加屬性fields="month" 零渐，
默認值是fileds='day' 也就是3個都顯示窒舟。
ps:測試了一下，wx提供的這東西诵盼，對于day并沒有做處理惠豺，它顯示的都是31天，不過比如3月可以選31风宁，你切換到4月耕腾，然后選擇31，它就自動滾回1號了杀糯。模擬器的效果，手機上沒測試不清楚苍苞。
5~區(qū)域的選擇mode='region'
<view>地址選擇固翰，結(jié)果：{{region[0]}}，{{region[1]}}羹呵，{{region[2]}}</view>
<picker mode='region' value="{{region}}" custom-item="{{customItem}}" bindchange="bindRegionChange">click </picker>
value 就是一個數(shù)組 比如骂际，["海南省", "海口市", "秀英區(qū)"]
這個好像微信默認自帶的冈欢，不能設(shè)置數(shù)據(jù)的歉铝，只能設(shè)置默認的選中，
custom-item 就是個string凑耻，可為每一列的頂部添加一個自定義的項太示，比如這個列子就是都加了個 “全部”。
bindchange 事件的結(jié)果 ==value 改變時觸發(fā) change 事件香浩，event.detail = {value: value, code: code, postcode: postcode}类缤，其中字段code是統(tǒng)計用區(qū)劃代碼，postcode是郵政編碼
看下返回的結(jié)果
bindRegionChange: function (e) {
console.log('picker發(fā)送選擇改變邻吭，攜帶值為', e.detail.value+"===="+e.detail.code+"==="+e.detail.postcode)
this.setData({
region: e.detail.value
})
},
log如下
廣西壯族自治區(qū),柳州市,城中區(qū)====450000,450200,450202===545001
picker-view
picker是個彈框餐弱，而這個是嵌入頁面的，也就是說是直接顯示在頁面的控件
用法囱晴，picker-view就是個容器膏蚓，里邊每一個picker-view-column就是一列，有幾列就弄幾個picker-view-column
<view>
picker-view 學(xué)習(xí)
<view>{{year}}年{{month}}月{{day}}日</view>
<picker-view indicator-style='height: 52px;' style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
<picker-view-column>
<view wx:for="{{years}}" style='line-height:52px;padding-left:15px;'>{{item}}年</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{months}}" style='line-height:52px;'>{{item}}月</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{days}}" style='line-height:52px;'>{{item}}日</view>
</picker-view-column>
</picker-view>
</view>
value :數(shù)組畸写，就是默認選中哪個驮瞧，存儲的是每列的索引，從0開始枯芬，比如上邊有3個剧董，【0,0,0】就是默認選中第一個都
indicator-style ：設(shè)置選擇器中間選中框的樣式
indicator-class：設(shè)置選擇器中間選中框的類名幢尚，和上邊一樣，這個指向一個class樣式翅楼，上邊是直接寫而已
mask-style ：設(shè)置蒙層的樣式
mask-class ： 設(shè)置蒙層的類名
上邊幾個需要進一步學(xué)習(xí)尉剩，得研究下style都能設(shè)置啥。
js code
const years = []
const months = []
const days = []
const date = new Date()
for (let i = 1990; i <= date.getFullYear(); i++) {
years.push(i)
}
for (let i = 1; i <= 12; i++) {
months.push(i)
}
for (let i = 1; i <= 31; i++) {
days.push(i)
}
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
year:0,
month:0,
day:0,
value:[5,5,5],
years:years,
months:months,
days:days,
},
bindChange:function(res){
var arr=res.detail.value
this.setData({
year:years[arr[0]],
month:months[arr[1]],
day:days[arr[2]]
})
},
slider學(xué)習(xí) 就是android的seekbar
<view>slider學(xué)習(xí)</view>
默認的啥也不寫的
<slider></slider>
step改為2毅臊，默認值為20理茎，修改背景，選中顏色管嬉，修改滑塊顏色皂林，顯示進度
<slider min='0' max='100' step='2' value='20' backgroundColor='#888888' activeColor='#0000ff' block-size='12' block-color='#00ffff' show-value></slider>
step改為2，默認值為20蚯撩，最小100础倍，最大200，顯示進度
<slider min='100' max='200' step='2' value='20' show-value bindchange='sliderchange'></slider>
</view>
blocksize 12到28胎挎，默認是28的沟启，看起來好大。
activeColor Color #1aad19 已選擇的顏色
backgroundColor Color #e9e9e9 背景條的顏色
show-value Boolean false 是否顯示當前 value
其他屬性看名字就知道了犹菇，不做介紹了德迹。
switch 切換按鈕學(xué)習(xí)
<switch>開關(guān)</switch>
<switch checked type='checkbox' color="#0000ff" bindchange='switchchange'>...</switch>
比較簡單的，默認的也就能改下顏色揭芍，type默認就是switch胳搞，如果改成checkbox，那就真成checbox了称杨。
video
https://developers.weixin.qq.com/miniprogram/dev/component/video.html
如果只是簡單地播放肌毅，不過多操作，給個src 就行姑原，本地地址芽腾，網(wǎng)絡(luò)地址都可以，
本地地址页衙，wx有提供選擇視頻的方法摊滔，
<view class="section tc">
<video src="{{src}}" ></video>
<view class="btn-area">
<button bindtap="bindButtonTap">獲取視頻</button>
</view>
</view>
選擇視頻，api以后再仔細看
bindButtonTap: function () {
var that = this
wx.chooseVideo({
sourceType: ['album', 'camera'],
maxDuration: 60,
camera: ['front', 'back'],
success: function (res) {
that.setData({
src: res.tempFilePath
})
}
})
},
網(wǎng)絡(luò)地址
<video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" danmu-list="{{danmuList}}" enable-danmu danmu-btn controls></video>
<view class="btn-area">
<input bindblur="bindInputBlur"/>
<button bindtap="bindSendDanmu">發(fā)送彈幕</button>
</view>
看下彈幕
danmuList: [
{
text: '第 1s 出現(xiàn)的彈幕',
color: '#ff0000',
time: 1
},
{
text: '第 3s 出現(xiàn)的彈幕',
color: '#ff00ff',
time: 3
}]
onReady: function () {
this.videoContext = wx.createVideoContext('myVideo')
},
//發(fā)送彈幕
bindSendDanmu: function () {
this.videoContext.sendDanmu({
text: this.inputValue,//這個就是個input的值店乐，這里不考慮了
color: getRandomColor()
})
},
測試了一下艰躺，彈幕的time應(yīng)該是秒，表示第幾秒出現(xiàn)眨八。
在sendDanmu方法里腺兴，添加了time貌似沒效果，都是立馬就出現(xiàn)了廉侧。重播的時候彈幕也是在相應(yīng)的時間出現(xiàn)的页响，看來內(nèi)部會自動添加時間的篓足。
map
https://developers.weixin.qq.com/miniprogram/dev/component/map.html#map
屬性太多，用的時候再仔細看吧闰蚕，先放過栈拖。
wx提供的基本組件算是大概看完了，下邊學(xué)習(xí)別的
自定義組件
看了一下没陡，暈乎乎的涩哟。改天再找找有沒有別人寫的，看官方的估計夠嗆盼玄。
之后再研究下api贴彼，瞅了下不少了，一個個試下效果埃儿。今天就先這樣拉器仗。
-------------------------------------20180813----------------
過完周末，今天來測試下童番，弄個水平的滾動條
代碼如下精钮，結(jié)果了，上邊那個顯示的是垂直方向的妓盲，見了鬼了,
兩個的區(qū)別就是上邊的用的for循環(huán)來弄的，其他style都一樣的专普，可下邊的是正常的悯衬，水平方向滾動的，上邊那個死活都是垂直的
<view>
<scroll-view scroll-x style="width: 100%;white-space: nowrap;" wx:for="{{array}}" wx:key='text'>
<button class='btn_width'>{{item.text}}</button>
</scroll-view>
<scroll-view scroll-x style="width: 100%;white-space: nowrap;">
<button bindtap='gotext1' class="btn_width" >go text1</button>
<button bindtap='gobottom' class="btn_width">go bottom</button>
<button bindtap='gotop' class="btn_width">go top</button>
<button bindtap='scroll20' class="btn_width">scrollTop 10</button>
</scroll-view>
</view>
為啥for循環(huán)構(gòu)建的就不行了檀夹，我把for刪了筋粗，然后button復(fù)制了幾個，它是可以的炸渡，那現(xiàn)在問題就是出現(xiàn)在for循環(huán)上了娜亿？
突發(fā)靈感，想著外邊套個block蚌堵，沒想到真的可以
<scroll-view scroll-x style="width: 100%;white-space: nowrap;" >
<block wx:for="{{array}}" wx:key='text'>
<view style="display:inline-block;width:100px;height:150px;margin-left:10px;background:#888">{{item.text}}</view>
</block>
</scroll-view>
學(xué)這玩意感覺還得懂style买决，style不熟，寫起來真費勁吼畏，想水平他就死活是垂直的督赤。
剛測試碰到的問題
也沒看到文檔說movable-area一個頁面只能有一個，我弄了2個泻蚊，結(jié)果第二個蓋到第一個上邊去了骚亿。
如下代碼,首先movable-view的寬度需要根據(jù)子view的個數(shù)來算出來膊夹。
下邊兩種選一種，兩個都寫上去就發(fā)現(xiàn)后邊那個蓋在前邊那個上邊了Ｎ锱纭！然后我繼續(xù)寫才發(fā)現(xiàn)骑脱，不是2個movable-view的問題，是movable-view后邊跟啥view都蓋在它上邊。
開始我還以為只能靠margin來解決了诀拭，后來來靈感了，我把;height:220rpx加上病蛉，發(fā)現(xiàn)沒問題炫加，不會蓋住了
正確的代碼是這樣的<movable-area style="width:auto;height:220rpx">，需要把高度寫上的铺然。而且這個寬度必須是auto的俗孝，你如果寫的固定的，那怕寫個10000px魄健，那么內(nèi)容也滾不出屏幕的赋铝。
<movable-area style="width:auto">
<movable-view style='height:220rpx;width:1120rpx' direction="horizontal" inertia out-of-bounds>
<view style='width:160rpx;height:220rpx;display:inline-block;background-color:#000;float:left'></view>
<view style='width:160rpx;height:220rpx;display:inline-block;background-color:#111;float:left'></view>
<view style='width:160rpx;height:220rpx;display:inline-block;background-color:#222;float:left'></view>
<view style='width:160rpx;height:220rpx;display:inline-block;background-color:#333;float:left'></view>
<view style='width:160rpx;height:220rpx;display:inline-block;background-color:#444;float:left'></view>
<view style='width:160rpx;height:220rpx;display:inline-block;background-color:#555;float:left'></view>
<view style='width:160rpx;height:220rpx;display:inline-block;background-color:#666;float:left'></view>
</movable-view>
</movable-area>
<movable-area style="width:auto;">
<movable-view style='height:220rpx;width:1280rpx;' direction="horizontal" inertia out-of-bounds>
<block wx:for="{{array}}" wx:key='text'>
<button style='width:160rpx;height:220rpx;display:inline-block;background-color:#888;float:left'>{{item.text}}</button>
</block>
</movable-view>
</movable-area>
問題
今天看到別人獲取點擊事件的參數(shù)的時候是這樣寫的
event.target.dataset.id
我只知道有下邊這種
event.currentTarget.dataset.id
我打印了下2個結(jié)果是一樣的，誰知道這兩個有啥區(qū)別沽瘦？
style 和class同時存在革骨，哪個生效？
測試了一下析恋，如果兩者里邊的屬性不一樣的話良哲，好像都生效了，如果有一樣的屬性的話助隧，那么style的級別高點筑凫。
hover-class
不知道這東西干啥的，今天搜了下并村，說是設(shè)置點擊效果的巍实，貌似還只支持view，button哩牍，navigator.
感覺就是根據(jù)觸摸來動態(tài)修改背景顏色的棚潦。 如果你class或者style里也設(shè)置了background，那么這玩意就無效了膝昆。
<view hover-class='green'>測試hover class</view>
.green{
background: green
}
先學(xué)點樣式
不學(xué)樣式感覺展示點東西都費勁丸边，都只能默認的從上到下。
https://www.cnblogs.com/liujun1128/p/7767123.html
copy點代碼
微信小程序的布局css樣式
width: fit-content;
font-size:20px; /設(shè)置文字字號/
color:red; /設(shè)置文字顏色/
font-weight:bold; /設(shè)置字體加粗/
border:1px solid red;/添加邊框樣式（粗細為1px荚孵， 顏色為紅色的實線）/
font-family:"宋體"; /設(shè)置字體為宋體/
font-style:italic; /文字排版--斜體/
text-decoration:underline; /文字排版--下劃線/
text-decoration:line-through;/文字排版--刪除線/
text-indent:2em; /段落排版--縮進/
line-height:1.5em; /段落排版--行間距（行高）/
letter-spacing:50px; /段落排版--中文字間距/
word-spacing:50px; /字母間距/
text-align:center; right ; left ; /段落排版--對齊/
display:inline-flex; /將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示/
display:block; /設(shè)置為塊狀元素/
display:inline; /設(shè)置為內(nèi)聯(lián)元素/
display:inline-block; /設(shè)置為內(nèi)聯(lián)塊狀元素/
word-break:keep-all; /* 不換行 /
white-space:nowrap; / 不換行 /
vertical-align:middle; /把此元素放置在父元素的中部原环。*/
border-style（邊框樣式）常見樣式有： （border-color,border-width） 邊框相關(guān)設(shè)置
dashed（虛線）| dotted（點線）| solid（實線）。
border-bottom border-top border-right border-left 上下左右線單獨設(shè)置
box-sizing: border-box; //當使用padding的時候不影響大小
padding-top padding-right padding-bottom padding-left
margin-top margin-right margin-bottom margin-left (margin:10px 10px 10px 10px; top处窥、right嘱吗、bottom、left)
下邊是代碼，看下效果
<view hover-class='green' class='text-test'>測試hover class 順道測試點樣式之類的</view>
.text-test{
width: fit-content;
font-size:20px; /*設(shè)置文字字號*/
color:red; /*設(shè)置文字顏色*/
font-weight:bold; /*設(shè)置字體加粗*/
border:1px dashed red;/*添加邊框樣式（粗細為1px谒麦， 顏色為紅色的實線）*/
font-family:"宋體"; /*設(shè)置字體為宋體*/
font-style:italic; /*文字排版--斜體*/
text-decoration:underline; /*文字排版--下劃線*/
text-indent:2em; /*段落排版--縮進*/
line-height:1.5em; /*段落排版--行間距（行高）*/
letter-spacing:1px; /*段落排版--中文字間距*/
word-spacing:30px; /*字母間距*/
text-align:right; /*段落排版--對齊 center right ; left ;*/
}
text-align:center;的作用俄讹，一個left，一個center 效果
border:1px dashed red;/添加邊框樣式（粗細為1px绕德， 顏色為紅色的實線）/
中間的dashed 可以修改dashed（虛線）| dotted（點線）| solid（實線）
也可以單獨的設(shè)置,級別比border高患膛，會覆蓋上邊border的設(shè)置
border-color: #0000ff;
border-width: 3px;
border-radius: 10px;
border-radius: 50%; 試了一下，貌似取的是寬高的50%耻蛇，直接成了橢圓了
border-style：這個是邊框的樣式踪蹬，上邊的虛線，實線臣咖，點線都算跃捣。
border
搜了下樣式，效果是這樣的
p.dotted {border-style: dotted}
p.dashed {border-style: dashed}
p.solid {border-style: solid}
p.double {border-style: double}
p.groove {border-style: groove} //凹槽夺蛇，壓線
p.ridge {border-style: ridge}//脊線
p.inset {border-style: inset}
p.outset {border-style: outset}
效果圖
letter-spacing:1px; 這個是文字之間的距離疚漆，比如‘測試’這兩個字的之間的間隔
word-spacing:30px; 單詞之間的距離了吧，單詞和單詞之間刁赦，單詞和漢字之間的距離娶聘。
display:inline-flex
<view wx:for="{{array}}" wx:key="text" class='row_show'>
<text style="width:200rpx" class="tab-text-margin {{tabIndex==index?'tab-text-selected':''}}" catchtap='tapClick' data-id="{{index}}">{{item.text}}</text>
</view>
display:inline
發(fā)現(xiàn)最后一個777不見了
display:inline-block
777出來了
display:block
感覺這個就是默認的效果，也就是一行顯示一個
----------------------------20180814-----------------------
單位rem
看別人代碼甚脉，發(fā)現(xiàn)用的這個單位丸升，不知道啥玩意，查一下
https://www.cnblogs.com/wxcbg/p/5908967.html
rem（font size of the root element）是指相對于根元素的字體大小的單位牺氨。簡單的說它就是一個相對單位狡耻。看到rem大家一定會想起em單位波闹，em（font size of the element）是指相對于父元素的字體大小的單位酝豪。它們之間其實很相似涛碑，只不過一個計算的規(guī)則是依賴根元素一個是依賴父元素計算精堕。
突然發(fā)現(xiàn)不會樣式，想弄一個布局出來都不會蒲障，比如android里的相對布局歹篓，幀布局，小程序咋實現(xiàn)的啊揉阎，我想讓一個view在另一個view的下邊庄撮，不會。
先不學(xué)這個了毙籽。先把api簡單看一遍洞斯，然后找個demo去研究，之后再仔細學(xué)樣式吧
頁面數(shù)據(jù)傳遞
傳遞數(shù)據(jù)都是弄成基本類型，完事傳過去
比如下邊的ci是個字符串烙如，或者數(shù)字等么抗，可以直接寫。
如果是個對象亚铁，或者數(shù)組蝇刀，那么里用JSON.stringify轉(zhuǎn)化為字符串。
就和網(wǎng)絡(luò)請求傳參數(shù)一樣徘溢？key=value&key2=value2
wx.navigateTo({
url: '../day09-2/day09-2?index=' + ci + '&trees=' + JSON.stringify(對象或者數(shù)組都行),
})
接收的頁面在onLoad里就能拿到
onLoad: function (options) {
that=this;
var trees=JSON.parse(options.trees)
var index=options.index
}
使用的時候發(fā)現(xiàn)坑啦吞琐。傳數(shù)據(jù)的時候有時候就出問題了。齊了怪了然爆，后來把數(shù)據(jù)打印了一下站粟，才發(fā)現(xiàn)
如下圖，我傳了一個對象過去施蜜，而這個對象字符串里是有 & 這個字符的卒蘸，結(jié)果被小程序從這里分開了，后邊的數(shù)據(jù)當成另外的key value了翻默，所以到下個頁面解析就掛了缸沃。
這種轉(zhuǎn)換字符串的方法不行，那咋辦了修械？
1~ 弄個全局變量趾牧，在app的globalData里添加一個字段，把數(shù)據(jù)傳進去肯污，下個頁面再取
2~ 使用緩存
https://developers.weixin.qq.com/miniprogram/dev/api/data.html#wxremovestoragesynckey
比如跳轉(zhuǎn)前把數(shù)據(jù)存起來
wx.setStorageSync("tree", 對象或者數(shù)組都行)
跳轉(zhuǎn)后的頁面這樣取
var trees=wx.getStorageSync("tree")
刪除數(shù)據(jù)
wx.removeStorage({
key: 'tree',
success: function(res) {},
})
3~從頁面a跳轉(zhuǎn)到頁面b翘单，那么頁面b咋獲取或者修改頁面a的數(shù)據(jù)？
頁面a有如下數(shù)據(jù)
data: {
colors:[
"#4DCCF6", "#FF9999", "#999933", "#009999", "#FF9900", "#009999"
],
}
下邊是頁面b的代碼
var pages=getCurrentPages()
var prePage=pages[pages.length-2]
var colors=prePage.data.colors //獲取
console.log("test============"+JSON.stringify(colors))
prePage.setData({
//修改
})
可以看到蹦渣，通過getCurrentPages（）可以獲取到當前所有的頁面哄芜，根據(jù)索引可以獲取到上個頁面，拿到page以后柬唯，想干啥都行啦认臊。
使用cookie登陸
小程序咋用cookie，百度了好多帖子锄奢，都在講一些沒用的失晴，看完了，都不知道咋下手拘央，還好找到下邊這帖子涂屁，簡單粗暴，獲取cookie灰伟，使用cookie拆又，完事。
https://blog.csdn.net/DylanCat/article/details/78186427
情況說明
我們這的測試接口，cookie是在登陸返回的
我們知道wx.request的success方法的參數(shù)是有3個
data >>>>Object/String/ArrayBuffer>>>> 開發(fā)者服務(wù)器返回的數(shù)據(jù)
statusCode>>>>Number >>>>開發(fā)者服務(wù)器返回的 HTTP 狀態(tài)碼
header>>我們的cookie就在header里帖族，如下所示,就是header的內(nèi)容
{
"Server":"Apache-Coyote/1.1",
"Set-Cookie":"JSESSIONID=E765E28A5187699FCC2ABB363A53FDA5; Path=/; HttpOnly,loginUserName=111111111111; Expires=Sat, 15-Sep-2018 08:38:24 GMT; Path=/,loginUserPassword=xxxxx; Expires=Sat, 15-Sep-2018 08:38:24 GMT; Path=/,token_pass=4d140275ca869afde23c48d577d47065; Expires=Sat, 15-Sep-2018 08:38:24 GMT; Path=/",
"Content-Type":"application/json;charset=UTF-8",
"Date":"Thu, 16 Aug 2018 08:38:24 GMT",
"X-Cache":"MISS from SD-Endian5.magellangps.com",
"X-Cache-Lookup":"MISS from SD-Endian5.magellangps.com:8080",
"Transfer-Encoding":"chunked",
"Via":"1.1 SD-Endian5.magellangps.com (squid/3.4.14)",
"Connection":"keep-alive"
}
請求成功以后把cookie保存 "cookieKey" 保存的key义矛，名字自己起。
wx.request({
url:'https://.............',
method:'POST',
success: function (res) {
wx.setStorageSync("cookieKey", res.header["Set-Cookie"])
}
})
然后在需要cookie的接口上使用
var header = {
'content-type': 'application/x-www-form-urlencoded',
'cookie': wx.getStorageSync("cookieKey")//讀取cookie
};
wx.request({
url: 'test.php', //僅為示例盟萨，并非真實的接口地址
header:header ,
success: function(res) {
console.log(res.data)
}
})
字符串的一些操作
上邊的cookie要拿到里邊的過期時間凉翻，不知道咋弄，只好按照java的代碼來操作
發(fā)現(xiàn)split方法可用捻激，trim方法可用制轰，
另外搜了下，這里還有別的用法可以看看
https://blog.csdn.net/qq_23833037/article/details/79294190
if(header!=null){
var arr=header.split(';')
for(var i=0;i<arr.length;i++){
var kv=arr[i].trim()
console.log("kv=========="+kv)
if (kv.startsWith("Expires")){
var value=kv.substring(8)
console.log("value==========" + value)
if(Date.now()<Date.parse(value)){
return
}
}
}
}
時間的操作
Date.now() 返回當前時間 ms 13位
Date.parse("Sat, 15-Sep-2018 08:38:24 GMT") 解析后返回的也是13位的ms
另外我們utils下默認有個時間格式化的胞谭，可以參考
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
上邊return的東西簡單說下垃杖，[year, month, day] 造了個數(shù)組，沒啥說的丈屹，后邊跟個map方法调俘，這學(xué)過rx或者kotlin的應(yīng)該知道吧，這就是對原始數(shù)據(jù)的一個轉(zhuǎn)換旺垒，轉(zhuǎn)換完還是個數(shù)組彩库，不過成了字符串數(shù)組了。
然后 數(shù)組.join 方法先蒋，上邊字符串操作的那個外部文章有講到 骇钦，就是把數(shù)組里的東西用join后邊的字符連接起來
，比如【a,b,c】.join('/') 結(jié)果就是 a/b/c
new Date().toLocaleTimeString()
new Date().toLocaleDateString()
new Date().toLocaleString())
上邊3個方法返回的結(jié)果如下：
下午5:35:22=======2018/8/16========2018/8/16 下午5:35:22
flex 繼續(xù)研究
http://www.reibang.com/p/2212146c0f57
http://www.runoob.com/w3cnote/flex-grammar.html
研究下justify-content
space-between
.item-rect{
width: 100rpx;
height: 100rpx;
color: #00f;
background: #888;
}
.layout{
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex-flow: row wrap;
justify-content: space-between;
height: 400rpx;
border: 1px solid red;
}
看效果圖竞漾，首先左右兩邊一邊一個眯搭，完事剩下的平分多余的空間
space-around
justify-content: space-around;
看效果圖，就是大家平分所有的多余空間业岁，換句話說鳞仙，大家左右兩邊的margin是一樣的。
flex-start flex-end center
這個3個笔时，左邊棍好，右邊，中間就沒啥說的了
垂直方向align-items: flex-start;
效果就是上圖
垂直方向align-items: flex-end;
.item-rect{
width: 100rpx;
height: 100rpx;
color: #00f;
background: #888;
}
.layout{
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex-flow: row wrap;
justify-content: space-around;
height: 400rpx;
border: 1px solid red;
align-items: flex-end;
}
align-items: center;
我們上邊這些圖糊闽，都是2行梳玫，也就是有2個主軸線的爹梁，這個時候align-content才起作用
align-content: center;
.item-rect{
width: 100rpx;
height: 100rpx;
color: #00f;
background: #888;
}
.layout{
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex-flow: row wrap;
justify-content: space-around;
height: 400rpx;
border: 1px solid red;
align-items: center;
align-content: center;
}
多行的時候align-content生效
單行的話align-items生效
如下,看圖右犹，flex-start生效中
.layout{
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex-flow: row wrap;
justify-content: center;
height: 400rpx;
border: 1px solid red;
align-items: flex-end;
align-content: flex-start;
}
上邊都是容器的介紹，下邊介紹項目的屬相
測試了下咋都沒效果姚垃。念链。再說
https://www.w3cschool.cn/weixinapp/route.html
使用flex布局的容器，子元素的float、clear和vertical-align屬性將不起作用掂墓。
display屬性
http://www.w3school.com.cn/cssref/pr_class_display.asp
數(shù)組添加數(shù)據(jù)
lists.concat(lists)
居左居右顯示
要實現(xiàn)下圖的效果谦纱，取消收藏的文字在右邊居中，其他部分在左邊
樣式只會簡單的flex君编，也沒有android的相對布局跨嘉，幀布局，約束布局等吃嘿，弄個稍微復(fù)雜點的布局還挺費勁
我的思路祠乃，左邊為一部分，右邊為一部分兑燥，完事外層容器flex-direction=row 默認的水平顯示
justify-contents=space-between 剛好左右一邊一個亮瓷，垂直方向就是align-items=center
完整的如下2個
.item-style{
border-width: 1px;
border-color: rgb(226, 219, 219);
border-style: solid;
margin-top: 20rpx;
margin-left: 1rpx;
margin-right: 2rpx;
font-size: 13px;
padding: 10rpx;
}
.item-h{
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: center;
align-items: center;
}
不過弄完會發(fā)現(xiàn)右邊的文字有時候會換行，所以設(shè)置了下邊屬性,nowrap禁止換行
.cancelLove{
display: block;
color: rgb(216, 191, 191);
white-space: nowrap;
padding: 10rpx;
}
節(jié)點信息獲取
要寫個懸浮條降瞳，需要知道頂部控件的高度嘱支。所以來研究下如何獲取控件的信息
https://developers.weixin.qq.com/miniprogram/dev/api/wxml-nodes-info.html#wxcreateselectorquery
wx.createSelectorQuery().select('#topview').boundingClientRect(function (res){
console.log("width/height==="+res.width+"="+res.height+"==="+res.bottom+"=="+res.top)
that.setData({
top:res.height
})
}).exec();
onPageScroll:function(event){
var top = event.scrollTop//監(jiān)聽滾動的距離
// console.log("scroll=================="+top)
var fix=top>this.data.top
if(fix!=this.data.fiexed){
this.setData({
fiexed:fix
})
}
},
wx.createSelectorQuery()
返回一個SelectorQuery對象實例≌跫ⅲ可以在這個實例上使用select等方法選擇節(jié)點除师，并使用boundingClientRect等方法選擇需要查詢的信息。
示例代碼：
Page({
queryMultipleNodes: function(){
var query = wx.createSelectorQuery()
query.select('#the-id').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function(res){
res[0].top // #the-id節(jié)點的上邊界坐標
res[1].scrollTop // 顯示區(qū)域的豎直滾動位置
})
}
})
selectorQuery.select(selector)
在當前頁面下選擇第一個匹配選擇器selector的節(jié)點扔枫，返回一個NodesRef對象實例馍盟，可以用于獲取節(jié)點信息。
selector類似于CSS的選擇器茧吊，但僅支持下列語法贞岭。
ID選擇器：#the-id
class選擇器（可以連續(xù)指定多個）：.a-class.another-class
子元素選擇器：.the-parent > .the-child
后代選擇器：.the-ancestor .the-descendant
跨自定義組件的后代選擇器：.the-ancestor >>> .the-descendant
多選擇器的并集：#a-node, .some-other-nodes
selectorQuery.selectViewport()
選擇顯示區(qū)域，可用于獲取顯示區(qū)域的尺寸搓侄、滾動位置等信息瞄桨，返回一個NodesRef對象實例。
要讓一個節(jié)點懸浮在頂部的方法如下圖
position: fixed; 可以懸浮讶踪，可懸浮的時候位置是距離頂部有 一定距離的芯侥，所以需要top=0來處理，還得加上z-order的屬性乳讥，不能在一個層級上了柱查，層級得高點，弄個比1大的就行云石，這樣能保證滾動的時候其他view在它的下邊唉工。
----------------這幾天有事，都沒學(xué)小程序了汹忠，今天抽空繼續(xù)學(xué)一點----------
今天學(xué)習(xí)下position淋硝，主要是前幾天雹熬，也就是上邊學(xué)的懸浮，看到有position=fixed谣膳，想了解下所有的position
position
http://www.w3school.com.cn/cssref/pr_class_position.asp
看完終于知道咋寫android里的相對布局或者幀布局之類的竿报，就是想要一個控件在另一個控件的上邊，如下這種banner继谚，圖片上邊有文字
<swiper indicator-dots indicator-active-color='#0000ff' autoplay>
<block wx:for="{{banners}}" wx:key='id'>
<swiper-item>
<view>
<image class='banner-image' mode='widthFix' src="{{item.imagePath}}"></image>
<text class='banner-text'>{{item.title}}11</text>
</view>
</swiper-item>
</block>
</swiper>
以前不會寫烈菌，就寫了個banner-image的樣式【文字不顯示，不知道跑哪去了】花履，今天把banner-text的加上僧界，終于可以顯示文字拉~~~~~~~~
z-index
圖層的順序，默認都是0臭挽，也就是同一級別的捂襟，現(xiàn)在text的改為1，自然就跑到圖片上邊去了欢峰，或者你把image的改成-1葬荷，也可以。
position：abusolute 在父元素內(nèi)部
絕對布局纽帖，感覺就是android里的相對布局宠漩，完事通過left,rigth,top,bottom來確定位置。
這個left,top 需要2個來確定位置懊直，也就是4個頂點扒吁，你寫一個好像沒效果。
如果view的高度沒有設(shè)置室囊，而你top=0雕崩，bottom=0.那么view會拉伸的和父元素一樣高。
比如你top=0融撞，bottom=0盼铁，而view自身高度設(shè)置了，那么bottom是無效的尝偎，優(yōu)先top饶火。
.banner-image{
width: 100%;
}
.banner-text{
width: 100%;
position: absolute;
bottom: 0px;
left: 0px;
z-index: 1;
background: #444400;
color: #fff;
font-size: 13px;
}
abusolute還有個額外的屬性clip,后邊跟一個rect (top, right, bottom, left) 裁剪區(qū)域，這個區(qū)域里的東西是可見的,裁剪區(qū)域rect的值致扯，是對view本身的左上頂點開始算的肤寝。看下效果圖就知道了
.test{
position: absolute;
top: 40px;
background: #00ff00;
width: 100px;
height: 40px;
clip: rect(0px,50px,40px,0px)
}
position:relative 相對自己原本位置的
css里的相對位置抖僵，和android是不太一樣的鲤看，這個玩意好像是相對自己原本的位置來說的。
原本就是默認的顯示在左側(cè)的裆针，現(xiàn)在往右邊移動了50px;
left 正的刨摩，往右邊移動，負的世吨，往左邊移動澡刹。相對于view原本左邊的位置
right，正的耘婚，往左邊移動罢浇，負的，往右邊移動沐祷，相對于view原本右邊的位置
.test{
position: relative;
left: 50px;
background: #00ff00;
width: 100px;
}
弄了個圖嚷闭，黑框就是view原本的位置，然后中間4個箭頭方向的用正的赖临，往外4個箭頭方向的就是負的胞锰。
position:fixed 相對應(yīng)該說是整個頁面的吧
同樣通過 "left", "top", "right" 以及 "bottom" 來對位置進行處理，可以顯示在上邊兢榨，下邊嗅榕，左邊，右邊吵聪。
position:sticky
粘性定位凌那，該定位基于用戶滾動的位置。
它的行為就像 position:relative; 而當頁面滾動超出目標區(qū)域時吟逝，它的表現(xiàn)就像 position:fixed;帽蝶，它會固定在目標位置。
注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位块攒。 Safari 需要使用 -webkit- prefix (查看以下實例)励稳。
效果圖
測試代碼如下,需要注意，需要設(shè)置left囱井，top之類的屬性麦锯，因為相當于fixed的時候你得確定它到底該顯示在屏幕的哪個邊上。
剛測試了下琅绅，繼續(xù)網(wǎng)上滾扶欣，還能時不時的看到這個view蹦出來，不知道z-index是不是出問題拉千扶。
.test{
position: sticky;
left: 0px;
top: 0px;
background: #00ff00;
width: 100px;
height: 80px;
}
如何居中顯示料祠？
https://blog.csdn.net/hs12341234/article/details/47148653
下邊的是居右，垂直方向居中澎羞。
.love-style{
width: 20px;
height: 20px;
position: absolute;
right: 10px;
bottom: 0px;
top: 0px;
margin: auto;
}
居中涌穆，需要注意margin：auto是必須的，要不無效額匣椰。如果左右也要居中，那把left：0加上即可枫攀。
第二種寫法,只演示上下垂直，左右一個道理
top:50%,使得元素的top在父容器的中心株茶，完事通過transform来涨，移動-50%,往上移動，這樣元素中心就在父容器中心拉启盛。
.love-style{
width: 20px;
height: 20px;
right: 10px;
position: absolute;
bottom: 10px;
top: 50%;
transform: translate(0,-50%);
/* transform: translateY(-50%); 這樣寫也可以*/
}
第三種蹦掐，和上邊差不多，不過把transform改成
margin-top: -10px; 即可僵闯，也是相當于往上移動了自身的一半
日常問題
<view>
<view class='root' wx:for="{{dirs}}" wx:key="dir" bindtap="navigation" data-dir="{{item.dir}}">
<button>{{item.dir}}</button>
</view>
<text class=' line_after'>juest test.......1</text>
<text class='line_bottom'>juest test.......2</text>
</view>
如上wxml文件卧抗，跟view啥也沒樣式也沒有,完事root樣式里設(shè)置了display，結(jié)果發(fā)現(xiàn)后邊2 個text的效果跟隨了root的設(shè)置鳖粟。下圖這樣子社裆，不是我們要的效果。
如果要text換一行向图，不和上邊的button擠在一起浦马，那么就如下代碼里，打開注釋的地方张漂，給text添加一個display即可晶默。
.line_after{
text-decoration:line-through;
/* display: flex; */
}
.line_bottom{
text-decoration: underline;
}
.root{
display: inline-flex;
flex-wrap: wrap;
flex-direction: row;
padding: 5px;
}
button{
margin: 5px;
}
垂直方向有2個scroll-view
scroll-view垂直滾動，必須設(shè)置固定高度航攒。
<scroll-view class="left-view" scroll-y scroll-with-animation scroll-into-view="{{current}}" style="height:{{vheight}}px;">
使用style="height:{{vheight}}px;" 磺陡，然后在代碼里獲取屏幕的可用高度，代碼需要注意加上px漠畜，要不沒效果
wx.getSystemInfo({
success: function(res) {
that.setData({
vheight: res.windowHeight,
})
console.log("=========="+res.screenHeight+"=="+res.statusBarHeight+"=="+res.windowHeight)
},
})
具體看這里
https://developers.weixin.qq.com/miniprogram/dev/api/systeminfo.html#wxgetsysteminfoobject
| 參數(shù) | 說明 | 最低版本 |
|---|---|---|
| brand | 手機品牌 | 1.5.0 |
| model | 手機型號 | |
| pixelRatio | 設(shè)備像素比 | |
| screenWidth | 屏幕寬度 | 1.1.0 |
| screenHeight | 屏幕高度 | 1.1.0 |
| windowWidth | 可使用窗口寬度 | |
| windowHeight | 可使用窗口高度 | |
| statusBarHeight | 狀態(tài)欄的高度 | 1.9.0 |
| language | 微信設(shè)置的語言 | |
| version | 微信版本號 | |
| system | 操作系統(tǒng)版本 | |
| platform | 客戶端平臺 | |
| fontSizeSetting | 用戶字體大小設(shè)置币他。以“我-設(shè)置-通用-字體大小”中的設(shè)置為準，單位：px | 1.5.0 |
| SDKVersion | 客戶端基礎(chǔ)庫版本 |
單位的換算
https://www.cnblogs.com/helena000/p/5989077.html
rpx單位是微信小程序中css的尺寸單位憔狞，rpx可以根據(jù)屏幕寬度進行自適應(yīng)蝴悉。
規(guī)定屏幕寬為750rpx。如在 iPhone6 上瘾敢，屏幕寬度為375px拍冠，共有750個物理像素，則750rpx = 375px = 750物理像素簇抵，1rpx = 0.5px
設(shè)備 rpx換算px (屏幕寬度/750) px換算rpx (750/屏幕寬度)
iPhone5 1rpx = 0.42px 1px = 2.34px
iPhone6 1rpx = 0.5px 1px = 2rpx
iPhone6s 1rpx = 0.552px 1px = 1.81rpx
微信小程序也支持rem尺寸單位庆杜，rem和rpx的換算關(guān)系：rem: 規(guī)定屏幕寬度為20rem；1rem = (750/20)rpx =37.5rpx;
vw碟摆、vh適配
vw和vh是css3中的新單位晃财，是一種視窗單位，在小程序中也同樣適用典蜕。
小程序中断盛，窗口寬度固定為100vw罗洗，將窗口寬度平均分成100份，1份是1vw
小程序中钢猛，窗口高度固定為100vh 伙菜，將窗口高度平均分成100份，1份是1vh
日常問題
view a里包含另外一個view b厢洞，然后給a弄了個border仇让，然后view b的position是abusolute典奉，left=0躺翻，這時候會發(fā)現(xiàn)border左邊的線不見了。卫玖。其實是被view b給蓋住了公你，讓b的left不為0即可
hover-class
指定按下去的樣式類。當 hover-class="none" 時假瞬，沒有點擊態(tài)效果
支持 hover-class 屬性的組件有三個：view陕靠、button、navigator
這個在button的情況下脱茉，很容易是無效的剪芥。
當button的type不是deault ，plain為 true的時候琴许，設(shè)置hover-class是無效的税肪。
今天敲代碼的時候，咋弄都沒有效果榜田，弄的我好迷糊益兄，如下圖圈中的部分，我開始寫的時候單詞是對的箭券，可它沒有那個顏色的提示框净捅，這時候顏色應(yīng)該是不識別的，可也不報錯辩块，我就說咋一直沒效果蛔六。希望不要和我一樣。废亭。
worker學(xué)習(xí)
這文檔看完古今，實例看完，感覺和沒看差不多滔以。
https://developers.weixin.qq.com/miniprogram/dev/api/createWorker.html
首先app.json里添加workers的支持 "workers":"worker", 指定一個目錄
然后就寫一個worker的js文件
如下test.js ,延遲4秒后告訴ui捉腥，我干完活了。
setTimeout(any=>{
worker.postMessage({
msg: '工作結(jié)束',
})
},4444)
page頁面的代碼
//以我現(xiàn)在測試的結(jié)果你画，感覺wx.createWorker方法運行以后就會立馬執(zhí)行test.js里的代碼了抵碟，我剛開始把這弄到page外邊全局變量的桃漾，test.js也沒有延遲，然后就發(fā)現(xiàn)拟逮，我下邊的onMessage啥也接收不到撬统。
不知道worker創(chuàng)建完，我要給它傳參數(shù)咋傳敦迄？百度沒找到恋追，文檔沒看懂。 demo我試了罚屋，我發(fā)現(xiàn)打印的日志也就和我這里的差不多苦囱，其他也都沒打印。
我現(xiàn)在的理解
我感覺workers的js代碼里只能postMessage,而page里的代碼只能onMessage接收消息脾猛。
var worker = wx.createWorker('worker/request/test.js')
console.log("click====="+event.currentTarget.dataset.str)
worker.onMessage(function (res) {
console.log("onMessage========",res)
})
以后弄明白了再來修改這個撕彤。
動畫 wx.createAnimation(OBJECT)
scale_anim:wx.createAnimation({
duration: 4000,
timingFunction: '"linear"',
delay: 0,
transformOrigin: '"50% 50% 0"',
})
wxml里設(shè)置動畫事件
<view class='anim_parent'>
<image src='../../res/love_red.png' style='width:100rpx;height:100rpx' animation="{{scale_anim}}"></image>
</view>
.anim_parent{
padding: 100rpx;
}
js代碼里實現(xiàn)動畫屬性,下邊是一個按鈕的點擊事件
start_anim:function(){
var anima = wx.createAnimation({
duration: 3000,
timingFunction: 'linear'
})
anima.scale(2).step()
this.setData({
scale_anim: anima
})
},
timingFunction 有效值：
值 說明
linear 動畫從頭到尾的速度是相同的
ease 動畫以低速開始，然后加快猛拴，在結(jié)束前變慢
ease-in 動畫以低速開始
ease-in-out 動畫以低速開始和結(jié)束
ease-out 動畫以低速結(jié)束
step-start 動畫第一幀就跳至結(jié)束狀態(tài)直到結(jié)束
step-end 動畫一直保持開始狀態(tài)羹铅，最后一幀跳到結(jié)束狀態(tài)
通過var animation = wx.createAnimation（{}）創(chuàng)建完動畫以后，就可以進行各種設(shè)置了愉昆。
平移职员，旋轉(zhuǎn)，拉伸跛溉，傾斜焊切。
https://developers.weixin.qq.com/miniprogram/dev/api/api-animation.html#wxcreateanimationobject
組合動畫，按照step分組倒谷，分組后一個一個執(zhí)行的
anima.scale(2).step().rotate(100).step() //這個是先放大蛛蒙，在旋轉(zhuǎn)
anima.scale(2).rotate(100).step()//這個中間step去了，所以大家是一組動畫渤愁，放大和旋轉(zhuǎn)同時進行
好像也沒有android里的動畫結(jié)束后可以復(fù)位的功能牵祟，結(jié)束后啥樣就啥樣了。
比如點擊一個按鈕抖格，圖片從100拉伸為200诺苹，然后再點擊一個按鈕，進行旋轉(zhuǎn)180度雹拄，你會發(fā)現(xiàn)收奔，它一邊旋轉(zhuǎn)一邊縮小。
數(shù)組操作
teachers:['jerry','phantom']
長度 tearchers. length=2
console.log("=========="+this.data.teachers+"===="+this.data.teachers.join("+")+"===="+this.data.teachers.indexOf('phantom')+"==="+this.data.teachers.push("doph"))
var change=this.data.teachers.splice(1,2);
console.log("=======" + change.valueOf() + "===" + this.data.teachers)
//==========jerry,phantom====jerry+phantom====1===3
//=======phantom,doph===jerry
indexOf() 返回括號里的內(nèi)容在數(shù)組里的索引
join() :首先數(shù)組默認打印出來的是逗號拼接起來的內(nèi)容滓玖。使用join方法坪哄，就會用括號里的東西替換掉逗號
push：往數(shù)組最后添加內(nèi)容，可以添加多個，返回新的數(shù)組長度
unshift():網(wǎng)數(shù)組開頭添加內(nèi)容翩肌，可以一次添加多個模暗，返回新的數(shù)組長度。
splice :從數(shù)組中取出以起始位置開始的位數(shù)的內(nèi)容念祭，并寫入增添內(nèi)容兑宇，可用來刪除內(nèi)容與替換，看下上邊打印的結(jié)果粱坤，因為我們push了一個“doph”,所以數(shù)組應(yīng)該是長度為3的['jerry','phantom','doph']
splice方法以后隶糕，看下打印的結(jié)果，change是從位置1開始取了2個站玄，那么結(jié)果就是phantom,doph枚驻，同時也看到，原始的數(shù)組只剩下了 一個jerry了蜒什。
splice（start,count,inserts[]）第三個參數(shù)其實是個數(shù)組测秸，就是說我們把原始數(shù)組的start開始count個數(shù)的元素拿走疤估，完事在這里添加一些inserts的內(nèi)容灾常，填多少個你隨意，也可以不填铃拇。
比如
var temp = ['jerry', 'phantom', 'doph']
var replace = temp.splice(1, 2, 'insert')
console.log("========" + temp + "==========" + replace)
結(jié)果========jerry,insert==========phantom,doph
shift() 拿走數(shù)組的第一個元素钞瀑，返回值就是拿出來的這個元素
pop() 拿走數(shù)組的最后一個元素，返回值就是拿出來的這個元素
splice其實也是刪除數(shù)據(jù)的方法慷荔，比如要刪除 index=10的數(shù)據(jù)雕什，就是 tearchers.splice(10,1)
修改數(shù)據(jù)的話就是用索引了 tearchers[10]='xxx'
concat 數(shù)組合并
2個數(shù)組合并，沒啥說的显晶，前邊的添加后邊的
var temp = ['jerry', 'phantom', 'doph']
var temp2 = ['jerry2', 'phantom2', 'doph2']
var change=temp.concat(temp2)
修改數(shù)據(jù)以后贷岸，要使ui生效，需要setData
如果只是單獨的修改了數(shù)組里的某條數(shù)據(jù)磷雇，比如index=1 的 teachers:['jerry','phantom'] phantom改成abc
有兩種寫法
this.setData({
'tearchers[1]':'abc'
})
//或者中間加個變量
this.setData({
var change=tearchers[1]
[change]:'abc'
})
看下圖偿警，還有個slice的方法，和splice差不多唯笙，不過這個slice返回的是刪除的第一個元素
