目錄

????開講啦！！！！????蘇州程序大白????

?博主介紹

? 個人主頁:蘇州程序大白
?作者介紹：中國DBA聯盟(ACDU)成員，CSDN全國各地程序猿（媛）聚集地管理員。目前從事工業自動化軟件開發工作。擅長C#、Java、機器視覺、底層算法等語言。2019年成立柒月軟件工作室。
?如果文章對你有幫助，歡迎關注、點贊、收藏（一鍵三連）和C#、Halcon、python+opencv、VUE、各大公司面試等一些訂閱專欄哦
? 有任何問題歡迎私信，看到會及時回復
? 微信號：stbsl6，微信公眾號：蘇州程序大白
? 想加入技術交流群的可以加我好友，群里會分享學習資料

?前言

?講講專享小程序有什么優勢？

• 1、方便快捷：與其他購物平臺的APP、網站相比，小程序有一個很大的優勢——方便快捷。例如在使用其他購物平臺的APP時，不僅需要下載、安裝，而且還需要注冊、登陸，操作步驟繁瑣。即使不使用APP，直接登錄購物平臺的網站，也需要經過注冊、登錄的環節。但微信小程序不同，由于小程序是依附在微信上面使用的，因此無需下載和安裝，此外，在登陸時，用戶還可以選擇在利用微信賬號來登錄小程序，一鍵登陸，操作簡單、快捷。

• 2、入口眾多：小程序商城本身作為小程序的一個種類，具有很多開放入口，比如：附近的小程序、小程序碼、微信搜一搜、群分享、好友分享、公眾號關聯、推送等五十多個的入口。這些入口有助于企業更好的獲取流量，從而進行轉化、變現。

• 3、微信助力：相信大家都知道，小程序商城是基于微信運行的，這本身就是一個很大的優勢。如果是運營一個購物商城的網站或是APP，首先要做到的就是有用戶基數，而一個新平臺，獲取流量的難度是非常大的。但微信小程序，背靠微信，坐擁10億用戶，在這些用戶中，一定會有很多有相關需求的用戶。再加上附近的小程序、搜索發現小程序、公眾號關聯等，小程序可以非常輕松的獲取到大量流量。

• 4、場景營銷：上述提到，小程序擁有很多的入口，其中包括線上入口和線下入口，而小程序商城主要作為購物使用，所以，線下的入口很重要。小程序商城很多的使用頻率都是線下，再加上其擁有的營銷屬性，使得很多的商家解決了很多業務上的難題，更是大大節省了人力、物力、財力等成本，很大的提升了店鋪的業務效率。

• 5、開發成本低：企業進行微信小程序開發，既可以解決開發成本問題，又可以縮短開發周期，并且還可以利用微信已存在的營銷趨勢，用戶可以通過掃描二維碼進入。

?小程序文件分析

• 1、WXML WXSS JavaScript JSON。

• 2、page首頁log日志。

• 3、頂部標題的顏色必須為block和white。

tabBar

表示地址的tab欄【官網地址】

注意事項

• 在使用bool類型 充當類型屬性時，在屬性值的位置前面不能加空格。

• 列表循環` wx:for=”數組或者對象”。

• 只有一層循環時可以將一下省略。

• 列表循環wx:for-item="循環項的名稱"wx:for-index=’index’`。

• wx:key=”唯一的值”。

• 條件渲染wx:if wx:elif wx:else。

• hidden 是添加樣式使用。

• 對象循環 wx:for="{{對象/數組}}" wx:for-item="對象的值" wx:for-index="循環項目的屬性"。

