微信小程式的基礎入門知識點

1.微信小程式設定Tabbar
一般設定tabbar需要在全域app.json里面配置
代碼如下：

Page({
    data: {
        list: [{
          "text": "對話",
          "iconPath": "../../images/tabbar_icon_chat_default.png",
          "selectedIconPath":"../../images/tabbar_icon_chat_active.png",
            dot: true
        },
        {
          "text": "設定",
          "iconPath": "../../images/tabbar_icon_setting_default.png",
          "selectedIconPath": "../../images/tabbar_icon_setting_active.png",
            badge: 'New'
        }]
    },
});

Tabbar還有其他可以設定值的屬性具體可以查看微信開放檔案
點擊進入微信小程式開放檔案

2.微信小程式設定頭部
設定頭部需要在每個頁面的json里面設定其樣式
代碼如下，僅供參考

{
  "navigationBarTitleText": "會員中心",
  "usingComponents": {}
}

還可以設定其他的樣式，可以去微信開放檔案查看

3.微信小程式檔案型別
微信小程式檔案型別一般由4個檔案組成分別為js、json、wxml、wxss
這里先簡單說一下js
js一般是用于邏輯互動的，例如點擊事件，獲取資料等都要在js里進行
代碼如下

 //點擊事件
  GetUserInfo: function (e) {
    console.log(e)
    if (e.detail.userInfo) {
      this.getLogin()

    } else {
      wx.showToast({
        title: '拒絕登陸',
        mask: true,
        duration: 2000,
      })
    }
  }

接下來介紹一下json
JSON 是一種資料格式，并不是編程語言，在小程式中，JSON扮演的靜態配置的角色，
在json里面可以設定頁面路徑、界面表現、網路超時時間、底部 tab 等，
代碼如下：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  }
}

然后就是wxml
網頁編程一般采用的是html、css、和js，微信小程式里面的wxml類似于html，他是由屬性、標簽等組成的，但他和html里面標簽并不是完全一樣的比如：view、text標簽
代碼如下

  <view class="sp">
      <view wx:for="{{bargaintwo}}" wx:for-index="index" class="spson" catchtap="toparticulars" data-id="{{item.id}}">
          <image src="{{item.pic}}"></image>
          <view class="na">{{item.name}}</view>
          <text class="te">￥{{item.minPrice}}</text>
          <text class="ta" wx:if="{{item.originalPrice!=0}}">￥{{item.originalPrice}}</text>
      </view>
  </view>

最后就是wxss
看過上面的小伙伴相信可以猜出他是做什么的，對！沒錯，他類似于css，是用來改變wxml頁面樣式的，可以美化頁面，對你的頁面進行裝扮，讓你的頁面變得更加的漂亮，增加用戶體驗，
不多說，直接上代碼

.nr{
  width: 710rpx;
  height: 300rpx;
  margin-left: 20rpx;
  background-color: rgb(230, 225, 225);
  display: flex;
  justify-content: start;
  border-radius: 2rpx;
}
.nr image{
  width: 260rpx;
  height: 260rpx;
  margin-top: 20rpx;
  margin-left: 20rpx;
}

如果您對微信小程式還不是特別了解的話，具體可以去微信開放檔案查看哦~

4.小程式頁面的生命周期和小程式組件生命周期
小程式頁面的生命周期

  onLoad(options) {
    console.log('onLoad監聽頁面加載');
  }

  onReady() {
    console.log('onReady監聽頁面初次渲染完成');
  }

  onShow() {
    console.log('onShow監聽頁面顯示');
  }

  onHide() {
    console.log('onHide監聽頁面隱藏');
  }

  onUnload() {
    console.log('onUnload監聽頁面卸載');
  }

如果您對于小程式頁面生命周期還不是特別了解的話，可以去看一看關于小程式頁面升周期的其他博客，相信會對您有一些幫助，

小程式組件生命周期

以上知識一部分具體可查看小程式官方檔案

4.封裝介面
獲取介面資料的時候需要在 生命周期函式–監聽頁面加載 中獲取，
每獲取一次都要寫大量的代碼，在這里我對介面進行了簡單的封裝，可以 減少很多的代碼量，希望會多大家有幫助，
我是習慣創建一個request檔案夾在里面寫三個js檔案，分別是api.js、fetch.js、http.js、

api.js用于管理介面
代碼如下：

module.exports = {
  "swipe": "/liukaige/banner/list", //輪播圖
  "classify":"/liukaige/shop/goods/category/all",//分類
  "bargain":"/liukaige/shop/goods/list",//砍價
  "particulars":"/liukaige/shop/goods/detail",//詳情
}

fetch.js用于封裝http
代碼如下：

//封裝 http
module.exports = (url, path, method, params) => {
  return new Promise((resolve, reject) => {
    wx.request({
      url: `${url}${path}`,
      method: method,
      data: Object.assign({}, params),
      header: {
        //設定回應頭
        "Content-Type": "application/x-www-form-urlencoded",
      },
      success: resolve,
      fail: reject,
    });
  });
};

