成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

微信小程序——商城篇

k00baa / 3526人閱讀

摘要：微信小程序之跳轉(zhuǎn)在進(jìn)入商品詳情頁(yè)以后，點(diǎn)擊左下角的圖標(biāo)原應(yīng)該跳轉(zhuǎn)到首頁(yè)，但是一直點(diǎn)也不跳，而且也不報(bào)錯(cuò)。放下效果圖微信小程序購(gòu)物車購(gòu)物車頁(yè)面邏輯的話，要按業(yè)務(wù)需求來(lái)。

前言

隨著wepy和mpvue的出現(xiàn)及流行，開發(fā)小程序變的越來(lái)越便捷和強(qiáng)大，作為基佬社區(qū)的一份子，我們都需要把自己遇到的問(wèn)題以及如何解決的方式相互分享，這樣才能幫助到更多的朋（ji）友（lao）。如有寫的不足的地方，請(qǐng)各位提出寶貴的建議哈。

簡(jiǎn)單介紹微信小程序

眾所周知，小程序是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想，用戶掃一掃或者搜一下即可打開應(yīng)用。也體現(xiàn)了“用完即走”的理念，用戶不用關(guān)心是否安裝太多應(yīng)用的問(wèn)題，因此它的開發(fā)程度也較為簡(jiǎn)單。

開發(fā)技術(shù)： WXML（HTML5）、WXSS（CSS）、JavaScript

開發(fā)工具： vscode(可以使用下列幾種框架來(lái)進(jìn)行開發(fā))，微信開發(fā)者工具

開發(fā)思路： MVVM，簡(jiǎn)單來(lái)說(shuō)，這就是一門把前端開發(fā)者從操作DOM的繁瑣步驟中解脫出來(lái)，讓數(shù)據(jù)自動(dòng)更新界面的技術(shù)。

開發(fā)流程： 這個(gè)大家可以看官方的文檔，下載安裝開發(fā)工具以后使用appid就可以進(jìn)行開發(fā)了。小程序簡(jiǎn)易教程

開發(fā)單位： rpx,pt,rem等，具體在這里就不介紹了

開發(fā)框架： 這里介紹幾種小程序的框架，有weui,wepy,mpvue等，有興趣的同學(xué)可以自主去了解一下

作為一枚前端戰(zhàn)場(chǎng)的工兵，自然少不了踩雷，而且不用框架組件式開發(fā)來(lái)手動(dòng)切頁(yè)面有點(diǎn)小心酸~~在這里我分享幾個(gè)自己用原生微信小程序開發(fā)遇到的坑，

1. 微信小程序之wx.showModal

給confirm/cancel屬性設(shè)置字體顏色的時(shí)候會(huì)有一個(gè)小坑, mode代碼：


    測(cè)試


js代碼：
test(e) {
    wx.showModal({
        content: "測(cè)試",
        cancelColor: "red",
        confirmColor: "rgb(255,0,0)"
    })
}

這樣的代碼在模擬器上顯示一切正常，兩個(gè)按鈕也的確變顏色了。可是在手機(jī)上一看，傻眼了


原來(lái)這2個(gè)按鈕的顏色值只支持十六進(jìn)制的。

js代碼：
test(e) {
    wx.showModal({
        content: "測(cè)試",
        cancelColor: "#FF0000",
        confirmColor: "#FF0000"
    })
}

這樣兩個(gè)按鈕就在手機(jī)上也能出來(lái)了，并且顏色得到了改變。

2. 微信小程序之navigator跳轉(zhuǎn)


在進(jìn)入商品詳情頁(yè)以后，點(diǎn)擊左下角的home圖標(biāo)原應(yīng)該跳轉(zhuǎn)到首頁(yè)，但是一直點(diǎn)也不跳，而且也不報(bào)錯(cuò)。


wxml代碼：

仔細(xì)查看了路徑無(wú)誤和字母沒(méi)打錯(cuò)以后，這個(gè)問(wèn)題卡了我半個(gè)小時(shí)以后終于發(fā)現(xiàn)這里有一個(gè)不夠細(xì)心就會(huì)踩的坑，

