摘要：微信小程序小米事先聲明，這是一個(gè)高仿小米的微信小程序。寫完之后查文檔才發(fā)現(xiàn)，微信小程序官方提供了自定義組件的方法有需要的可以查看微信小程序文檔寫完這個(gè)組件后我總解了一下需要注意的問題選中了的當(dāng)前頁面，再次點(diǎn)擊因該無效。

事先聲明，這是一個(gè)高仿小米Lite的微信小程序。

我呢現(xiàn)在是一個(gè)大三快大四的學(xué)生，這個(gè)小程序花了我很長(zhǎng)時(shí)間，把能寫的功能基本上都寫了。我秉著分享開源的心理，盡量把我寫的這個(gè)小程序怎么寫的，為什么這樣寫，詳細(xì)的告訴大家。為什么是盡量？這是因?yàn)?，我不太?huì)說，可能說的不是很清楚，所以只能盡量.

ok實(shí)現(xiàn)的效果就是這樣。

easy-moke

VSCode

微信小程序開發(fā)者工具

(阿里巴巴矢量圖標(biāo)庫)

├
│  ├
├
│  ├
│  ├
│  ├
│  ├
├
│  ├
│  ├
│  ├
│  ├
│  ├
│  ├
│  ├
│  ├
├
│  └util.js
├
│  └weui.wxss
├
│  ├Api.js
│  ├m(xù)ain.js
│  └mock.js

對(duì)于初學(xué)者來說，可能拿到設(shè)計(jì)圖就立馬寫，其實(shí)這樣很不好，寫出來的代碼會(huì)有很多重復(fù)的代碼，這樣不利于之后的維護(hù)。所以應(yīng)該把一些公用的代碼封裝，之后直接調(diào)用就行了，之后維護(hù)起來也更加的方便。

我們前端想要獲取頁面的數(shù)據(jù)，就需要發(fā)送HTTP請(qǐng)求后端提供給我們的API接口，從API接口中獲取我們想要的數(shù)據(jù)。在微信小程序中，微信官方給我們提供了一個(gè)方法wx.request來請(qǐng)求.

一個(gè)程序，需要的HTTP請(qǐng)求會(huì)很多，如果我們每個(gè)請(qǐng)求都去寫一個(gè)wx.request，這樣寫出來的代碼，看起來會(huì)很冗長(zhǎng)，他人看我們的代碼時(shí)也會(huì)很累，也不利于我們之后的修改。因此為了代碼的整潔，和之后的修改方便。我就把所有的API請(qǐng)求請(qǐng)求封裝在wxapi文件目錄下。

// Api.js
const banners = "https://www.easy-mock.com/mock/5cf9c392006feb28c7eedf28/banners"

const navdata = "https://www.easy-mock.com/mock/5cf9c392006feb28c7eedf28/navdata"

const goodList = "https://www.easy-mock.com/mock/5cf9c392006feb28c7eedf28/goodList"

const category = "https://www.easy-mock.com/mock/5cf9c392006feb28c7eedf28/category"

const findData = "https://www.easy-mock.com/mock/5cf9c392006feb28c7eedf28/findData"

const userData = "https://www.easy-mock.com/mock/5cf9c392006feb28c7eedf28/userData"

const goodDetail = "https://www.easy-mock.com/mock/5cf9c392006feb28c7eedf28/goodDetail"

const QQ_MAP_KEY = "NNFBZ-6DRCP-IRLDU-VEQ4F-TXLP2-PFBEN"

const MAPURL = "https://apis.map.qq.com/ws/geocoder/v1/"

module.exports = {
  banners,
  navdata,
  goodList,
  category,
  findData,
  userData,
  goodDetail,
  QQ_MAP_KEY,
  MAPURL
}

