微信小程序筆記

一、文件的做用

  

js,wxml,wxss,json

 全部頁面中要用到的變量，都放在可了pages目錄下

 wxml：相似於html文件

 wxss；相似於css文件（類, id, 標籤，子代，後代，before，after）

 json: 主要去設置app.json

   文件當中，js和wxml必須有，剩下兩個能夠沒有不報錯

二、小程序生命週期

軟件生命週期(Software Life Cycle,SLC)是軟件的產生直到報廢或中止使用的生命週期。

一個是App的生命週期

另外一個是Page的生命週期

App的生命週期

 四個 onlaunch(初始化) ,onShow（顯示）, onHide（隱藏） , onerror（報錯）

三、以及如何跳轉一個新頁面

 三種

  navigateTo

 <navigator url="">

  rediracte 不能反回上一頁  

四、如何綁定點擊事件

 行內寫入bindtap=’事件名稱’

5.頂部title的設置

 {"navigationBarTitleText": "快遞查詢"}

 

六、js中的變量在頁面中顯示出來（this.setData）

 首先要在js中的page裏去添加這個變量，在頁面當中的{{}}的模板中直接添加，改變頁面當中的變量的值得時候，須要調用this.setData  一個page內只能有一個data對象，否則後面的data會把前面的data覆蓋掉

七、this.用的時候要注意指向問題

   this的三個狀態

   函數，方法，構造函數

    1.函數 指向window

    2.方法 誰調用指向誰（當前對象）

    3.構造函數 誰實例化指向誰

八、小程序使用全局屬性

    var app=getApp()

子頁面能夠修改全局屬性，而且會影響到其餘頁面的使用

 

page外和page內：

經過this.data.name來訪問到data中name的屬性值；

this.data.name也能夠設置 this.data.name的值，可是這個值沒法在頁面中渲染出來。

this.setData（{name.....}）

變量名前加this，是從page內去找這個變量；沒加this是從外去找這個變量；

 

九、頁面傳參

search 咱們在跳轉的路徑中加上search格式的數據

在目標也onload方法中用形參接收

十一、模塊化：高內聚低耦合

App 文件是公共文件；

全部文件大小總共4M；

當前運行的文件不能超過2M。

部分公共的代碼放到某個JS文件中；

經過module.exports獲取屬性。

誰要借要經過，require（path）；

十二、小程序wx:if 條件渲染，wx:for循環

在JS文件中若是須要if判斷，按咱們以前的寫法就能夠了

在頁面（wxml）當中去使用，if判斷  標籤內部添加  wx:if  wx:elif  wx:else  

for循環：JS文件中使用和咱們以前是同樣的；

在頁面（wxml）中循環輸出的話，標籤內部添加  wx:for子元素用item，索引是index

view標籤包裹條件。會在頁面中顯示出來；

block標籤  不會再頁面中顯示出來

1三、wxss文件引用（樣式文件）

@import path  公用css樣式

1四、小程序之模板

有多個相一樣式的HTML片斷。公用的HTML樣式提取出來，放到template 標籤中 而且添加name  屬性等於xxx

 

 

 

當前頁面須要用模板代碼的時候，import 標籤把模板path添加過來

 

<import src="../../list/list.wxml"></import>

 

template  is屬性等於xxx

<template is="message" data="{{...obj}}"></template>

 

當前頁面中的數據要添加到模板當中去，模板中直接{{}}輸出變量名

 

 

 

 

在template標籤中去添加data屬性，等於{{..當前JS中要使用的變量}}

1五、小程序的請求

 

 

1六、form表單中:bindsubmit=」函數」

button標籤要設置 formtype=」submit」;

在函數的形參中獲得全部，設置的數據；

//app.js

App({

onLaunch: function () {

console.log("App生命週期函數——onLaunch函數");

},

onLoad: function (options) {

// 生命週期函數--監聽頁面加載

console.log("Page onLoad函數");

},

onReady: function () {

// 生命週期函數--監聽頁面初次渲染完成

console.log("Page onReady函數");

},

onShow: function () {

// 生命週期函數--監聽頁面顯示

console.log("Page onShow函數");

},

onHide: function () {

// 生命週期函數--監聽頁面隱藏

console.log("Page onHide函數");

},

 

onUnload: function () {

 

// 生命週期函數--監聽頁面卸載

 

console.log("Page onUnload函數");

 

},

globalData: {

userInfo: null

}

})

//logs.js

const util = require('../../utils/util.js')

 

Page({

data: {//全部的數據都要方法page下面的data對象裏面去

 

logs: []

},

onLoad: function () {

this.setData({

logs: (wx.getStorageSync('logs') || []).map(log => {

return util.formatTime(new Date(log))

})

})

}

})

 

1七、搜索功能實現

1）用戶在輸入框中輸入數據，經過input輸入，bindinput

獲取輸入框的value值，將value值存放到data中；

2）點擊搜索以input中的關鍵字去搜索中搜索，選擇對應數據；

3）將數據在頁面中渲染出來；

4）下拉顯示加載更多、或者是加載中；

5）若是沒有影響的數據返回，沒有找到你想要的數據；

6）下拉顯示加載中。。。字樣，下拉完成以後，加載中。。。。隱藏。

 

18、購物車

1）將商品存放到購物車：

點擊當前的購物車的時候，把當前數據放到本地儲存中去；點擊購物車的時候拿到當前盒子中的數據；

     （一）、點擊購物車圖標拿到當前數據的id（把數據中的id綁定給購物車圖標）（有所有數據，和某條數據的id(惟一標識））

     （二）、循環遍歷數組中的id,拿來和咱們獲得的id去比較，若是相等，就把這條數據提取出來。

     （三）、添加到本地儲存中去

①　如何避免數據的覆蓋

②　添加變量 記錄點擊的次數

1. 判斷當前用戶是否有過想買的商品

           是：獲取本地存儲

           否：讓當前數組爲空數組

1. 當前點擊的商品，用戶是第幾回點擊

           第一次：只讓當前商品的times爲1，而且追加

           屢次  ：讓當前商品的times+1,不追加

2）拿取購物車商品，讀取緩存；

①　判斷購物車中是否有數據

        若是沒有咱們給用戶提示

        有的話直接顯示

②　把數據在頁面中渲染出來

       個數最小爲1

       點擊見得時候

       點擊加的時候

       點擊剩餘的時候