先電云計(jì)算軟件服務(wù)o2商城小程序應(yīng)用開發(fā)手冊(cè)v

1、南京第五十五所技術(shù)開發(fā)先電云計(jì)算軟件服務(wù)-O2O 商城小程序應(yīng)用開發(fā)手冊(cè)版本：先電 Cloud-saas-smallprogram-v1.0發(fā)布日期：2018 年 1 月 30 日南京第五十五所技術(shù)開發(fā)1南京第五十五所技術(shù)開發(fā)版本修訂說(shuō)明2修訂版本修訂時(shí)間修訂說(shuō)明Cloud-SaaS-smallprogram-v1.02018 年 1 月 29 日初次修訂。南京第五十五所技術(shù)開發(fā)目 錄1.開發(fā)環(huán)境安裝41.1.小程序開發(fā)者工具安裝41.2. Egret Wing 安裝62.示例工程導(dǎo)入102.1. 導(dǎo)入 O2Omall 項(xiàng)目工程103.工程說(shuō)明113.1. 功能需求113.2. 小程序的配置1

2、53.2.1. 小程序的配置 app.json153.3. O2O 商城小程序界面開發(fā)193.3.1. 主界面編寫204.技術(shù)支持393南京第五十五所技術(shù)開發(fā)1. 開發(fā)環(huán)境安裝小程序 O2O 商城應(yīng)用開發(fā)采用技術(shù)平臺(tái)，在 Win7 下搭建開發(fā)環(huán)境需要安裝web 開發(fā)者工具和 Egret Wing（由于小程序開發(fā)者工具登錄聯(lián)網(wǎng)的限制，我們?cè)诤罄m(xù)開發(fā)中采用 Egret Wing）。所有的安裝軟件都在發(fā)布的軟件包內(nèi)，無(wú)須。具體步驟如下：1.1.小程序開發(fā)者工具安裝1)點(diǎn)擊軟件包下的“wechat_devtools_1.02.1801081_x64.exe”安裝程序。2)點(diǎn)擊，接受相關(guān)協(xié)議。4南京第五

3、十五所技術(shù)開發(fā)3)選擇安裝路徑在接受完證協(xié)議后，選擇web 開發(fā)者工具安裝位置，選擇好后，點(diǎn)擊安裝。5南京第五十五所技術(shù)開發(fā)4)此表web 開發(fā)者工具安裝好了，點(diǎn)擊“完成”即可。1.2.Egret Wing 安裝1）點(diǎn)擊軟件包下的“EgretWing-v3.2.6.exe”安裝程序。6南京第五十五所技術(shù)開發(fā)2）點(diǎn)擊，接受相關(guān)協(xié)議。3) 選擇安裝路徑在接受完證協(xié)議后，選擇 Egret Wing 安裝位置，選擇好后，點(diǎn)擊。7南京第五十五所技術(shù)開發(fā)4）選擇附加服務(wù)在接受完證協(xié)議后，選擇相關(guān)附加服務(wù)，選擇好后，點(diǎn)擊。8南京第五十五所技術(shù)開發(fā)5）確認(rèn)相關(guān)配置是否正確，確認(rèn)無(wú)誤點(diǎn)擊“安裝”即可。9南京第五

4、十五所技術(shù)開發(fā)2. 示例工程導(dǎo)入2.1. 導(dǎo)入 O2Omall 項(xiàng)目工程1)打開安裝好的 Egret Wing 程序，進(jìn)入主界面。2)點(diǎn)擊菜單欄“文件”按鈕，選擇打開文件夾。10南京第五十五所技術(shù)開發(fā)3)找到包 O2Omall 項(xiàng)目文件，選中該文件夾，點(diǎn)擊右下角“選擇文件夾”按鈕，打開即可。3. 工程說(shuō)明3.1.功能需求1)O2Omall 小程序的主要界面列表如下：11O2Omall商城商店商城主界面，顯示所有的商城商品商品詳情顯示具體商品詳情預(yù)約實(shí)現(xiàn)預(yù)約到店服務(wù)時(shí)間訂單顯示個(gè)人的所有商品訂單列表訂單詳情顯示具體的訂單詳情內(nèi)容賬戶顯示個(gè)人賬戶頁(yè)相關(guān)信息賬戶充值用戶充值頁(yè)消費(fèi)顯示個(gè)人相關(guān)消費(fèi)充值