import * as MOCK from "./mock"
import * as API from "./Api"
const request = (url,mock = true,data) => {
  let _url = url
  return new Promise((resolve, reject) => {
    if (mock) {
      let res = {
        statusCode: 200,
        data: MOCK[_url]
      }
      if (res && res.statusCode === 200 && res.data) {
        resolve(res.data)
      } else {
        reject(res)
      }
    } else {
      wx.request({
        url: url,
        data,
        success(request) {
          resolve(request.data)
        },
        fail(error) {
          reject(error)
        }
      })
    }
  });
}
// showLoading
const showLoading = () => {
  wx.showLoading({
    title: "數(shù)據(jù)加載中",
    mask: true,
  });  
}
// 獲取地理位置
const geocoder = (lat, lon) => {
  return request(API.MAPURL,false,{
    location: `${lat},${lon}`,
    key: API.QQ_MAP_KEY,
    get_poi: 0
  })
}
module.exports = {
  getBanners: () => {
    // return request("banners")
    return request(API.banners,false)  //首頁 banners 
  },
  getNavData: () => {
    // return request("navdata")
    return request(API.navdata,false) //首頁 navdata 
  },
  getGoodList: () => {
    // return request("goodList")
    return request(API.goodList,false)  //首頁 商品列表
  },
  getCategroy: () => {
    // return request("category")
    return request(API.category,false)  //分類頁面
  },
  getFindData: () => {
    // return request("findData")
    return request(API.findData,false)  //發(fā)現(xiàn) 頁面
  },
  getUserData: () => {
    // return request("userData")
    return request(API.userData,false)  // 我的 頁面
  },
  getGoodDetail: () => {
    // return request("goodDetail")
    return request(API.goodDetail,false)  //商品詳情
  },
  showLoading,
  geocoder
}

看到這里，可能就會(huì)有一些疑問，為什么我在每個(gè)請(qǐng)求后面都加上了一個(gè)false？

這是因?yàn)?，我在寫這個(gè)微信小程序開始時(shí)，沒有使用easy-mock來模擬http請(qǐng)求數(shù)據(jù)。我是把假數(shù)據(jù)都放在mock.js文件中。然后使用 return request("banners")這種方式就可以獲取我想要的數(shù)據(jù)。

API封裝完了，該怎么調(diào)用呢？我就以首頁的banners數(shù)據(jù)為例

// index.js 
const WXAPI = require("../../wxapi/main")

onLoad: function (options) {
    WXAPI.showLoading()
    this.getBanners()
},
getBanners() {
    WXAPI
    .getBanners()
    .then(res => {
      wx.hideLoading()
      this.setData({
        banners: res.data
      })
    })
},

記住，如果想要發(fā)送HTTP請(qǐng)求數(shù)據(jù)的頁面，都必須加上這一句const WXAPI = require("../../wxapi/main")

開始準(zhǔn)備OK,現(xiàn)在開始寫頁面。第一步要寫的是tabBar部分。

看起來是不是有點(diǎn)奇怪，為什么有點(diǎn)透明的感覺？因?yàn)檫@個(gè)tabBar組件是我自己寫的。

一般來將，直接在把tabBar組件寫在app.json中，就可以了。

但是我覺得不是那么好看，所以就自己擼了一個(gè)tabBar組件出來。

寫完之后查文檔才發(fā)現(xiàn)，微信小程序官方提供了自定義tabBar組件的方法,有需要的可以查看微信小程序文檔

寫完這個(gè)組件后我總解了一下,需要注意的問題.

選中了的當(dāng)前頁面，再次點(diǎn)擊因該無效。

所以我在app.js中存入了一個(gè)page屬性，來存儲(chǔ)當(dāng)前頁面，然后在點(diǎn)擊事件goToPage()方法中加入判斷去解決。

  
  
    
    首頁
  
  
  
    
    分類
  
  
  
    
    發(fā)現(xiàn)
  
  
  
    
    購(gòu)物車
  
  
  
    
    我的
  

// components/tabbar/tabbar.js
// 全局里面存了一個(gè)page 表示當(dāng)前 路由
const app =  getApp();
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    // 是否選中
    on:{
      type: String,
      value: ""
    }
  },

  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {
  },

  /**
   * 組件的方法列表
   */
  methods: {
    // 跳轉(zhuǎn)到相應(yīng)的頁面
    // 加了一個(gè)判斷
    // 因?yàn)槿绻F(xiàn)在顯示的是當(dāng)前頁面就不需要再跳轉(zhuǎn)
    goToPage(e) {
      let page = e.currentTarget.dataset.page || "user";
      if(app.globalData.page === page) {
        return ;
      }
      wx.redirectTo({
        url: `/pages/${page}/${page}`,
      });
      app.globalData.page = page;
    }
  }
})

