微信小程序之組件開發中的基礎知識

　　跟着視頻開始小程序的項目的開發，視頻中這個小程序已經上線了，可以很好的看着小程序的界面進行開發，昨天看了一下具體的需求，覺得真的細節好多啊，而且其中設計的組件的思想也是很好的，能夠很好的實現代碼的復用，實現代碼的解耦合，這個視頻講解的是真的好，好好學習一下。

組件component開發

　　小程序中的大部分的頁面其實都是由組件來組合起來的，所以開發適合需求的組件是非常重要的，來進行組件的開發。

（1）在與pages同級目錄下創建components文件目錄，來存放所有需要進行開發的組件

（2）之后在components文件夾下面進行組件的創建，首先也是創建一個空的文件夾，然后在創建components組件

（3）頁面中如何引用組件

在靜態頁面中的json文件下進行組件的引用，例如：可以在classic文件夾中的classid.wxml文件中使用like組件，可以這樣做：

在classic文件夾下的classic.json文件中引入組件的路徑

這個路徑是有問題的，所以沒法顯示，很顯然，這里使用的是相對路徑，如果使用絕對路徑就沒問題了："v-like":"/components/like/index"

在頁面中使用組件，在classic.wxml文件中使用v-like組件

 

（4）靜態圖片文件夾的創建

注意：這里需要創建images文件夾，可以直接在組件中創建文件夾，只供組件來使用，也可以在components文件夾下面創建images文件夾，所有的組件共用一個images文件夾，同時創建pages同級images文件夾，供pages中頁面使用

（5）組件中image組件的使用

image組件的官方文檔：

https://developers.weixin.qq.com/miniprogram/dev/component/image.html

 注意：

在小程序的關於尺寸的單位，一種是px，一種是rpx。其中rpx是和我們平常頁面開發中的px是一致的，但是px是平常開發的px的二倍，也就是在小程序中px是rpx的二倍的關系，這個原則只限於在iPhone6這種機型下面才試用，其他機型不一定是2倍的關系，這里還有一點，就是rpx是自適應的，絕大多數情況下都可以使用的，但是有些地方還是需要選擇的，必須說是字體的大小，可能就不需要自適應，設計成固定大小的字體

（6）設置全局樣式

這個需要新建全局樣式文件，例如可以在根目錄新建一個app.wxss的樣式文件來作為全局樣式文件

打開調試器可以看到，小程序會自動添加page標簽的，所以可以設置page標簽的樣式，組件中的樣式也會變化！

注意：並不是所有的全局樣式對組件都起作用，只有很少的css樣式是可以從全局樣式中繼承的，但是在頁面中是可以繼承的，classic.wxml頁面文件中是可以繼承app.wxss文件中的樣式的，具體的文檔如下：組件樣式下面有詳細介紹

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html

（7）設置組件的自定義寬度

display: inline-flex;可以直接使用display的inline-flex的值來設置組件的自適應寬度

（8）事件的觸發

官方的文檔中有詳細介紹：

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#%E4%BA%8B%E4%BB%B6%E8%AF%A6%E8%A7%A3

這里主要使用到的是手指觸摸事件，也就是通常PC端的點擊事件具體的寫法，是在js文件中來寫事件的邏輯代碼的

// wxml中
<view bind:tap="onLike" class="container">
  <image src="images/like.png" />
  <text>999</text>
</view>

// js中 這個是需要寫在methods中的
 /**
   * 組件的方法列表
   */
  methods: {
    onLike:function(event){
      console.log(event);
    }
  }

（9）三元表達式

這個就要涉及到js中的邏輯代碼的編寫了，看看三元運算符的格式，來實現一個數據的切換

<!--三元運算符的使用-->
<view bind:tap="onLike" class="container">
  <image src="{{like?yesSrc:noSrc}}" />
  <text>{{like?count1:count2}}</text>
</view>

<!--數據是需要定義在js中的，其中data是專門來存放數據變量的-->
  /**
   * 組件的初始數據
   */
  data: {
    like:false,
    count1:9,
    count2:99,
    yesSrc:'images/like.png',
    noSrc:'images/[e-mail]'
  },

 （10）組件的封裝性和開放性

組件的封裝肯定要好壞之分，那么什么是決定組件封裝的好壞，也就是讓人感覺很好用，讓人用着舒服呢？視頻中的老師說的是：

1）你是要思考什么數據是封裝到組件中的，而什么數據是開放出來的

2）關於粒度的問題

粒度在這里就是指的是封裝的組件的難易程度以及組件的功能的強大與否

（11）js文件中properties屬性列表的設置