5、顯示個(gè)人相關(guān)充值南京第五十五所技術(shù)開發(fā)2)功能主界面參考截圖。圖 3-1 商城主界面圖 3-2 預(yù)約界面12資料顯示個(gè)人相關(guān)資料南京第五十五所技術(shù)開發(fā)圖 3-3 訂單界面圖 3-4 賬戶界面圖 3-5 商品詳情界面圖 3-6 訂單詳情界面13南京第五十五所技術(shù)開發(fā)圖 3-7 充值界面圖 3-8 消費(fèi)界面圖 3-9 充值界面圖 3-10資料14南京第五十五所技術(shù)開發(fā)3.2.小程序的配置3.2.1. 小程序的配置 app.json. 配置選項(xiàng)打開我們之前安裝的 Egret Wing，選擇菜單欄“文件”按鈕，選擇“打開文件夾”將資源“O2Omall”文件夾打開，使用 app.json

6、文件來(lái)對(duì)小程序進(jìn)行全局配置，決定頁(yè)面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多 tab 等。見表 3-1 展示了 json 文件中的配置項(xiàng)。表 3-1 json 文件中的配置項(xiàng). pages 選項(xiàng)配置接受一個(gè)數(shù)組，每一項(xiàng)都是字符串，來(lái)指定小哪些頁(yè)面組成。每一項(xiàng)代表對(duì)應(yīng)頁(yè)面的“路徑+文件名”信息，數(shù)組的第一項(xiàng)代表小程序的初始頁(yè)面。小新增或者減少頁(yè)面，都需要對(duì) pages 數(shù)組進(jìn)行修改。文件名不需要寫文件后綴，因?yàn)榭蚣軙?huì)自動(dòng)去尋找路徑.json、.js、.wxml、.wxss 的 4 個(gè)文件進(jìn)行整合。如開發(fā)目錄為：15pages/ pages/store/account/acco

7、unt/account.wxml pages/store/account/account/account.js pages/store/account/account/account.json pages/store/account/account/account.wxss.app.js屬性類型必填描述pagesString Array是設(shè)置頁(yè)面路徑windowObject否設(shè)置默認(rèn)頁(yè)面的窗口表現(xiàn)tabBarObject否設(shè)置底部 tab 的表現(xiàn)networkTimeoutObject否設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間debugBoolean否設(shè)置是否開啟 debug 模式南京第五十五所技術(shù)開發(fā)那么，app.

8、json 應(yīng)該這樣配置。. window 選項(xiàng)配置window 用于設(shè)置小程序的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色。window 配置見表 3-2。表 3-2 window 配置項(xiàng)實(shí)例：16屬性類型默認(rèn)值描述navigationBarBackgroundColorHexColor#000000導(dǎo)航欄背景顏色navigationBarTextStyleStringwhite導(dǎo)航欄標(biāo)題顏色navigationBarTitleTextString導(dǎo)航欄標(biāo)題文字內(nèi)容backgroundColorHexColor#ffffff窗口的背景色backgroundTextStyleStringda

9、rk下拉背景字體、loading圖的樣式enablePullDownRefreshBooleanfalse是否開啟下拉刷新"pages":"pages/store/products/list/list", "pages/store/booking/detail/detail", "pages/store/order/myorder/myorder", "pages/store/account/account/account", "pages/store/products/detail/

10、detail", "pages/store/history/payout/payout", "pages/store/history/payin/payin", "pages/store/account/profile/profile", "pages/store/account/income/income", "pages/store/order/detail/detail"app.jsonapp.wxss南京第五十五所技術(shù)開發(fā). tabbar 選項(xiàng)配置如果小程序是一個(gè)

11、多 tab 應(yīng)用（客戶端窗口的底部或頂部有 tab 欄可以切換頁(yè)面），那么可以通過(guò) tabbar 配置項(xiàng)指定 tab 欄的表現(xiàn)，以及 tab 切換時(shí)顯示的對(duì)應(yīng)頁(yè)面。tabbar 中的list 是一個(gè)數(shù)組，只能配置最少 2 個(gè)、最多 5 個(gè)tab，tab 按數(shù)組的順序排序。tabbar 的具體屬性說(shuō)明見表 3-3。表 3-3 屬性說(shuō)明實(shí)例：17"tabBar": "color": "#dddddd",注意：icon 大小限制為 40 KB，建議為 81 px×81 px，當(dāng) postion 為 top 時(shí)，此參數(shù)無(wú)效。屬性類型