/* components/tabbar/tabbar.wxss */
.tabbar {
  width: 100%;
  height: 100rpx;
  background-color: #ffffff;
  display: flex;
  position: fixed;
  bottom: 0;
  font-size: 26rpx;
  z-index: 99;
}
.shouye,.fenlei,.faxian,.gouwuche,.wode {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  opacity: 0.5;
}
.icon {
  height: 60rpx;
}
.on {
  color:#f96702;
}

關(guān)于如何使用的問題，只需要在，需要tabBar功能的頁面底部加上就可以.

比如index頁面

記得在json中引入組件

{
  "usingComponents": {
    "goodList": "../../components/goodList/goodList",
    "tabbar": "../../components/tabbar/tabbar"
  }
}

tabBar組件中需要圖標(biāo)，我使用的是阿里的圖標(biāo)庫

如何使用？

先去圖標(biāo)庫中找到你所需要的圖標(biāo)，加入購(gòu)物車。

然后添加至項(xiàng)目，自己新建一個(gè)就可以了。

在然后下載之本地，把其中的CSS文件里面所有的內(nèi)容都復(fù)制到wxss文件中就行了.

這個(gè)組件很簡(jiǎn)單，定義出來就可以直接使用，并且修改顏色和大小.

properties: {
    type: {
      type: String,
      value: ""
    },
    color: {
      type: String,
      value: "#000000"
    },
    size: {
      type: Number,
      value: "45"
    }
  },

在首頁中存在很多這樣的商品列表，一個(gè)一個(gè)寫，這樣寫出來的代碼會(huì)導(dǎo)致首頁的代碼顯得很多，并且不好維護(hù)，所以我就封裝成了一個(gè)組件.

  
  
    
  
  
  
    
    
      {{name}}
    
    
    
      {{brief}}
    
    
    
      ￥{{price}}
      ￥{{oldPrice}}
    
  

properties: {
    // 圖片鏈接
    url: {  
      type: String,
      value: ""
    },
    // 名稱
    name: {
      type: String,
      value: ""
    },
    // 信息
    brief: {
      type: String,
      value: ""
    },
    // 新的價(jià)格
    price: {
      type: String,
      value: ""
    },
    // 舊的價(jià)格
    oldPrice: {
      type: String,
      value: ""
    }
  },

/* components/goodList/goodList.wxss */

.goodList-good {
  position: relative;
  width: 100%;
  height: 100%;
}
.goodList-good-img {
  width: 100%;
  height: 312rpx;
  position: relative;
}
.goodList-good-img image {
  width: 100%;
  height: 100%;
}
.goodList-good_detail {
  padding: 26rpx 23rpx;
}
.good_detail_name {
  width:100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.good_detail_brief {
  width:100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  font-size: 25rpx;
  color: #8c8c8c;
}
.good_detail_price {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}
.good_detail_price .price {
  color: #a36d4a;
  font-size: 28rpx;
  padding-right: 16rpx;
}
.good_detail_price .oldPrice {
  font-size: 24rpx;
  color: #8c8c8c;
  text-decoration: line-through;
}

你們會(huì)發(fā)現(xiàn)，我的邊框?yàn)槭裁茨敲醇?xì)。

初學(xué)者，可能會(huì)說，0.5px邊框，不就是border: 0.5px嗎，其實(shí)這是錯(cuò)的。

瀏覽器會(huì)把任何小于1px的邊框都解析成1px,所以你寫0.5px其實(shí)瀏覽器會(huì)解析成1px,這樣就實(shí)現(xiàn)不了效果。

其實(shí)也很簡(jiǎn)單，使用偽類去畫。

例如，goodList組件的右部邊框.

在index頁面的html中,我在包裹goodList的view標(biāo)簽的class中加上了rightBorder這個(gè)類來表示畫出上邊框。

