## 背景 > base深圳，一年半經驗，找的初級前端崗位，1-3年，投簡歷兩個月只有兩個面試，這是第一個面試 ## 一面 ### 你對html元素是怎麼分類的？ 一開始我愣了一下？搞這麼簡單的問題？？？後面又問面試官你是指的id選擇器這些嗎，，還是display：block,inline-bloc ...
在小程式開發中，提高開發效率、優化代碼質量和增強用戶體驗是每位開發者都追求的目標。而wepy作為一種基於Vue.js的小程式開發框架，提供了更好的開發體驗和更高效的開發方式。本文將介紹wepy的基本功能和特性，分享一些實際的代碼案例，幫助開發者快速上手和掌握wepy，從而提升小程式開發的效率和質量。
一、快速上手
在開始之前，請確保你已經安裝了Node.js和npm。接下來，我們將通過幾個簡單的步驟來快速上手wepy框架。
步驟1：安裝wepy
首先，在命令行中運行以下命令來安裝wepy腳手架：
npm install wepy-cli -g
|
步驟2：創建wepy項目
接下來，我們使用wepy-cli創建一個新的wepy項目。在命令行中運行以下命令：
wepy init standard mywepyproject
|
這將創建一個名為mywepyproject的新項目，使用了wepy的標準模板。
步驟3：運行項目
項目創建完成後，進入項目目錄並安裝依賴：
cd mywepyproject
npm install
|
安裝完成後，運行以下命令來啟動項目：
npm run dev
|
這將啟動一個本地開發伺服器，併在瀏覽器中打開項目的預覽頁面。
步驟4：修改頁面
現在，我們可以開始修改頁面了。在src/pages/index/index.wpy文件中，我們可以看到wepy使用了類似Vue的模板語法和組件化開發方式。讓我們將頁面標題修改為"歡迎使用wepy"。
<template>
<view>
<text class="title">歡迎使用wepy</text>
</view>
</template>
|
保存文件後，預覽頁面將自動刷新，並顯示修改後的內容。
至此，我們已經完成了一個簡單的wepy項目的創建和修改過程。接下來，讓我們深入瞭解wepy的更多功能和特性。
二、基本功能和特性
1. 組件化開發
wepy支持類似Vue的組件化開發，可以將頁面拆分成多個獨立的組件，提高代碼復用性和開發效率。下麵我們通過一個實際的案例來說明組件化開發在wepy中的應用。
假設我們有一個小程式項目，其中包含一個商品列表頁面和一個商品詳情頁面。我們可以將商品列表和商品詳情抽象成兩個組件，併在需要的地方引用它們。
首先，我們創建一個名為GoodsList的組件。在src/components目錄下創建GoodsList.wpy文件，並編寫如下代碼：
<template>
<view>
<text class="title">商品列表</text>
<view class="goods">
<repeat for="{{goodsList}}" index="index" item="item">
<view class="goods-item">
<image class="goods-image" src="{{item.image}}"></image>
<text class="goods-name">{{item.name}}</text>
</view>
</repeat>
</view>
</view>
</template>
<script>
import wepy from 'wepy';
export default class GoodsList extends wepy.component {
data = {
goodsList: [
{ name: '商品1', image: 'path/to/image1.jpg' },
{ name: '商品2', image: 'path/to/image2.jpg' },
{ name: '商品3', image: 'path/to/image3.jpg' },
],
};
}
</script>
<style>
.title {
font-size: 20px;
font-weight: bold;
}
.goods {
display: flex;
flex-wrap: wrap;
}
.goods-item {
width: 100px;
margin-right: 10px;
}
.goods-image {
width: 100px;
height: 100px;
}
.goods-name {
margin-top: 5px;
text-align: center;
}
</style>
|
這個組件包含一個商品列表，通過<repeat>標簽遍歷goodsList數組，顯示每個商品的圖片和名稱。
接下來，在商品列表頁面中引用這個組件。在src/pages/goods/index.wpy文件中，編寫如下代碼：
<template>
<view>
<goods-list></goods-list>
</view>
</template>
<script>
import wepy from 'wepy';
import GoodsList from '../../components/GoodsList';
export default class GoodsPage extends wepy.page {
components = {
GoodsList,
};
}
</script>
<style>
/* 樣式代碼省略 */
</style>
|
通過在模板中使用<goods-list></goods-list>標簽，我們將GoodsList組件引入到了商品列表頁面中。
同樣的，我們也可以創建一個名為GoodsDetail的商品詳情組件，併在商品詳情頁面中引用它。
通過組件化開發，我們可以將頁面拆分成多個獨立的組件，降低了代碼的耦合性，提高了代碼的復用性和可維護性。每個組件都有自己的模板、腳本和樣式，可以獨立開發和測試，並且可以在不同的頁面中重覆使用。
接下來，我們繼續介紹wepy的其他功能和特性。
2. 數據綁定
wepy支持數據綁定，通過data屬性可以定義頁面或組件的數據，併在模板中直接引用。當數據發生變化時，模板會自動更新。
<template>
<view>
<text>當前計數：{{count}}</text>
<button @tap="increment">增加</button>
</view>
</template>
<script>
import wepy from 'wepy';
export default class Counter extends wepy.page {
data = {
count: 0,
};
increment() {
this.count++;
}
}
</script>
|
在上面的示例中，我們定義了一個計數器組件，包含一個計數變數count和一個增加按鈕。點擊按鈕時，通過@tap事件觸發increment方法，使計數變數增加。模板中使用雙花括弧{{count}}來引用計數變數，當計數發生變化時，模板會自動更新。
3. 事件處理
wepy使用類似Vue的事件處理機制，可以通過@事件名的方式在模板中綁定事件，併在腳本中定義對應的方法來處理事件。
<template>
<view>
<button @tap="handleTap">點擊我</button>
</view>
</template>
<script>
import wepy from 'wepy';
export default class EventDemo extends wepy.page {
handleTap() {
wepy.showToast({
title: '按鈕被點擊了',
icon: 'none',
});
}
}
</script>
|
在上面的示例中，當按鈕被點擊時，觸發handleTap方法，在方法中顯示一個提示框。
4. 路由管理
wepy提供了路由管理的功能，可以通過路由進行頁面之間的跳轉和傳參。
在上面的示例中，點擊按鈕時，通過wepy.navigateTo方法跳轉到詳情頁，並傳遞一個名為productId的參數。
<!-- src/pages/detail/index.wpy -->
<template>
<view>
<text>商品詳情頁</text>
<text>商品ID: {{productId}}</text>
</view>
</template>
<script>
import wepy from 'wepy';
export default class DetailPage extends wepy.page {
data = {
productId: '',
};
onLoad(options) {
this.productId = options.productId;
}
}
</script>
|
在上面的示例中，我們在詳情頁的模板中使用雙花括弧{{productId}}來顯示接收到的商品ID參數。
<!-- src/pages/detail/index.wpy -->
<template>
<view>
<text>商品詳情頁</text>
<text>商品ID: {{productId}}</text>
</view>
</template>
<script>
import wepy from 'wepy';
export default class DetailPage extends wepy.page {
data = {
productId: '',
};
onLoad(options) {
this.productId = options.productId;
}
}
</script>
|
通過wepy提供的路由管理功能，我們可以方便地實現頁面之間的跳轉和參數傳遞，提供了更好的用戶導航體驗。
三、進階技巧和最佳實踐
除了基本功能和特性之外，wepy還提供了一些進階技巧和最佳實踐，幫助開發者優化小程式的性能、提高開發效率和代碼質量。
以下是一些進階技巧和最佳實踐的示例：
- 使用wepy的插件系統，擴展wepy的功能。例如，可以使用wepy-redux插件來集成Redux狀態管理庫，實現更好的數據管理和狀態控制。
- 優化網路請求，減少請求次數和數據傳輸量。可以使用wepy.request來發送網路請求，併合理利用緩存和本地存儲，提高數據載入速度。
- 合理使用wepy的生命周期函數，進行頁面初始化和資源回收。例如，在onUnload生命周期函數中清理定時器、取消訂閱等資源釋放操作，避免記憶體泄漏。
- 使用組件化開發的最佳實踐，將頁面拆分成多個小組件，提高代碼復用性和可維護性。同時，註意組件之間的通信和數據傳遞方式，避免數據冗餘和不必要的性能消耗。
- 跨平臺適配，考慮在不同平臺上的展示效果和交互差異。wepy提供了跨平臺編譯的能力，可以在同一個代碼庫中開發適配多個平臺的小程式。
通過應用這些進階技巧和最佳實踐，可以進一步提升小程式的性能和開發效率，同時優化代碼質量，為用戶提供更好的使用體驗。
當然除了使用 wepy 和 Mpvue 開發框架外，我們還有一些其他的小程式價值挖掘。
這裡還要推薦一個深化發揮小程式價值的途徑，直接將現有的小程式搬到自有 App 中進行運行，這種實現技術路徑叫做小程式容器，例如 FinClip SDK 是通過集成 SDK 的形式讓自有的 App 能夠像微信一樣直接運行小程式。
這樣一來不僅可以通過前端框架提升小程式的開發效率，還能讓小程式運行在微信以外的 App 中，真正實現了一端開發多端上架，另外由於小程式是通過管理後臺上下架，相當於讓 App 具備熱更新能力，避免 AppStore 頻繁審核。