12、必填默認(rèn)值描述colorHexColor是tab 上的文字默認(rèn)顏色selectedColorHexColor是tab 上的文字選中時(shí)的顏色backgroundColorHexColor是tab 的背景色borderStyleString否blacktabbar 上邊框的顏色listArray是tab 的列表positionString否bottom可選值 bottom、top注意：當(dāng)設(shè)置 position 為 top 時(shí)，將顯示 icon。"window": "backgroundTextStyle":"light","na

13、vigationBarBackgroundColor": "#fff", "navigationBarTitleText": "O2O 商城", "navigationBarTextStyle":"black", "enablePullDownRefresh":false, "backgroundColor": "#ffffff"南京第五十五所技術(shù)開發(fā)18"selectedColor": "#3c

14、c51f", "borderStyle": "black", "backgroundColor": "#ffffff", "list": "pagePath": "pages/store/products/list/list", "iconPath": "res/manager/tabs/store_normal.png","selectedIconPath": "res/ma

15、nager/tabs/store_select.png", "text": "商店","pagePath": "pages/store/booking/detail/detail", "iconPath": "res/manager/tabs/bespeak_normal.png","selectedIconPath": "res/manager/tabs/bespeak_select.png", "text&quo

16、t;: "預(yù)約","pagePath": "pages/store/order/myorder/myorder", "iconPath": "res/manager/tabs/order_normal.png", "selectedIconPath": "res/manager/tabs/order_select.png", "text": "訂單","pagePath": "pages

17、/store/account/account/account", "iconPath": "res/manager/tabs/profile_normal.png", "selectedIconPath": "res/manager/tabs/profile_select.png", "text": "賬戶",南京第五十五所技術(shù)開發(fā). networkTimeout 選項(xiàng)配置networkTimeout 可以設(shè)置各種網(wǎng)絡(luò)請(qǐng)求的超時(shí)時(shí)間。具體配置見表 3-

18、4。表 3-4 網(wǎng)絡(luò)請(qǐng)求超時(shí)時(shí)間. debug 選項(xiàng)配置在開發(fā)者工具中可以開啟 debug 模式，在開發(fā)者工具的臺(tái)面板，調(diào)試信息以 info 的形式給出，其信息有 Page 的、頁(yè)面路由、數(shù)據(jù)更新和觸發(fā) 。它可以幫助開發(fā)者快速一些常見的問(wèn)題。3.3.O2O 商城小程序界面開發(fā)O2O 即“Online To Offline”，是指將線下的商務(wù)機(jī)會(huì)與互聯(lián)網(wǎng)結(jié)合，讓互聯(lián)網(wǎng)成為線下的前臺(tái)。即用戶通過(guò)互聯(lián)網(wǎng)與提供服務(wù)的商家上進(jìn)行。本次案例介紹如何通過(guò)小程序開發(fā)工具，來(lái)進(jìn)行商城主界面開發(fā)（圖 3-5）。19屬性類型必填說(shuō)明requestNumber否wx request 的超時(shí)時(shí)間conne

19、ctSocketNumber否wx.connectSocket 的超時(shí)時(shí)間uploadFileNumber否wx.uploadFile 的超時(shí)時(shí)間downloadFileNumber否wx.downloadFile 的超時(shí)時(shí)間南京第五十五所技術(shù)開發(fā)圖 3-11 O2O 商城主界面3.3.1. 主界面編寫使用 Egret Wing，打開“O2Omall”項(xiàng)目，點(diǎn)擊項(xiàng)目下的 app.json 文件，可以快速找到主界面文件路徑 pages/store/products/list/list，打開相應(yīng)文件目錄，可以看到 list.wxml，list.js，list.wxss，list.json 四個(gè)文件