.rightBorder::after {
  content: "";
  position: absolute;
  height: 200%;
  width: 1rpx;
  right: -1rpx;
  top: 0;
  transform-origin: 0 0;
  border-right: 1rpx solid#e0e0e0;
  transform: scale(.5);
  z-index: 1;
}

其實(shí)畫0.5px邊框就記住。

使用偽類，并且 position: absolute;

如果想畫上下的邊框，就把width設(shè)置成200%,,左右就把height設(shè)置成200%

然后使用transform: scale(.5); 寬高都縮小0.5倍就成了0.5px邊框.

其它還有一些 細(xì)節(jié)問題就按照所需寫就行。

只是我的頁面中的一個(gè)列表信息，這個(gè)很簡(jiǎn)單

  
  
    {{List.text}}
  
  
    ({{List.state}})
  

/* components/userList/userList.wxss */
.main {
  width: 100%;
  height: 120rpx;
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 40rpx;
  box-sizing: border-box;
}
.main image {
  width: 80rpx;
  height: 80rpx;
}
.main .text {
  font-size: 32rpx;
  padding: 0 10rpx 0 5rpx;
}
.main .state {
  font-size: 26rpx;
  color: #8c8c8c;
}

properties: {
    List: {
      type: Object
    }
  },

我這里引入的是weui組件的搜索樣式。如何用?

下載WEUI小程序版，可以在微信開發(fā)者工具中打開。

(推薦)把styly文件夾下的weui.wxss 放到自己項(xiàng)目中weui文件夾下

在app.wxss中@import "./weui/weui.wxss".就可以使用了

這是微信小程序提供的一個(gè)組件swiper,微信小程序開發(fā)者文檔

swiper和swiper-item組合起來就可以實(shí)現(xiàn),一些配置信息，請(qǐng)查看官方文檔

具體代碼

 data: {
    banners: [],
    indicatorDots: true,
    autoPlay: true,
    interval: 3000,
    duration: 1000,
    navdata: [],
    goodList: [],
    goodListOne: {},
    name:"",
  },

在商城小程序中經(jīng)常要做一個(gè)這樣的功能.例如:

功能要求:

點(diǎn)擊左邊的商品列表，右邊的商品信息會(huì)滑動(dòng)到對(duì)應(yīng)位置.

滑動(dòng)右邊的商品信息，左邊的商品列表顯示的高亮?xí)?duì)應(yīng)發(fā)生變化.

功能要求并不難，但是對(duì)于初學(xué)者而言，可能會(huì)有些問題。我就直接說功能該怎么做

首先：分析一下，頁面結(jié)構(gòu)是左右布局。并且兩邊都可以滑動(dòng).所以可以使用微信給我們提供的

scroll-view組件.兩個(gè)組件就可以采用float，分布在左右兩邊.

  
  
    
      {{item[0].name}}
    
  
  
  
    
      
        
          {{item[0].name}}
        
        
          
            
              
              
                {{product.desc}}
              
            
          
        
      
    
  

/* miniprogram/pages/category/category.wxss */
/*定義滾動(dòng)條高寬及背景 高寬分別對(duì)應(yīng)橫豎滾動(dòng)條的尺寸*/
::-webkit-scrollbar
{
width: 0px;
height: 0px;
background-color: pink;
}
.categroy-left {
  height: 100%;
  width: 150rpx;
  float: left;
  border-right: 1px solid #ebebeb;
  box-sizing: border-box;
  position: fixed;
  font-size: 30rpx;
  padding-bottom: 100rpx;
  box-sizing: border-box;
}
.categroy-left .cate-list {
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  border: 2px solid #fff;
}
.categroy-left .cate-list.on {
  color: #ff4800;
  font-size: 34rpx;
}
/* 右邊的列表 */
.categroy-right {
  width: 600rpx;
  float: right; 
  height: 1334rpx;
  /* height: 100%; */
  padding-bottom: 100rpx;
  box-sizing: border-box;
  overflow: hidden;
}
.right-title {
  width: 100%;
  text-align: center;
  position: relative;  
  padding-top: 30rpx;
  /* font-size: 30rpx; */
  padding-bottom: 30rpx;
}
 .right-title text::before, .right-title text::after {
  content: "";
  position: absolute;
  width: 60rpx;
  /* height: 1px; */
  top: 50%;
  border-top: 1px solid #e0e0e0;
  /* transform: scale(.5); */
}
.right-title text::before { 
  left: 30%;
}
.right-title text::after {
  right: 30%;
}
.right-list {
  /* height: 100%; */
  background-color: #fff;
}
.right-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}
.right-content .list-detail {
  flex-shrink: 0;
  width: 33.3%;
  height: 100%;
  font-size: 26rpx;
  text-align: center;
  
}
.right-content .list-detail image {
  width: 120rpx;
  height: 120rpx;
  padding: 10rpx;
  /* background-color: pink; */
}

