支付寶小程序和微信小程序
1.文件後綴名
2.xml文件模板語言 a: wx:
3.api調用對象 my. wx.
4.網絡請求接口 my.httpRequest wx.request
5.獲取緩存數據 my.getStorage({‘key’:”}) wx.getStorage(”)
6.點擊事件 onXXX–> bindXXX onTap bindtap
7.xml模板裏面{{}}可以進行++ –運算,微信不可以
8.wx:for 需要同時有一個wx:key
9.swiper 微信小程序會有一個固定高度150,需要動態改變高度
<view class='swiper'>
<swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" duration="{{duration}}" interval='{{interval}}' bindchange="bindchange" circular="{{circular}}" style="height:{{imgheights[current]}}rpx;">
<block wx:for='{{imgList}}' wx:key="{{index}}">
<swiper-item>
<image src="{{item}}" data-id='{{index}}' class="slide-image" mode="widthFix" bindload="imageLoad"/>
</swiper-item>
</block>
</swiper>
</view>
.swiper image {
width: 100%;
height: auto;
}
data: {
//圖片地址
imgList: ['/images/wyh-img_bg.png', '/images/wyh-img8.png', '/images/wyh-img_shop1.png', '/images/wyh-img_bg1.png'],
//是否採用銜接滑動
circular: true,
//是否顯示畫板指示點
indicatorDots: false,
//選中點的顏色
indicatorcolor: "#000",
//是否豎直
vertical: false,
//是否自動切換
autoplay: true,
//自動切換的間隔
interval: 2500,
//滑動動畫時長毫秒
duration: 100,
//所有圖片的高度
imgheights: [],
//圖片寬度
imgwidth: 750,
//默認
current: 0
},
imageLoad: function (e) {//獲取圖片真實寬度
var imgwidth = e.detail.width,
imgheight = e.detail.height,
//寬高比
ratio = imgwidth / imgheight;
console.log(imgwidth, imgheight)
//計算的高度值
var viewHeight = 750 / ratio;
var imgheight = viewHeight;
var imgheights = this.data.imgheights;
//把每一張圖片的對應的高度記錄到數組裏
imgheights[e.target.dataset.id] = imgheight;
this.setData({
imgheights: imgheights
})
},
bindchange: function (e) {
// console.log(e.detail.current)
this.setData({ current: e.detail.current })
},
10.網絡請求如果是post方式,必須設置header
header['content-type']
爲 application/x-www-form-urlencoded
header: {
"Content-Type": "application/x-www-form-urlencoded" //post請求設置
},
11.導航欄顏色
支付寶小程序通過js 可以設置
維信小程序在json文件中設置,注意單個頁面設置的時候不能寫window