20、。. list.wxml 界面編寫分析圖 3-5，整個(gè)主界面有三塊組成，一塊是輪播圖，通過(guò)輪播圖動(dòng)態(tài)展現(xiàn)商城中推薦的精品，吸引人眼球，一塊是主體商品列表，顯示所有商城商品列表，最后一塊是底部導(dǎo)航，由于底部導(dǎo)航在 app.json 中已經(jīng)配置過(guò)了，所以在所有后綴為.wxml 的界面中無(wú)需配置。輪播圖實(shí)現(xiàn)代碼：20<view class="top"><!-小程序輪播組件 swiper，其中相關(guān)參數(shù)由list.js-><swiper indicator-dots="indicatorDots" autoplay=&q

21、uot;autoplay" interval="interval" duration="duration"><block wx:for="imgUrls" wx:key="_imgUrls"><swiper-item>南京第五十五所技術(shù)開發(fā)主體商品列表實(shí)現(xiàn)代碼：21<!-實(shí)現(xiàn)相關(guān)界面調(diào)整功能，bindtap 綁定相關(guān)跳轉(zhuǎn)方法-><view class="myrow" ><view class="img" w

22、x:for="bar" wx:key="_bar"><image src="item.img" bindtap="item.link" class="imgbar" ></image><view class="name"> </view></view></view><view class="table-list"><!-循環(huán)獲取相關(guān)貨物列表并顯

23、示,通過(guò) wx:for 循環(huán)遍歷貨品信息-><view class="row border-item-1 pad-10" style="padding-top:26rpx;" wx:for="goods" wx:key="_id" ><view style="width:200rpx;" class="push-r-10"><imagebindtap="detail"style="height:70rpx;wi

24、dth:100rpx"data-id="item._id" mode="widthFix" src="item.corver"></image></view><view style="width:50%" class="push-r-10"><view class="hiddenover"><text bindtap="detail" data-id="item._id&quo

25、t; class="font-s15 item-name"></text></view><view><navigator hover-class="navigator-hover"><image src="item.url" class="slide-image"/></navigator></swiper-item></block></swiper></view>南京第五

26、十五所技術(shù)開發(fā). list.wxss 樣式編寫在上一部分中，我們已經(jīng)編寫了基礎(chǔ)展示代碼，但是如同 html 開發(fā)一樣，需要有相關(guān)樣式文件來(lái)渲染界面，在小我們也需要編寫 list.wxss 文件。在本項(xiàng)目中因?yàn)橛行邮轿募儆谕ㄓ貌糠郑虼宋覀冊(cè)?pages/store/wxss 下面建立一個(gè)通用樣式文件 style.wxss，到時(shí)在各具體文件中引入即可。style.wxss 實(shí)現(xiàn)代碼：22view color:#232323; font-size:32rpx;buttontype="primary"plain border: 1px solid #81c7d1

27、; color: #81c7d1;buttontype="primary" color:#FFFFFF; background-color:#81c7d1;<text bindtap="detail" data-id="item._id" class="price">￥item.show_price</text></view></view><view style="width:30%;min-width:160rpx;"><but

28、ton size="mini" bindtap="addtocard" data-id="item._id" type="primary"data-price="item.sale_price" class="buybutton" data-amount="1" bindtap="detail"></button></view></view></view>南京第五十五所技術(shù)開發(fā).to

29、pbarbackground: #f5f5f5;line-height: 64rpx;position: fixed;width: 100%;z-index: 1000;border-bottom: 2rpx solid #e1e1e1;.topbar-2nd margin-top:90rpx;background: #f3f2f7 !important;.topbar image width: 48rpx;height: 48rpx;margin:20rpx;margin-right: 10rpx;margin-bottom:0;.topbar .avatar border-radius:

30、50%;.topbar textheight: 48rpx;font-size:28rpx;line-height: 88rpx;margin-left: 10rpx;margin-top: 5rpx;.font-bold 23南京第五十五所技術(shù)開發(fā)font-weight: 500;.font-s16 font-size:32rpx;.font-s15 font-size:30rpx;.font-s14 font-size:28rpx;line-height: 36rpx;.text-primary color:#FF6347;.view-rowdisplay: flex;flex-direc

31、tion:row;.block display: flex; flex-direction:column; .block .row flex-direction: row; .block .column flex-direction: column; .block .block-content padding: 20rpx;width: 100%;padding-left:0; padding-right:0; .block .block-title padding: 20rpx; width: 100%; padding-left:0; padding-right:0;font-size:3