這個(gè)功能的難點(diǎn)就在于js邏輯

先貼出data中需要的數(shù)據(jù)

data: {
    categroy:[],    //商品信息
    curIndex: "A",  //當(dāng)前的選中的標(biāo)簽
    toView: "A",    //去到的標(biāo)簽
    // 存入每個(gè)list的高度疊加
    heightArr: [],
    // 最后一個(gè)list,就是最后一個(gè)標(biāo)簽的id
    endActive: "A"
  },

這一功能很簡(jiǎn)單就能實(shí)現(xiàn)

只需要在右邊scroll-view組件中添加事件scroll-into-view="{{toView}}",toView就是商品顯示的id

注意，右邊每個(gè)商品信息，頁面渲染時(shí)必須加上id屬性

然后左邊的scroll-view組件只需添加一個(gè)點(diǎn)擊事件去修改toView的值就行了

// 點(diǎn)擊左邊標(biāo)簽要修改的信息
  switchTab(e) {
    this.setData({
      curIndex: e.target.dataset.index,
      toView: e.target.dataset.index
    })
  },

首先需要計(jì)算出 右邊商品每一塊占據(jù)的高度,并且存入數(shù)組中,可以放入onReady生命周期中

// 計(jì)算出右邊每個(gè)商品占據(jù)的高度
  getPageMessage() {
    // console.log(4)
    let self = this
    let heightArr = []
    let h = 0
    const query = wx.createSelectorQuery()
    query.selectAll(".right-list").boundingClientRect()
    query.exec( res => {
      res[0].forEach( item => {
        h += item.height
        heightArr.push(h)
      })
      self.setData({
        heightArr: heightArr
      })
    })
  },

在右邊的scroll-view組件中加上事件。bindscroll="scrollContent,這是scroll-view提供的事件,在滑動(dòng)時(shí)就會(huì)觸發(fā).

// 頁面滑動(dòng)時(shí)觸發(fā)
  scrollContent(e) {
    const scrollTop = e.detail.scrollTop
    const scrollArr = this.data.heightArr
    const length = scrollArr.length - 1
    let endChar = String.fromCharCode(65 + length)
    let curChar = this.getCurrentIndex(scrollTop)
    if(this.data.endActive != endChar) {
      this.setData({
        curIndex: curChar
      })
    } else {
      this.setData({
        endActive: "A"
      })
    }
  },

// 判斷curIndex應(yīng)該是那個(gè)
  getCurrentIndex(scrollTop) {
    const scrollArr = this.data.heightArr
    let find = scrollArr.findIndex(item => {
      // 提前10rpx觸發(fā)效果
      return scrollTop < item - 10
    })
    let curChar = String.fromCharCode(65 + find)
    return curChar
  },

以上就可以實(shí)現(xiàn)所有的功能要求了。

但是這樣的滑動(dòng)并不是很完美，右邊滑動(dòng)到最下面，左邊高亮卻不是最后一個(gè)

相對(duì)完美效果就是這樣

想要完美一點(diǎn)就要在，右邊scroll-view添加一個(gè)事件：bindscrolltolower="scrollEnd"

// 頁面滑動(dòng)到底部觸發(fā)
  scrollEnd() {
    const scrollArr = this.data.heightArr
    const length = scrollArr.length - 1
    let endChar = String.fromCharCode(65 + length)
    this.setData({
      curIndex: endChar,
      endActive: endChar
    })
  },