這個是主要來設置用到的變量的類型以及初始值，還有一個observer屬性的，在開發中可以把對外開放的數據來在這里進行定義，同樣頁面中是用{{}}語法來取值

  /**
   * 組件的屬性列表
   */
  properties: {
    like:{
      type:Boolean, // 設置變量類型  必填
      value:false, //設置默認值 選填
      observer:function(){ // 選填

      }
    },
    count:{
      type:Number
    }
  },

（12）屬性在methods中的應用

直接看代碼吧，這個和之前的各種語言的用法道理是一樣的

  /**
   * 組件的方法列表
   */
  methods: {
    onLike:function(event){
      var like = this.properties.like; // 用變量來接收屬性的值
      var count = this.properties.count;

      count = like?count-1:count+1;
      this.setData({ // 變量賦值之后需要重新設置Data的值
        count:count,
        like:!like
      })
    }
  }

（13）從服務器獲取數據

這個主要是調用接口，從服務器上獲取數據的方式，很苦惱，並沒有權限從老師搭建的后台服務器上獲取數據，我沒有購買慕課網上的課程，沒有辦法獲取到那個特殊的開發者key，這里只是記錄一下獲取數據的方法以及數據如何處理

官方的文檔來學習一下：

https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

看看代碼：

 // 這個是在classic.js中
 /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    wx.request({
      url: 'http://bl.7yue.pro/v1/classic/latest',
      header: {
        appKey:'K0LDaSADSDLWWbF'
      },
      success:function(){
        //返回結果成功之后 數據的處理
      }
    })
  },

// ES6中箭頭函數的寫法
  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    console.log(this.data.test)
    wx.request({
      url: 'http://bl.7yue.pro/v1/classic/latest',
      header: {
        appKey:'K0LDaSADSDLWWbF'
      },
      success:(res)=>{
        //返回結果成功之后 數據的處理
        console.log(this.data.test);
      }
    })
  },

（14）代碼優化

這個主要是來優化請求的接口的方法的，我們把一些通用的數據抽離出來，來寫成公共的方法，供許多模塊來一起調用

在http.js中來封裝wx.request

具體的config.js中代碼：

// const關鍵字是聲明不變的值的時候來用的，相當於Java中靜態變量
export const config = {
  api_base_url:'http://bl.7yue.pro/v1/',
  appKey:'K0LDaSADSDLWWbF'
}

// 導出function函數方法
export let fun1 = function(){

}

// export {const, fun1} 這種寫法就不用每一個都寫export關鍵字了

http.js中代碼：

// 導入的時候需要使用相對路徑
import {config} from '../config.js';

// 錯誤的具體的提示信息 根據接口中error_code
const tips = {
  1:'抱歉，出現了一個錯誤',
  1005:'appKey不正確',
  3000:'期刊不存在'
}

class HTTP{
  request(params){
    if(!params.method){
      params.method = 'GET';
    }
    wx.request({
      url: config.api_base_url + params.url,
      method:params.method,
      data:params.data,
      header:{
        'content-type':'application/json',
        appKey:config.params
      },
      success:(res) => {
        // 來判斷請求是否成功 以2開頭就是成功 這個是在Number類型的，          // 需要裝換成string類型
        var code = res.statusCode.toString();
        // ES6中 startsWith 和 endsWith
        if(code.startsWith('2')){
          params.sucess(res.data);
        }else{
          // 錯誤信息的提示
          var error_code = res.data.error_code;
          this._show_error(error_code);
        }
      },
      fail:(err) => {
        this.error_code(1);
      }
    })
  }

  // 錯誤信息的提示方法
  _show_error(error_code){
    if(!error_code){
      error_code = 1;
    }
    wx.showToast({
      title: tips[error_code],
      icon: 'none',
      duration: 2000
    })
  }
}

// 使得類外部可以訪問
export {HTTP}

classic.js中代碼的優化，主要是優化的request請求的封裝方法

// 這里導入的時候需要寫成相對路徑
import {HTTP} from '../../util/http.js';

// 實例化HTTP類
var http = new HTTP();

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    http.request({
      url:'classic/latest',
      success:(res)=>{
        console.log(res);
      }
    })
    // console.log(this.data.test)
    // wx.request({
    //   url: 'http://bl.7yue.pro/v1/classic/latest',
    //   header: {
    //     appKey:'K0LDaSADSDLWWbF'
    //   },
    //   success:(res)=>{
    //     //返回結果成功之后 數據的處理
    //     console.log(this.data.test);
    //   }
    // })
  },

總結：看完了前七章的視頻，我感覺老師絕對是大牛級別，從方方面面的來看，自己需要學習的東西還有很多啊，卑微的默默學習吧！

內容出處：七月老師《純正商業級小程序開發》視頻課程

視頻課程鏈接：https://coding.imooc.com/class/251.html