32、6rpx; font-weight: 500; .block .form-group margin-top:20rpx;margin-left:40rpx;margin-bottom:20rpx;24南京第五十五所技術(shù)開發(fā).block .form-group label margin-top:10rpx;.block .form-group input margin-top:10rpx;border-bottom: 2rpx solid #f2f2f2;.block .form-group picker padding-top:10rpx;padding-bottom: 20rpx;borde

33、r-bottom: 2rpx solid #f2f2f2;.table-list display: flex;flex-direction:column;.table-list .rowdisplay: flex;flex-direction:row;.table-list .column flex-direction: column; .table-list .row imagewidth:100%;.table-list .row viewheight: auto;.view-column display: flex;25南京第五十五所技術(shù)開發(fā)flex-direction:column;.

34、border-1 border: 2rpx solid #f2f2f2;.border-t-1 border-top: 2rpx solid #f2f2f2;.border-b-1 border-bottom: 2rpx solid #f2f2f2;.border-l-1 border-left: 2rpx solid #f2f2f2;.border-r-1 border-right: 2rpx solid #f2f2f2;.border-item-1 border-top: 2rpx solid #ffffff;border-bottom: 2rpx solid #f2f2f2;.pull-

35、left float: left;.pull-rightfloat: right;.push-t-5 margin-top:10rpx;26南京第五十五所技術(shù)開發(fā).push-l-5 margin-left:10rpx;.push-t-10 margin-top:20rpx!important;.push-t-15 margin-top:30rpx !important;.push-b-10 margin-bottom:20rpx;.push-l-10 margin-left:20rpx;.push-l-20 margin-left:40rpx;.push-r-10 margin-right:2

36、0rpx;.push-r-20margin-right:40rpx;.pad-5-t padding-top:10rpx;.pad-5 padding:10rpx;27南京第五十五所技術(shù)開發(fā).pad-10 padding:20rpx;.pad-20 padding:40rpx;.pad-40 padding:80rpx;.rm-padding padding:0 !important;.clear clear: both;.text-muted color: #a2a2a2 !important;.text-warn color:#E64340 !important;.text-right t

37、ext-align: right !important;.bg-grey border: 1px solid #f5f5f5;background: #f5f5f5;28南京第五十五所技術(shù)開發(fā).bg-primary color: #ffffff;border: 1px solid #81c7d1;background: #81c7d1;.overhidden overflow: hidden;white-space:nowrap;text-overflow:ellipsis.hiddendisplay: none !important;.numinput input display:inlin

38、e-block;font-size:28rpx;height:32rpx;min-height: 1em;width:32rpx;border:2rpx solid #81c7d1;padding:0px;text-align:center;.phrow line-height: 100rpx;height:100rpx;.bottombar bottom: 0px;position: fixed;29南京第五十五所技術(shù)開發(fā)list.wxss 實(shí)現(xiàn)代碼：30import "././wxss/style.wxss"/*導(dǎo)入外部通用樣式*/.slide-image width:

39、400px; height:150px;.imgbarposition: relative; left:10rpx;width: 35px; height: 35px;background-color: #ffffff;.bottombar bottom: 0px;line-height: 100rpx; height:100rpx; width: 100%;z-index: 1000;.bottombar text font-weight: 400; font-size: 30rpx;.bottombar image width: 60rpx; height: 60rpx; margin:2

40、0rpx; margin-bottom:0;南京第五十五所技術(shù)開發(fā)border: 1px solid #ffffff;border-top: 1px solid #EEEEE0;background: #ffffff;color:#ffffff;position: fixed;line-height: 100rpx;height:100rpx;width: 100%;z-index: 1000;.bottombar text color: #ffffff;font-weight: 400;font-size: 30rpx;.bottombar image width: 60rpx;height

41、: 60rpx;margin:20rpx;margin-bottom:0;.text-mimifont-size: 25rpx;color: #81c7d1;margin-left: 10rpx;.hiddenoverwidth: 400rpx;overflow: hidden;text-overflow: ellipsis;31南京第五十五所技術(shù)開發(fā)white-space: nowrap;margin-top: -5px;.pricecolor: #ff2150;position: absolute;margin-top:10rpx;font-size:30rpx;.item-namefon