想要實(shí)現(xiàn)這樣的效果并不困難。

邏輯順序: 首頁點(diǎn)擊商品信息 -> 商品詳情頁面顯示對(duì)應(yīng)的商品詳情信息 -> 購(gòu)物車頁面顯示商品購(gòu)買的商品信息. -> 修改之后，商品詳情頁面顯示修改的信息。

想要實(shí)現(xiàn)這樣的功能，必須有一個(gè) id 在頁面跳轉(zhuǎn)時(shí)，傳入給跳轉(zhuǎn)的頁面，跳轉(zhuǎn)的頁面再通過id值獲取頁面所需的數(shù)據(jù)

例如：首頁 -> 商品詳情頁

這是一條商品的列表的信息,通過點(diǎn)擊事件bindtap="goDetails"，跳到對(duì)應(yīng)的頁面.

goDetails(e) {
    const id = e.currentTarget.dataset.id
    wx.navigateTo({
      url: `/pages/goodDetails/goodDetails?id=${id}`,
    });
  },

商品詳情頁:

傳入的id值可以再onLoad生命周期的options參數(shù)上獲取

onLoad: function (options) {
    WXAPI.showLoading()
    // 獲取用戶的地址信息
    const address = wx.getStorageSync("Address");
    this.setData({
      id: options.id,
      address
    })
    this.getGoodDetail()
  },

我是把數(shù)據(jù)直接存在本地緩存中(也可以直接存入到云數(shù)據(jù)庫中)，使用的是 wx.setStorage()

在本地存入了兩個(gè)數(shù)據(jù)，一個(gè)是所有購(gòu)買的商品信息，一個(gè)是總的商品購(gòu)買數(shù)量

// 添加到購(gòu)物車
  toAddCart() {
    let cartData = wx.getStorageSync("goods") || [];    
    let data = {
      id: this.data.id,
      name: this.data.goodData.name,
      memory: this.data.memory,
      color: this.data.color,
      price: this.data.price,
      num: this.data.selectNum,
      img: this.data.imgSrc,
      select: true
    }
    // wx.removeStorageSync("goods");
    cartData.push(data)
    const allNum =this.getAllNum(cartData)
    wx.setStorage({
      key: "goods",
      data: cartData,
      success: (res) => {
        console.log(res)
        let pageIndex = getCurrentPages()
        let backIndex = pageIndex.length - 2
        wx.navigateBack({
          delta: backIndex
        })
      },
      fail: () => {},
      complete: () => {}
    });
    // 存儲(chǔ)數(shù)量到storage
    wx.setStorageSync("allNum", allNum);
    // 寫到外面就可以讓showToast 顯示在前一個(gè)頁面
    setTimeout(()=>{
      wx.showToast({
        title: "已加入購(gòu)物車",
        icon: "success",
        duration: 2000
      });
   },500)
  },
  // 獲取所有的數(shù)量
  getAllNum(cartData) {
    return cartData.reduce((sum, item) => {
      return sum + (+item.num)
    },0)
  },

實(shí)現(xiàn)這個(gè)功能只需要加一個(gè)狀態(tài)，點(diǎn)擊時(shí)就修改狀態(tài)的值，并且修改相關(guān)渲染的數(shù)據(jù)就行。

data: {
 state: "details_img", //判斷概述 參數(shù)
}

    
      
        概述
      
      
        參數(shù)
      
    
    
      
          
      
    
  

// 改變概述和參數(shù)
  changeState() {
    let state = this.data.state
    if(state === "details_img") {
      state = "param_img"
    } else {
      state = "details_img"
    }
    this.setData({
      state
    })
  },

對(duì)比一下上面兩張圖的區(qū)別.

在購(gòu)物頁面中選的商品數(shù)量和具體的商品信息，之后跳轉(zhuǎn)回商品詳情頁面中,對(duì)應(yīng)的數(shù)據(jù)會(huì)修改

      已選
      
        {{default_change.name}}
        {{default_change.memory}}
        {{default_change.color}}
        × {{default_change.num}}
      
      
    

    
    {{allNum}}
  