<!--pages/demo/demo.wxml--><view>輪播圖</view><!-- image width 700px height 277px   x/1 = 277/700   x=277/700--><swiper class="swiper" autoplay interval="1000" circular indicator-dots>  <swiper-item> <image mode="widthFix" src="https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/175759/5/697/309624/605fa953Eaddcc402/30b0ea12dc5cc42c.jpg!cr_1125x445_0_171!q70.jpg.dpg" alt=""/></swiper-item>  <swiper-item> <image mode="widthFix" src="https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/143564/28/18582/124317/60667523E2a4840dd/301bbb3de0243db8.jpg!q70.jpg.dpg" alt=""/></swiper-item>  <swiper-item> <image mode="widthFix" src="https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/155887/8/16711/104572/60534627Eb979dc75/cc416de39d2e83b0.jpg!cr_1125x445_0_171!q70.jpg.dpg" alt=""/></swiper-item></swiper><!-- 單選框 --><radio-group bindchange="bindChange">  <radio name="sex" value="male">男</radio>  <radio name="sex" value="female">女</radio>  <view wx:if="{{gerder == "male"}}">-您選擇的按鈕為男</view>  <view wx:elif="{{gerder == "female"}}">-您選擇的按鈕為女</view>  <view wx:else="{{gerder == ""}}">-您選擇的按鈕為</view></radio-group><!-- 復選框 --><view>  <checkbox-group bindchange="bandelItemchange">    <checkbox wx:for="{{fruit}}" wx:key="id" value="{{item.value}}">      {{item.name}}    </checkbox>    <view>選中的是：{{checkList}}</view></checkbox-group></view><!-- 組件 --><Tabs></Tabs><rich-text class="" nodes="{{html}}">  </rich-text>  <view>input標簽</view><input type="text" bindinput="handleInput"/><view class="btn">  <button size="mini" bindtap="handeltap" data-opertation="1">+</button><button size="mini" bindtap="handeltap" data-opertation="{{-1}}">-</button></view><image mode="widthFix" src="https://cdn.jsdelivr.net/gh/Rr210/image@master/hexo/4/wallhaven-oxxw29.webp"></image><view>{{num}}</view><view>----------------------------</view><text>測試頁面</text><view>"text"相當于web中的span元素，view相當于web中的div標簽塊級元素</view><view>測試wx:for標簽</view><view>---------------------</view><view>列表循環</view><view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="username">  屬性：{{item.id}}  索引: {{index}}  名稱：{{item.name}}  年齡：{{item.age}}  年齡：{{item.msg.con}}</view><view>對象循環</view><view wx:for="{{msg}}" wx:for-item="value" wx:for-index="key" wx:key="id">  {{value}}  {{key}}</view><view>---------------------</view><view>測試 wx:if</view><view wx:if="{{false}}">1</view><view wx:elif="{{false}}">2</view><view wx:elif="{{true}}">3</view><view>---------------------</view><view>測試 hidden</view><view hidden="{{true}}">1</view><view hidden>1</view>

?事件綁定

1、nput標簽綁定input事件 使用bindinput屬性。

2、通過事件源對象來獲取input輸入的值 e.detail.value。

3、與data同級 并且可以將input中輸入的值與data中定義的屬性綁定，使用this.setData({屬性:e.detail.value})。

4、加入一個點擊事件 bindtap屬性，無法直接傳參 通過自定義屬性的方法來傳參。

• 在自定義屬性時要注意 如果傳遞的參數為數字，應該加{{}}使得傳遞的參數為number，不加為string。

• 注意input輸入后的值為字符型，需要將輸入的值轉換。

?圖片問題

1、比例尺的關系 1px =750rpx*設置的尺寸大小/page的寬度。

2、text 才能實現長按復制selectable decode解碼和復制。

3、image中屬性mode aspectFit是長邊能顯示出來 aspecFill使得短邊顯示出來 widthFix按照比例縮放。

4、圖片支持懶加載lazy-load 布爾值。

?輪播圖swiper

1、輪播項swiper-item標簽里面放入圖片swiper 存在默認高度 150px。

2、高度無法實現由內容撐開。

3、圖片使用mode=“widthFix”。

4、indicator-dots 顯示面板指示點 indicator-color`` indicator-active-color。

5、autoplay自動輪播 5秒一次。

6、interval可以切換時間間隔。

7、circular 是否循環輪播。

8、給圖片加100%寬度 ，swipter的高度自適應 100vw * 圖片的寬度 / 高度。

navigator 導航

1、url 表示要跳轉的頁面路徑。

2、相當于塊級元素。

3、target 跳轉小程序，默認當前小程序 可選值 self/minProgram。

4、open-type 跳轉方式。

rich-text 富文本標簽

1、nodes 接受字符串。

2、對象數組。

button標簽

1、size屬性 default/ mini。

2、open-type。

icon圖標

1、type類型。

2、size 大小 默認23。

3、color 改變顏色。

radio/checkbox

• radio-ground 綁定change事件 bindchange。

• checkbox-ground綁定事件change。

?自定義組件

1、在使用自定義組件時 要注意 在使用函數方法時要寫到methods中。

2、并且將被使用的組件寫到需要渲染頁面的json文件中。

3、父組件向子組件 傳遞數據 通過自定義屬性來傳遞properties要接受的數據名稱· type/value·類型和值。

4、子向父傳遞 this.triggerEvent("名稱",傳遞的參數) 傳遞的時候要注意 傳遞的參數是什么形式，相對應。

5、子傳父,在子中定義一個要傳遞的事件方法和參數，在父中對事件方法進行綁定，然后在父中使用方法。