http.js封裝介面完成，頁面呼叫即可
代碼如下：

//引入api.js和fetch.js
const api = require('./api.js')
const fetch = require('./fetch.js');


let baseUrl = 'https://api.it120.cc';

function fetchGet(path, params) {
  return fetch(baseUrl, path, 'get', params);
}

function fetchPost(path, params) {
  return fetch(baseUrl, path, 'post', params);
}


module.exports = {
  swipe(params) {  //輪播圖
    return fetchGet(api.swipe, params);
  },
  notice(params){ //首頁通知
    return fetchGet(api.notice, params);
  },

}

接下來還需要在app.js全域設定一下

const http=require('./request/http')
App({
  http, // http.fetch
})

封裝完成那么如何在js檔案里呼叫渲染資料
代碼如下：

	//引入全域設定
	const app = getApp();
    //呼叫封裝好的借口
    app.http.classify().then((res) => {
     this.setData({
        classify: res.data.data

      })
    })

5.路由跳轉
1.navigateTo （有回傳鍵，不可以跳轉到tabBar頁面）

wx.navigateTo({
  url: '/pages/detail/detail?id=1'
})

2.switchTab （沒有回傳鍵，只能跳轉到tabBar頁面，不可以攜帶引數）

wx.switchTab({  
      url: `/pages/detail/detail`,
    })

3.reLaunch (跳轉任意頁面， 沒有回傳， 有 首頁 按鈕)

    wx.reLaunch({
      url: '/pages/detail/detail'
    })
  

4.redirectTo ( 只可以跳轉tabBar 頁面， 沒有回傳，但有首頁按鈕)

    wx.redirectTo({
       url: `/pages/detail/detail`,
    })

5.navigateBack (應用在目標頁面， delta值為1、 表示跳轉上一頁，2、表示跳轉兩級)

   wx.navigateBack({
       delta:1
    })

6.路由跳轉傳遞引數
路由跳轉傳遞引數一般用于跳轉詳情，在這里呢傳遞的引數是id
代碼如下：

<!-- wxml頁面 -->
  <view class="sp">
    <!-- 跳轉詳情首先要給它一個點擊事件，傳遞id  data-id="{{item.id}}",在這里也可以傳遞其他引數 -->
      <view wx:for="{{bargaintwo}}" wx:for-index="index" class="spson" catchtap="toparticulars" data-id="{{item.id}}">
          <image src="{{item.pic}}"></image>
          <view class="na">{{item.name}}</view>
          <text class="te">￥{{item.minPrice}}</text>
          <text class="ta" wx:if="{{item.originalPrice!=0}}">￥{{item.originalPrice}}</text>
      </view>
  </view>

// js檔案
  toparticulars:function(e){
    //要傳遞的引數
      let id=e.currentTarget.dataset.id
      wx.navigateTo({
        //即將跳轉的頁面和拼接引數
        url:"/pages/index/particulars/particulars?id="+id
      })
  },

7.for回圈
微信小程式的for回圈的選項是item,下標是index，
代碼如下：

<view wx:for="{{arr}}">
   <text>{{index}}--- {{item}}</text>
</view>

也可以指定遍歷選項和下標的別名，

遍歷選項：wx:for-item=“xxx”

遍歷下標：wx:for-index=“yyy”
代碼如下：

<!-- 給遍歷的item指定別名，給遍歷的下標指定別名 -->
<view wx:for="{{arr}}" wx:for-item="testItem" wx:for-index="i">
  <text>{{testItem}} === {{i}}</text>
</view>

8.本地存盤的幾種方式
（1）wx.setStorageSync(); 用于存盤
代碼如下：

1 try {
2   wx.setStorageSync('key', 'value')
3 } catch (e) {
5  }

（2）wx.removeStorageSync(); 洗掉指定的值
代碼如下：

1 try {
2   wx.removeStorageSync('key')
3 } catch (e) {
4 
5 }

（3）wx.getStorageSync(); 獲取值

1 try {
2   var value = wx.getStorageSync('key')
3   if (value) {

5   }
6 } catch (e) {

8 }

（4）wx.getStorageInfoSync(); 獲取當前存盤中所有的 key

1 try {
2   const res = wx.getStorageInfoSync()
3   console.log(res.keys)
6 } catch (e) {
8 }

（5）wx.clearStorageSync(); 清除所有的key

1 try {
2   wx.clearStorageSync()
3 } catch(e) {
5 }

以上都是同步的存盤，異步存盤和同步存盤方法一樣，在這里就大致列舉一下
（1）wx.setStorage(); //存盤值
（2）wx.removeStorage(); // 移除指定的值
（3）wx.getStorage(); // 獲取值
（4）wx.getStorageInfo(); // 獲取當前 storage 中所有的 key
（5）wx.clearStorage(); // 清除所有的key

8.頁面配置

以上只是一點點例子，要想更深入的了解可以去微信開放檔案查看，
微信小程式頁面配置官方檔案