微信小程序——商城篇

k00baa 發布于2019-08-26 12:01 / 3501人閱讀

摘要：微信小程序之跳轉在進入商品詳情頁以后，點擊左下角的圖標原應該跳轉到首頁，但是一直點也不跳，而且也不報錯。放下效果圖微信小程序購物車購物車頁面邏輯的話，要按業務需求來。

前言

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

簡單介紹微信小程序

眾所周知，小程序是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或者搜一下即可打開應用。也體現了“用完即走”的理念，用戶不用關心是否安裝太多應用的問題，因此它的開發程度也較為簡單。

開發技術： WXML（HTML5）、WXSS（CSS）、JavaScript

開發工具： vscode(可以使用下列幾種框架來進行開發)，微信開發者工具

開發思路： MVVM，簡單來說，這就是一門把前端開發者從操作DOM的繁瑣步驟中解脫出來，讓數據自動更新界面的技術。

開發流程：這個大家可以看官方的文檔，下載安裝開發工具以后使用appid就可以進行開發了。小程序簡易教程

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

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

作為一枚前端戰場的工兵，自然少不了踩雷，而且不用框架組件式開發來手動切頁面有點小心酸~~在這里我分享幾個自己用原生微信小程序開發遇到的坑，

1. 微信小程序之wx.showModal

給confirm/cancel屬性設置字體顏色的時候會有一個小坑, mode代碼：


    測試


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

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

原來這2個按鈕的顏色值只支持十六進制的。

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

這樣兩個按鈕就在手機上也能出來了，并且顏色得到了改變。

2. 微信小程序之navigator跳轉

在進入商品詳情頁以后，點擊左下角的home圖標原應該跳轉到首頁，但是一直點也不跳，而且也不報錯。

wxml代碼：

仔細查看了路徑無誤和字母沒打錯以后，這個問題卡了我半個小時以后終于發現這里有一個不夠細心就會踩的坑，

常用wx.switchTab 接口的同學可能沒碰到過這種情況。navigator組件里有一個屬性是open-type，默認值是navigate,對應 wx.navigateTo 或 wx.navigateToMiniProgram 的功能。

聰明的同學應該已經看出問題所在了，是的，這里要跳轉的首頁就是一個tabBar頁面，按照默認的跳轉方式是不能實現的。

解決方法:

加一個open-type="switchTab" 或者綁定一個點擊事件用wx.switchTab接口來實現。

3. 微信小程序之scroll-x

小程序的scroll-view組件還有一個橫向滑動的屬性：scroll-x

但是對于類似我這樣的新手來說，設置scroll-x的時候，會把要滑動的內容給擠成多行。

在這里直接給出一個解決方法：

給scroll-x設置一個寬度，并設置white-space: nowrap屬性 //內容不換行

把內容view盒子設置為行內塊元素 display: inline-block

即可解決橫向滑動內容不在一行的問題，在下面我簡單貼一下項目中我這塊內容的代碼。

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

問題：如果把一個input組件絕對定位到swiper組件上，swiper還是會覆蓋input組件,而input組件內的placeholder屬性則會透出來，雖然不影響input的功能，但是會影響到input屬性的顯示效果，也就是影響了視覺上的效果。

模擬器上的效果：

手機上的效果：

代碼：

.input {
  position: absolute;
  left: 30rpx;
  top: 10rpx;
  box-sizing: border-box;
  width: 690rpx;
  height: 56rpx;
  border-radius: 45rpx;
  border: 1rpx solid #000;   //證明自己的猜測
  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;  
}

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

解決方法：給input組件加個z-index:2 。當然，建議給input組件再套一個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

我在這里就一種能實現的方法，假數據可以通過easymock造一下再wx.request引入，也可以直接放到一個js文件里import引入，這里不詳細講解。

一開始我以為是用兩個scroll-view來做，通過scroll-into-view這個屬性來實現左右關聯進行滾動的效果

代碼：


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

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

看完這個效果以后我就覺得好low啊。。最蛋疼的是右邊竟然可以上下滾動，這樣一來，右邊的商品內容多的時候就會形成兩個scroll-view的嵌套，導致用戶體驗極不友好。