常用wx.switchTab 接口的同學(xué)可能沒(méi)碰到過(guò)這種情況。navigator組件里有一個(gè)屬性是open-type，默認(rèn)值是navigate,對(duì)應(yīng) wx.navigateTo 或 wx.navigateToMiniProgram 的功能。



聰明的同學(xué)應(yīng)該已經(jīng)看出問(wèn)題所在了，是的，這里要跳轉(zhuǎn)的首頁(yè)就是一個(gè)tabBar頁(yè)面，按照默認(rèn)的跳轉(zhuǎn)方式是不能實(shí)現(xiàn)的。


解決方法:

加一個(gè)open-type="switchTab" 或者綁定一個(gè)點(diǎn)擊事件用wx.switchTab接口來(lái)實(shí)現(xiàn)。

3. 微信小程序之scroll-x


小程序的scroll-view組件還有一個(gè)橫向滑動(dòng)的屬性：scroll-x


但是對(duì)于類似我這樣的新手來(lái)說(shuō)，設(shè)置scroll-x的時(shí)候，會(huì)把要滑動(dòng)的內(nèi)容給擠成多行。


在這里直接給出一個(gè)解決方法：

給scroll-x設(shè)置一個(gè)寬度，并設(shè)置white-space: nowrap屬性 //內(nèi)容不換行

把內(nèi)容view盒子設(shè)置為行內(nèi)塊元素 display: inline-block



即可解決橫向滑動(dòng)內(nèi)容不在一行的問(wèn)題，在下面我簡(jiǎn)單貼一下項(xiàng)目中我這塊內(nèi)容的代碼。

4. swiper組件和input組件一起用

問(wèn)題：如果把一個(gè)input組件絕對(duì)定位到swiper組件上，swiper還是會(huì)覆蓋input組件,而input組件內(nèi)的placeholder屬性則會(huì)透出來(lái)，雖然不影響input的功能，但是會(huì)影響到input屬性的顯示效果，也就是影響了視覺(jué)上的效果。



模擬器上的效果：



手機(jī)上的效果：


代碼：

 
    
    
        
          
            
          
        
    
 
.input {
  position: absolute;
  left: 30rpx;
  top: 10rpx;
  box-sizing: border-box;
  width: 690rpx;
  height: 56rpx;
  border-radius: 45rpx;
  border: 1rpx solid #000;   //證明自己的猜測(cè)
  background-color: #fff;
  box-shadow: 0 0 1rpx #ccc;
  text-indent: 185rpx;
  font-size: 0.8rem;
  
}
.receive {
  height: 380rpx;
}
.receive_img {
  width: 750rpx;
  height: 380rpx;  
}

我們可以看到模擬器上顯示正常，但是在手機(jī)上就成了方型的框，我開始排查問(wèn)題，我猜測(cè)是被覆蓋了？于是我就添加了border: 1rpx solid #000;這行代碼，進(jìn)行刷新以后發(fā)現(xiàn)黑線邊框出來(lái)了一下馬上就消失了，果然！用了絕對(duì)定位都被覆蓋了。



解決方法： 給input組件加個(gè)z-index:2 。 當(dāng)然，建議給input組件再套一個(gè)view盒子。

代碼：

 
    
    
    
  
    
      
        
      
    
  
 
.inputSearch {
   position: absolute;
  left: 30rpx;
  top: 10rpx;
  box-sizing: border-box;
  width: 690rpx;
  height: 56rpx;
  border-radius: 45rpx;
  z-index: 2;    
  background-color: #fff;
  box-shadow: 0 0 1rpx #ccc; 
}
.input {
  text-indent: 185rpx;
  font-size: 0.8rem;
  
}
.receive {
  height: 380rpx;
}
.receive_img {
  width: 750rpx;
  height: 380rpx;  
}
5. 微信小程序之scroll-into-view

我在這里就一種能實(shí)現(xiàn)的方法，假數(shù)據(jù)可以通過(guò)easymock造一下再wx.request引入，也可以直接放到一個(gè)js文件里import引入，這里不詳細(xì)講解。


