小程序商城開發教程入門

責任編輯:福建福彩快3开奖结果 //www.yhrpv.com/



微店的簡潔,無需下載app很簡單,讓很多傳統電子商務逐漸開始發展微智能,現在福建福彩快3开奖结果問世。 

只要用戶掃描或搜索應用程序,福建福彩快3开奖结果就能滿足傳統電子商務的需求。 

讓我們以一個普通的家具商城小程序為例介紹小程序商城開發教程的介紹?  

福建福彩快3开奖结果教程入口  

開發環境:WXMLHTML,WXSSCSS,Javascript   

開發工具:vscode,微信開發者工具  

開發過程:下載微信開發人員工具后,您將在注冊后擁有自己的AppID。微信小程序有官方的微信小程序開發文檔。  

代碼實現,主頁上的東西不多,主要是布局問題。 

 Wxss代碼:

img-box image{

  width: 100%;

  height: 100%;

}

.img-box image:after{

  content: ;

  position: absolute;

  bottom: 0;

  width: 100%;

  color: #fff;

  padding: 50px 20px;

}

家具的輪播效果實現

小程序的輪播實現使用了swimper組件?;槭油既萜骶哂兄副甑?,自動播放,setinterval和其他屬性,可以設置為自動播放和時間間隔。 

插入的圖像可以用wx:for循環播放。  

導航跳轉問題  

點擊購物車后,加入綁定事件應該跳到另一個頁面,但沒有效果,也沒有錯誤。我以為我的拼寫或路徑有問題,但檢查后我沒有任何問題。 

發現了一個坑。 

這里跳轉是tabBar頁面,根據默認跳轉是不允許的,檢查開發文檔以找到問題。  

解決方案:用switchTab替換navigationTo。有很多方法可以跳躍。您可以查看開發文檔。  

如何控制購買的商品數量并計算產品添加到購物車后的價格 

我想要的確實是點擊圖片輸入詳細信息,然后點擊購物車將其保存到后臺的購物車。但是,由于自學知識有限,后端還沒有學到,只有一個綁定事件可以添加到購物車。  

接下來,采取主題:如何控制購物車購買數量并計算總價格? 

首先在js中定義一個cart空數組,我們首先將這個值賦給這個空數組,然后取這個值。 

之后,項目的狀態默認為選定狀態。只需單擊一下,狀態就可以更改為取消。 

不多說,然后計算所選商品的總價。

js代碼:


selectList(e){

    let selectAllStatus = this.data.selectAllStatus;

    const index=e.currentTarget.dataset.index;

    let carts=this.data.carts;

    const selected=carts[index].selected;

    carts[index].selected=!selected;

    selectAllStatus = carts[index].selected;

    // if( carts[index].selected=!selected){

    //   selectAllStatus:false;

    // }

    this.setData({

      carts,  

      selectAllStatus,

    });

    this.getTotalPrice();

  },

  deleteList(e) {

    const index = e.currentTarget.dataset.index;

    let carts = this.data.carts;

    carts.splice(index,1);

    this.setData({

      carts: carts

    });

    if(!carts.length){

      this.setData({

        hasList: false

      });

    }else{

      this.getTotalPrice();

    }

  },

  addCount (e){

    const index = e.currentTarget.dataset.index;

    let carts = this.data.carts;

    let num = carts[index].num;

    num++;

    carts[index].num = num

    this.setData({

      carts

    })

    this.getTotalPrice();

  },

  minuCount(e){

    const index = e.currentTarget.dataset.index;

    let carts = this.data.carts;

    let num = carts[index].num;

    if(num<=1) return false;

    num--;

    carts[index].num = num

    this.setData({

      carts

    });

    this.getTotalPrice();

  },

  selectAll(e){

    let selectAllStatus = this.data.selectAllStatus;

    selectAllStatus = !selectAllStatus;

    let carts =this.data.carts;

    for(let i=0;i

      if( carts[i].selected=!selectAllStatus){

        selectAllStatus:false

      }

      carts[i].selected=selectAllStatus;

      

    }

    this.setData({

      carts,

      selectAllStatus

    })

    this.getTotalPrice();

  },

  getTotalPrice(){

    let carts = this.data.carts;

    let total = 0;

    for(let i =0;i

      // total += carts[i].num *carts[i].price;

      if(carts[i].selected){

        total+= carts[i].num * carts[i].price;


      }

    }

    this.setData({

      totalPrice:total.toFixed(2)

    })

  }


如何獲取登錄微信的用戶的頭像和信息


使用wx.getUserInfo直接獲取微信頭像,昵稱。


我們在使用小程序wx.login API進行登錄的時候,直接使用wx.getUserInfo是不能獲取更多的信息的,如微信用戶的openid。 我這里是用的第一種方法


js代碼:


onLoad: function () {

    if (app.globalData.userInfo) {

      this.setData({

        userInfo: app.globalData.userInfo,

        hasUserInfo: true

      })

    } else if (this.data.canIUse){

      // 由于 getUserInfo 是網絡請求,可能會在 Page.onLoad 之后才返回

      // 所以此處加入 callback 以防止這種情況

      app.userInfoReadyCallback = res => {

        this.setData({

          userInfo: res.userInfo,

          hasUserInfo: true

        })

      }

    } else {

      // 在沒有 open-type=getUserInfo 版本的兼容處理

      wx.getUserInfo({

        success: res => {

          app.globalData.userInfo = res.userInfo

          this.setData({

            userInfo: res.userInfo,

            hasUserInfo: true

          })

        }

      })

    }

  },

  getUserInfo: function(e) {

    console.log(e)

    app.globalData.userInfo = e.detail.userInfo

    this.setData({

      userInfo: e.detail.userInfo,

      hasUserInfo: true

    })

  }


這個小程序還有一些功能還沒有實現,比如購物車,用戶信息的保存在后臺的問題。更多微信小程序商城開發可以關注本網站,謝謝。




澤群一站式網絡服務機構竭誠為您提供:

福建福彩快3开奖结果,福建福彩快3开奖结果,福建福彩快3开奖结果,福建福彩快3开奖结果,福建福彩快3开奖结果,福建福彩快3开奖结果,福建福彩快3开奖结果,福建福彩快3开奖结果,SEO優化,模板建站,云服務等服務

相關資訊