无码日韩精品无码国产_一级做a爰片久久毛片潮喷_国产欧美国日产_久久9热re这里只有国产中文精品6_每天将为您更新成人影视在线看免费观看

Menu
小程序資訊
小程序資訊
微信小程序開(kāi)發(fā)教程第六章:「名片盒」「我」的頁(yè)面開(kāi)發(fā)
時(shí)間:2016-10-12 22:46:00

效果圖與需求:

玩轉(zhuǎn)微信應(yīng)用號(hào),「小程序」開(kāi)發(fā)實(shí)操指南第三彈

用戶有多張名片,需要左右切換查看,往下切換是菜單按鈕。

這里需求兩處滑動(dòng),用到了微信提供給我們的滑動(dòng)組件 swiper,并且進(jìn)行了嵌套使用,第一層是名片展示與菜單按鈕的上下滑動(dòng),第二層是名片展示的左右滑動(dòng)(支持互相嵌套使用的,可以放心使用)。

Vertical 加上就是縱向滑動(dòng),去掉即是左右滑動(dòng)。

整體結(jié)構(gòu)如下所示:

玩轉(zhuǎn)微信應(yīng)用號(hào),「小程序」開(kāi)發(fā)實(shí)操指南第三彈

點(diǎn)擊事件綁定的是數(shù)據(jù)切換方式,因?yàn)樾枰С侄啻吸c(diǎn)擊切換。

玩轉(zhuǎn)微信應(yīng)用號(hào),「小程序」開(kāi)發(fā)實(shí)操指南第三彈

初始化數(shù)據(jù)是 nextSlide:

玩轉(zhuǎn)微信應(yīng)用號(hào),「小程序」開(kāi)發(fā)實(shí)操指南第三彈

再看下 nextSlide 事件。currentSlide 是當(dāng)前頁(yè)面的 index,改變它即可完成切換效果,可以看上圖初始化數(shù)據(jù)時(shí)設(shè)置了 cs 是 0。

玩轉(zhuǎn)微信應(yīng)用號(hào),「小程序」開(kāi)發(fā)實(shí)操指南第三彈

因而賦值當(dāng)前 data.cs+1 即可,再把綁定點(diǎn)擊事件 clickNext 切換成 nextSlideAgain。

玩轉(zhuǎn)微信應(yīng)用號(hào),「小程序」開(kāi)發(fā)實(shí)操指南第三彈

再看下 nextSlideAgain 事件,執(zhí)行的減去 1 個(gè)索引,實(shí)現(xiàn)多次點(diǎn)擊切換效果。

玩轉(zhuǎn)微信應(yīng)用號(hào),「小程序」開(kāi)發(fā)實(shí)操指南第三彈

具體效果可以看到。

點(diǎn)擊個(gè)人名片進(jìn)去編輯名片頁(yè)面,由于需要帶參,故而使用的是 wx.navgateTo。

玩轉(zhuǎn)微信應(yīng)用號(hào),「小程序」開(kāi)發(fā)實(shí)操指南第三彈

可以看下效果:

玩轉(zhuǎn)微信應(yīng)用號(hào),「小程序」開(kāi)發(fā)實(shí)操指南第三彈

玩轉(zhuǎn)微信應(yīng)用號(hào),「小程序」開(kāi)發(fā)實(shí)操指南第三彈

最后上點(diǎn)干貨:

我們發(fā)出第一篇教程的時(shí)候有人就注意到這點(diǎn)了,怎么做真實(shí)數(shù)據(jù)交互,下面大家可以了解下。

首先進(jìn)去是 MD5 加密,requster 交互層。

玩轉(zhuǎn)微信應(yīng)用號(hào),「小程序」開(kāi)發(fā)實(shí)操指南第三彈

怎么引用 MD5.js?當(dāng)然是模塊化 require,被引用的 js 不要忘記 module.exports 出來(lái)。

下面是 requester.js 引用 MD5.js。

ApplicationRoot 是服務(wù)器地址(配置服務(wù)器時(shí)在開(kāi)發(fā)設(shè)置頁(yè)面查看 AppID 和 AppSecret,配置服務(wù)器域名)。

玩轉(zhuǎn)微信應(yīng)用號(hào),「小程序」開(kāi)發(fā)實(shí)操指南第三彈

Require.js 這里 module.exports 是暴露方法出去。

玩轉(zhuǎn)微信應(yīng)用號(hào),「小程序」開(kāi)發(fā)實(shí)操指南第三彈

這時(shí)候在全局 app.js 里面引入 require.js 映射到全局 global,這個(gè) global 是全局的。

玩轉(zhuǎn)微信應(yīng)用號(hào),「小程序」開(kāi)發(fā)實(shí)操指南第三彈

這時(shí)候那個(gè)頁(yè)面需要那個(gè)頁(yè)面就直接去接受吧,模塊化是不是很好用?

玩轉(zhuǎn)微信應(yīng)用號(hào),「小程序」開(kāi)發(fā)實(shí)操指南第三彈

可以完整的看下與后臺(tái)做數(shù)據(jù)交互的一個(gè)請(qǐng)求實(shí)現(xiàn)方式如下:

圖一是 requester.js 里面的封裝。

圖二是需要調(diào)用數(shù)據(jù)的頁(yè)面渲染。

玩轉(zhuǎn)微信應(yīng)用號(hào),「小程序」開(kāi)發(fā)實(shí)操指南第三彈

玩轉(zhuǎn)微信應(yīng)用號(hào),「小程序」開(kāi)發(fā)實(shí)操指南第三彈

咨詢
微信掃碼咨詢
電話咨詢
400-888-9358