一開始我以為是用兩個(gè)scroll-view來(lái)做，通過(guò)scroll-into-view這個(gè)屬性來(lái)實(shí)現(xiàn)左右關(guān)聯(lián)進(jìn)行滾動(dòng)的效果

代碼：


      
        
            {{item.name}}
        
      
     
      
          
              
                  
              
              
                  {{item.title}}
              
              
                  
                      
                      
                          {{product.name}}
                      
                  
              
          
      
    

//css代碼就不放了，手動(dòng)擼的有點(diǎn)多，如有需要可以去github里拿
//js相關(guān)代碼
  switchCategory(e) {
    console.log(e)
    this.setData({
      toView:e.currentTarget.dataset.id
    })
  },



看完這個(gè)效果以后我就覺(jué)得好low啊。。最蛋疼的是右邊竟然可以上下滾動(dòng)，這樣一來(lái)，右邊的商品內(nèi)容多的時(shí)候就會(huì)形成兩個(gè)scroll-view的嵌套，導(dǎo)致用戶體驗(yàn)極不友好。



于是無(wú)腦的查看了小程序文檔以后，我發(fā)現(xiàn)swiper組件和scroll-view一樣還有一個(gè)縱向滑動(dòng)的屬性vertical，而且是有swiper的過(guò)渡效果，使得切換的時(shí)候不會(huì)太僵硬。于是我更改了部分wxml代碼，實(shí)現(xiàn)了下圖中右邊不能上下滾動(dòng)，只能依靠左側(cè)的nav來(lái)切換的效果


代碼：


      
        
            {{item.name}}
        
      
     
        
            
                
                    
                
                
                    {{item.title}}
                
                
                    
                        
                        
                            {{product.name}}
                        
                    
                
            
        
     

//js相關(guān)代碼
  switchCategory(e) {
    console.log(e)
    this.setData({
      curIndex: e.currentTarget.dataset.index?e.currentTarget.dataset.index:0,
      toView:e.currentTarget.dataset.index,
    })
  },
6. 微信小程序購(gòu)物車商品左滑刪除功能

在這里我給出一種實(shí)現(xiàn)購(gòu)物車商品左滑刪除的方法，給大家參考，直接放代碼吧
demo代碼：

wxml:

    {{item.tt}}
    刪除

wxss:
.del {
    background-color: #b4282d;
    width: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    -webkit-transform: translateX(90px);
    transform: translateX(90px);
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
  }
  .content {
    float: left;
    width: 100%;
    margin-right:0;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    -webkit-transform: translateX(90px);
    transform: translateX(90px);
    margin-left: -90px;
    display: flex;
  }
.touch-move-active .content,
.touch-move-active .del {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

js部分
  data: {
    lists: [
      {
        tt:"測(cè)試",
        isTouchMove: false
      },
      {
        tt: "測(cè)試",
        isTouchMove: false
      },
      {
        tt: "測(cè)試",
        isTouchMove: false
      },
      {
        tt: "測(cè)試",
        isTouchMove: false
      },
    ]
  },
  // 計(jì)算手滑動(dòng)角度函數(shù)
  angle: function (start, end) {
    var _X = end.X - start.X,
      _Y = end.Y - start.Y
    //返回角度 /Math.atan()返回?cái)?shù)字的反正切值
    return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
  },
  touchstart(e) {
    //開始觸摸時(shí) 重置所有刪除
    this.data.lists.forEach(function (v, i) {
      if (v.isTouchMove)//只操作為true的
        v.isTouchMove = false;
    })
    this.setData({
      startX: e.touches[0].clientX,
      startY: e.touches[0].clientY,
      lists: this.data.lists
    })
  },
  //滑動(dòng)事件處理
  touchmove(e) {
      let index = e.currentTarget.dataset.index;//當(dāng)前索引
      let startX = this.data.startX;//開始X坐標(biāo)
      let startY = this.data.startY;//開始Y坐標(biāo)
      let touchMoveX = e.touches[0].clientX;//滑動(dòng)變化坐標(biāo)
      let touchMoveY = e.touches[0].clientY;//滑動(dòng)變化坐標(biāo)
      //獲取滑動(dòng)角度
      let angle = this.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });
    this.data.lists.forEach((v, i)=> {
      v.isTouchMove = false
      //滑動(dòng)超過(guò)30度角 return
      if (Math.abs(angle) > 30) return;
      if (i == index) {
        if (touchMoveX > startX) //右滑
          v.isTouchMove = false
        else //左滑
          v.isTouchMove = true
      }
    })
    //更新數(shù)據(jù)
    this.setData({
      lists: this.data.lists
    })
  },
  //刪除事件
  del(e) {
    this.data.lists.splice(e.currentTarget.dataset.index, 1)
    this.setData({
      lists: this.data.lists,
      
    })
  },