42、t-size: 28rpx;.myrowheight: 180rpx;margin-top: 70rpx;width: 780rpx;.imgposition: relative;display: inline;margin-left: 20rpx;.nameposition: relative;font-size: 23rpx;display: inline;top: 40rpx;left:-70rpx;z-index: 100;32南京第五十五所技術(shù)開發(fā). list.js 編寫界面編寫好后，為了實(shí)現(xiàn)相應(yīng)的數(shù)據(jù)顯示及相應(yīng)功能實(shí)現(xiàn)，我們需要在 list.js 文件中編寫相關(guān)代碼，

43、實(shí)現(xiàn)數(shù)據(jù)綁定。在編寫 list.js 之前我們先來(lái)了解下整個(gè)小程序的生命周期。Page()函數(shù)用來(lái)一個(gè)頁(yè)面。接受一個(gè)object參數(shù)，其指定頁(yè)面的初始數(shù)據(jù)、生命周期函數(shù)、處理函數(shù)等。參數(shù)說(shuō)明：33.slide-imagewidth: 100%;南京第五十五所技術(shù)開發(fā)onLoad: 頁(yè)面加載一個(gè)頁(yè)面只會(huì)調(diào)用一次。接收頁(yè)面參數(shù)可以獲取 wx.navigateTo 和 wx.redirectTo 及<navigator/>中的 query。34屬性類型描述onLoadFunction生命周期函數(shù)onReadyFunction生命周期函數(shù)-頁(yè)面初次渲染完成onShowFunction生命周

44、期函數(shù)-頁(yè)面顯示onHideFunction生命周期函數(shù)-頁(yè)面隱藏onUnloadFunction生命周期函數(shù)-頁(yè)面卸載onPullDownRefreshFunction頁(yè)面相關(guān)處理函數(shù)-用戶下拉動(dòng)作onReachBottomFunction頁(yè)面上拉觸底的處理函數(shù)onShareAppMessageFunction用戶點(diǎn)擊右上角轉(zhuǎn)發(fā)onPageScrollFunction頁(yè)面滾動(dòng)觸發(fā)的處理函數(shù)其他Any開發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)到object 參數(shù)中，在頁(yè)面的函數(shù)中用 this 可以南京第五十五所技術(shù)開發(fā)onShow: 頁(yè)面顯示每次打開頁(yè)面都會(huì)調(diào)用一次。onReady: 頁(yè)面初次渲染完成一個(gè)

45、頁(yè)面只會(huì)調(diào)用一次，代表頁(yè)面已經(jīng)準(zhǔn)備妥當(dāng)，可以和視圖層進(jìn)行交互。onHide: 頁(yè)面隱藏當(dāng) navigateTo 或底部 tab 切換時(shí)調(diào)用。onUnload: 頁(yè)面卸載當(dāng) redirectTo 或 navigateBack 的時(shí)候調(diào)用。我們可以根據(jù)的實(shí)際需要，在 page()不同的生命周期中去執(zhí)行處理不同的方法。list.js 實(shí)現(xiàn)代碼：35Page(data:/*商品列表數(shù)據(jù)* param Number id 商品的 id 標(biāo)識(shí);* param String corver 商品的封面;* param String name 商品名稱;* param String show_price 商品顯

46、示的價(jià)格;* param String sale_price 商品價(jià)格;*/ goods: id: "1",corver:"/res/manager/tabs/bg1.jpg",name:"openstack 課程",show_price:"120",sale_price:"120", id: "2",corver:"/res/manager/tabs/bg2.jpg",name:"云計(jì)算課程",show_price:"120

47、", sale_price:"120",/*輪播圖片* param Array imgUrls 首頁(yè)輪播圖片;* param Boolean indicatorDots 商品的封面;* param Boolean autoplay 是否自動(dòng);* param Number interval 自動(dòng)切換時(shí)間間隔;南京第五十五所技術(shù)開發(fā)* param Number duration 滑動(dòng)動(dòng)畫時(shí)長(zhǎng);*/imgUrls: url: '/res/manager/tabs/bg1.jpg',url: '/res/manager/tabs/bg2.jpg',indicatorDots: true,autoplay: true,interval: 5000,duration: 1000,/*首頁(yè)導(dǎo)航圖片及跳轉(zhuǎn)* pa