于是無腦的查看了小程序文檔以后，我發現swiper組件和scroll-view一樣還有一個縱向滑動的屬性vertical，而且是有swiper的過渡效果，使得切換的時候不會太僵硬。于是我更改了部分wxml代碼，實現了下圖中右邊不能上下滾動，只能依靠左側的nav來切換的效果

代碼：


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

//js相關代碼
  switchCategory(e) {
    console.log(e)
    this.setData({
      curIndex: e.currentTarget.dataset.index?e.currentTarget.dataset.index:0,
      toView:e.currentTarget.dataset.index,
    })
  },

6. 微信小程序購物車商品左滑刪除功能

在這里我給出一種實現購物車商品左滑刪除的方法，給大家參考，直接放代碼吧
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:"測試",
        isTouchMove: false
      },
      {
        tt: "測試",
        isTouchMove: false
      },
      {
        tt: "測試",
        isTouchMove: false
      },
      {
        tt: "測試",
        isTouchMove: false
      },
    ]
  },
  // 計算手滑動角度函數
  angle: function (start, end) {
    var _X = end.X - start.X,
      _Y = end.Y - start.Y
    //返回角度 /Math.atan()返回數字的反正切值
    return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
  },
  touchstart(e) {
    //開始觸摸時 重置所有刪除
    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
    })
  },
  //滑動事件處理
  touchmove(e) {
      let index = e.currentTarget.dataset.index;//當前索引
      let startX = this.data.startX;//開始X坐標
      let startY = this.data.startY;//開始Y坐標
      let touchMoveX = e.touches[0].clientX;//滑動變化坐標
      let touchMoveY = e.touches[0].clientY;//滑動變化坐標
      //獲取滑動角度
      let angle = this.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });
    this.data.lists.forEach((v, i)=> {
      v.isTouchMove = false
      //滑動超過30度角 return
      if (Math.abs(angle) > 30) return;
      if (i == index) {
        if (touchMoveX > startX) //右滑
          v.isTouchMove = false
        else //左滑
          v.isTouchMove = true
      }
    })
    //更新數據
    this.setData({
      lists: this.data.lists
    })
  },
  //刪除事件
  del(e) {
    this.data.lists.splice(e.currentTarget.dataset.index, 1)
    this.setData({
      lists: this.data.lists,
      
    })
  },

大家可以根據自己的需求做相應的修改。放下效果圖

7. 微信小程序購物車

購物車頁面邏輯的話，要按業務需求來。我這里簡單提供一個購物車邏輯的demo，新手可以看下購物車功能。

結語

商城類微信小程序項目學習github傳送門

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

第一次寫文章，請給新手多一點鼓勵，給工兵多一點關愛，點個贊－留下您的建議再走吧~

GPU云服務器云服務器微信小程序微信小程序支付微信小程序部署微信小程序搭建

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108035.html

微信小程序-高仿vivo商城

摘要：說明最近微信小程序也是挺火的了，看了微信官方文檔語法和有點相似，正好學過也用寫過一個商城項目，就嘗試用小程序寫個商城，一般來說你學過寫個小程序那是很簡單的，小程序和無非就是路由跳轉傳參傳數據如果你想學可以來看看我用寫的一個商城項目地址在這里說明最近微信小程序也是挺火的了，看了微信官方文檔語法和vue.js有點相似，正好學過vue 也用vue寫過一個商城項目，就嘗試用小程序寫個商城，...

seal_de 2019-08-22 11:19 評論0 收藏0
微信小程序資源匯總

awesome-github-wechat-weapp 是由OpenDigg整理并維護的微信小程序開源項目庫集合。我們會定期同步上的項目到這里，也歡迎各位 UI組件開發框架實用庫開發工具服務端項目實例Demo UI組件 weui-wxss ★1873 - 同微信原生視覺體驗一致的基礎樣式庫zanui-weapp ★794 - 好用易擴展的小程序 UI 庫wx-charts ★449 - 微信小程...

Olivia 2019-08-21 17:48 評論0 收藏0
eweapp：ECShop非官方版微信小程序商城

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

libxd 2019-08-21 16:59 評論0 收藏0