大家可以根據(jù)自己的需求做相應(yīng)的修改。放下效果圖

7. 微信小程序購(gòu)物車

購(gòu)物車頁(yè)面邏輯的話，要按業(yè)務(wù)需求來(lái)。我這里簡(jiǎn)單提供一個(gè)購(gòu)物車邏輯的demo，新手可以看下 購(gòu)物車功能。

結(jié)語(yǔ)

商城類微信小程序項(xiàng)目學(xué)習(xí)github傳送門



筆者踩了不少的坑，這里只寫出了幾個(gè)，如果用框架的話會(huì)更方便，作為一枚前端的工兵，還是得經(jīng)常踩坑，才能得到進(jìn)階的機(jī)會(huì)～

第一次寫文章，請(qǐng)給新手多一點(diǎn)鼓勵(lì)，給工兵多一點(diǎn)關(guān)愛，點(diǎn)個(gè)贊－留下您的建議再走吧~

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/108035.html

相關(guān)文章

  • 微信小程序-高仿vivo商城

    摘要：說(shuō)明最近微信小程序也是挺火的了，看了微信官方文檔語(yǔ)法和有點(diǎn)相似，正好學(xué)過(guò)也用寫過(guò)一個(gè)商城項(xiàng)目，就嘗試用小程序?qū)憘€(gè)商城，一般來(lái)說(shuō)你學(xué)過(guò)寫個(gè)小程序那是很簡(jiǎn)單的，小程序和無(wú)非就是路由跳轉(zhuǎn)傳參傳數(shù)據(jù)如果你想學(xué)可以來(lái)看看我用寫的一個(gè)商城項(xiàng)目地址在這里 說(shuō)明 最近微信小程序也是挺火的了，看了微信官方文檔語(yǔ)法和vue.js有點(diǎn)相似，正好學(xué)過(guò)vue 也用vue寫過(guò)一個(gè)商城項(xiàng)目，就嘗試用小程序?qū)憘€(gè)商城，...

    seal_de 評(píng)論0 收藏0

  • 微信小程序資源匯總

    awesome-github-wechat-weapp 是由OpenDigg整理并維護(hù)的微信小程序開源項(xiàng)目庫(kù)集合。我們會(huì)定期同步上的項(xiàng)目到這里，也歡迎各位 UI組件開發(fā)框架實(shí)用庫(kù)開發(fā)工具服務(wù)端項(xiàng)目實(shí)例Demo UI組件 weui-wxss ★1873 - 同微信原生視覺(jué)體驗(yàn)一致的基礎(chǔ)樣式庫(kù)zanui-weapp ★794 - 好用易擴(kuò)展的小程序 UI 庫(kù)wx-charts ★449 - 微信小程...

    Olivia 評(píng)論0 收藏0

  • eweapp：ECShop非官方版微信小程序商城

    摘要：非官方版微信小程序商城，基于版本接口，兼容原有程序，沒(méi)有對(duì)原有程序代碼進(jìn)行過(guò)任何改動(dòng)。 eweapp ECShop非官方版微信小程序商城，基于3.6版本appserver接口，100%兼容原有程序，沒(méi)有對(duì)原有程序代碼進(jìn)行過(guò)任何改動(dòng)。 GitHub https://github.com/tumobi/eweapp 功能列表 首頁(yè)： 輪播圖、商城滾動(dòng)公告、精品推薦、新品上市、銷量排行 分...

    libxd 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<