6、數據在誰上，誰有權修改。

    handleitemtap(e){      // 將點擊的事件加入自定義屬性      // console.log(e);      const {index} = e.currentTarget.dataset      let {tabs} = this.data      // console.log(index);      // 對以上的導航數據使用foreach進行遍歷      tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false)      this.setData({        tabs      })    }-------------------<view class="nav">  <view bindtap="handleitemtap" wx:for="{{tabs}}" wx:key="id" class="title_item {{item.isActive?"active":""}}" data-index="{{index}}">{{item.name}}</view></view>

slot標簽其實就是一個占位符，等到父組件調用子組件的時候，在傳遞標簽。

?生命周期

// app.jsApp({  // 表示在應用第一次啟用時就執行  onLaunch(e){    console.log(e);    console.log("launch");    // 不能觸發    // wx.navigateTo({    //   url: "url",    // })  },  // 應用被用戶看到時執行  onShow(e){    // 對數據的重置    console.log("onshow");  },  // 應用被隱藏的時候所執行的  onHide(e){    // 清除定時器    console.log("onHide");  },  // 應用發生錯誤時執行  onError(err){    console.log("onError");     // console.log(err);  },  // 應用找不到頁面時觸發  onPageNotFound(e){    // 無法跳轉到tabbar頁面，如果頁面不存在可以重定向到第二個頁面    console.log("onPageNotFound");    wx.navigateTo({      url: "/pages/demo/demo",    })  }})

?頁面生命周期

?項目制作

promise封裝函數

export const request=(params)=>{    return new Promise((resolve,reject)=>{        wx.request({          ...params,          success:(result)=>{              resolve(result)          },          fail:(err)=>{              reject(err)          }        });              })}request({url:"https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata"})    .then(result=>{      this.setData({            swiper_list: result.data.message          })    })

?緩沖事件

1、設置一個緩沖事件，獲取本地的存儲中的數據進行判斷。

2、·{time:Date.now(),data:[...]}。

3、web: localStorage.setItem("key","value") localStorage.getItem("key")。

4、優化接口的路徑 使用prominse中的params將url解構出來。

?es7 async語法

• 解決回溯的最終方案。

• async。

?觸底事件

1、onReachBottom 頁面觸底事件。

2、頁面上拉觸底事件的處理函數。觸底事件，當頁面觸底之后，在進行請求，并且將請求到的數據在追加到原來的數組中，并且在觸底后還要進行判斷如果總數據的頁數>=當前的頁數，要返回wxwx.showToast({title: ‘title’,}),否則繼續請求。

// pages/goods_list/goods_list.jsimport { request } from "../../request/index.js";Page({  /**   * 頁面的初始數據   */  data: {    // 將這些數據導入到子文件中    tabs: [{        id: 0,        value: "綜合",        isActive: true      },      {        id: 1,        value: "銷量",        isActive: false      },      {        id: 2,        value: "價格",        isActive: false      }    ],    first_list:[],  },    // 設置請求后返回的總頁面的數量  totalpages:1,  handleChage(e){    // console.log(e);    // 將子傳遞給父親的索引值解構出來    const {id} = e.detail    // 將父親data的數據進行解構    let {tabs} = this.data    // 將data中的數據進行遍歷 如果此時的索引值等于數據中的id值則將數據中的isActive的值改為true    // 這里的v表示的是遍歷的數據，i表示的是索引號    tabs.forEach((v,i) =>i===id?v.isActive=true:v.isActive=false);    // 將這里修改的數據加到源數據中    this.setData({      tabs    })  },  // 頁面觸底事件  pageParams:{    query:"",    cid:"",    pagenum:1,    pagesize:10  },  // 對接口數據進行請求  async getgoodList(e){    const res = await request({      url:"/goods/search",      data: this.pageParams    })    console.log(res);    // 先獲取頁面的總數據，計算出頁碼信息    const goodspages = Math.ceil(res.data.message.total / this.pageParams.pagesize)    console.log(goodspages)    this.totalpages = goodspages    this.setData({      // 這一步是將請求到的數據在使用數組拼接的方式拼接起來，這里用到了數組解構的方法      first_list:[...this.data.first_list,...res.data.message.goods],    })  },  /**   * 生命周期函數--監聽頁面加載   */  onLoad: function (options) {    // console.log(options);    this.pageParams.cid = options.cat_id    this.getgoodList()  },    /**   * 頁面上拉觸底事件的處理函數。觸底事件，當頁面觸底之后，在進行請求，并且將請求到的數據在追加到原來的數組中，并且在觸底后還要進行判斷如果總數據的頁數>=當前的頁數，要返回wxwx.showToast({title: "title",}),否則繼續請求   */  onReachBottom: function () {    this.pageParams.pagenum++;    // 進行頁面觸底的判斷    if(this.totalpages<=this.pageParams.pagenum){      wx.showToast({        title: "頁面加載完成",      })    }else{      this.getgoodList()    }      },  /**   * 生命周期函數--監聽頁面初次渲染完成   */  onReady: function () {  },  /**   * 生命周期函數--監聽頁面顯示   */  onShow: function () {  },  /**   * 生命周期函數--監聽頁面隱藏   */  onHide: function () {  },  /**   * 生命周期函數--監聽頁面卸載   */  onUnload: function () {  },  /**   * 頁面相關事件處理函數--監聽用戶下拉動作   */  onPullDownRefresh: function () {