上面時(shí)兩塊修改的html結(jié)構(gòu)

在購(gòu)物頁面點(diǎn)擊確認(rèn)之后，我默認(rèn)就把商品添加到購(gòu)物車中，并且位于數(shù)據(jù)的最后一條

返回商品詳情頁面時(shí)，會(huì)重新觸發(fā)onShow生命周期的函數(shù)。

所以我只需要，在onShow中觸發(fā)修改方法就行.

// 改變默認(rèn)的版本數(shù)據(jù) default_change
  changeDefauleChange() {
    const goods = wx.getStorageSync("goods") || [];
    if(goods.length === 0) {
      return
    }
    const id = this.data.id
    const default_change = goods[goods.length - 1]
    let memory = default_change.memory.toString()
    memory = memory.substring(0,memory.length - 4)
    default_change.memory = memory
    this.setData({
      default_change
    })
  },

這一個(gè)三角形是使用CSS畫出來的，并不是圖標(biāo)。

使用CSS畫出一個(gè)三角形，也不是那么困難。使用的是偽類和border屬性

.right:before,
.right:after {
  content: "";
  position: absolute;
  top: 35%;
  right: 0;
  border-width: 8px;
  /* transform: translateY(10000rpx); */
  border-color: transparent transparent transparent transparent;
  border-style: solid;
  transform: rotate(90deg);
}

.right:before {
  border-bottom: 8px #aaaaaa solid;
}

.right:after {
  right: 1px;
  /*覆蓋并錯(cuò)開1px*/
  border-bottom: 8px #fff solid;
}

可以直接使用微信小程序提供的picker組件，具體配置請(qǐng)查看文檔

先搜索騰訊地圖，并且注冊(cè)開發(fā)者信息，申請(qǐng)一個(gè)密鑰key.

// 獲取地理位置
const geocoder = (lat, lon) => {
  return request(API.MAPURL,false,{
    location: `${lat},${lon}`,
    key: API.QQ_MAP_KEY,
    get_poi: 0
  })
}

然后把密鑰復(fù)制，因?yàn)槲曳庋b了所有的API接口。所以使用了 API.QQ_MAP_KEY代替，這里就填寫申請(qǐng)的密鑰就行.

想要獲取用戶的經(jīng)緯度信息，可以使用wx.getLocation()，就可以獲取用戶的經(jīng)緯度信息了.

getLocation() {
    wx.getLocation({
      type: "gcj02",
      success: this.getAddress,
      fail: () => {
        this.openLocation()
      }
    })
  },
  getAddress(res) {
    let { latitude: lat, longitude: lon} = res
    WXAPI.geocoder(lat, lon)
    .then(res => {
      if(res.status !== 0 || !res.result) {
        return
      } 
      let {address_component
      } = res.result
      const Address = {
        city: address_component.city,
        district: address_component.district
      }
      wx.setStorageSync("Address", Address);
    })
  },

因?yàn)槲椅醋層脩羰跈?quán)，所以直接把獲取的地理位置，保存在本地storage中.

獲取的地理位置，就可以在商品詳情頁面的送至顯示出來

做這個(gè)項(xiàng)目的過程來說是快樂的，沒有使用云函數(shù)(頁面數(shù)據(jù)并不多，我覺得不需要就可以寫出來了)，所以總共加起來寫的時(shí)間也很短，不到一個(gè)星期就寫完了。寫完之后的那一刻的成就感也很好。如果你覺得這篇文章有幫到你的地方，不妨給個(gè)贊吧！同時(shí)也非常希望在下方看到給出的建議！最后奉上源碼.如果有需要就自取吧!

最后，說點(diǎn)題外話，因?yàn)槲沂?020屆的畢業(yè)生，現(xiàn)在面臨實(shí)習(xí)壓力。因?yàn)樾枰挄r(shí)間去看面試題，所以后面寫的一段文章，我只是簡(jiǎn)要的把重要的功能邏輯寫了出來，如果寫的不清楚，請(qǐng)見諒。