mpvue is a front-end framework for developing small programs using Vue.js. The framework is based on the core of Vue.js. mpvue modifies the runtime and compiler implementations of Vue.js so that it can run in a mini program environment, thus introducing a complete Vue.js development experience for mini program development. mp is the abbreviation of mini program.

mpvue quick start

①Introduce mpvue template through scaffolding

vue 3.0 alreadydoes not support the vue init command , so you need to install it separately @vue/cli-init. After installation, you can follow the following steps to introduce the mpvue template

npm?install?-g?@vue/cli-init

vue?init?mpvue/mpvue-quickstart?my-project

cd?my-project

npm?install

npm?run?dev

npm run dev command will be in the project root directory Generate a dist directory, which is Convert the vue project into a WeChat applet project

② Build a development environment for the applet

WeChat provides a dedicated WeChat Developer Tools are used to develop small programs. You need to download and install WeChat Developer Tools. You also need to apply for a small program ID, namely AppID, because creates small programs through WeChat Developer Tools. The program project needs to fill in the AppID, which can be applied for on the WeChat public platform.

③ Debugging project

Start the WeChat applet project through the WeChat developer tool. The selected project directory is the root directory of the mpvue project, not the generated dist directory. Since WeChat developer tools do not support viewing .vue files, we still have to use our own development tools to debug the source code.

Some usage details of mpvue

① The src directory of mpvue is the same as vue. There is also an App.vue root component, The App.vue root component is just A structure , has no specific content, and the root component has a corresponding main.js file used to render the App.vue root component, that is, introduces App.vue and serves as The Vue constructor creates a Vue instance, then mount, and there is also a app.json file, which is the page global configuration file, used for page registration , tabBar registration, global window style setting, such as:

// App.vue

<script>

export?default?{
?
}
</script>

<style>
page?{
??width:?100%;
??height:?100%;
??background-color:?#f7f7f7;
}
</style>

// main.js

import?Vue?from?'vue'
import?App?from?'./App'
Vue.config.productionTip?=?false
App.mpType?=?'app'

const?app?=?new?Vue(App)
app.$mount()

// app.json

{
??"pages":?[
????"pages/index/main"
??],
??"tabBar":?{
????......
??},
??"window":?{
????"backgroundColor":"#00BFFF",
????"backgroundTextStyle":?"light",
????"navigationBarBackgroundColor":?"#fff",
????"navigationBarTitleText":?"測試",
????"navigationBarTextStyle":?"black"
??}
}

② The pages defined in mpvue are placed in the pages directory under the src directory. One page corresponds to one folder, Each page folder needs to have a .vue file and main.js file . The main thing main.js does is, Introduce the .vue corresponding to the current page , then create a Vue instance and mount as a parameter of the Vue constructor, and the name of main.js cannot be changed , can only be main.

/ / main.js

import?Vue?from?'vue'
import?App?from?'./index'

//?add?this?to?handle?exception
Vue.config.errorHandler?=?function?(err)?{
??if?(console?&&?console.error)?{
????console.error(err)
??}
}

const?app?=?new?Vue(App)
app.$mount()

In mpvue, although the name of the .vue file in a page can be arbitrary, the names of .js and .json files are fixed to main. Usually we The .vue file also always uses index.vue. A page usually contains index.vue, main.js, main.json, different pages are distinguished through outer folders, and in the native applet, different pages are also distinguished by outer folders, but the names of the four pages in the folder can be the same as the outer folder, or they can be different, but the names of the four files Must be unified.

Every time a new page is added, the project needs to be restarted, that is, re-executing npm run dev.

Click the button to prompt the user whether to authorize and obtain user information

provides some WeChat developed Capability , by adding an open-type attribute to the tag, indicating the type of capability to be opened to the button, such as getUserInfo, That is, to obtain user information by clicking a button, we need to listen to the getuserinfo event on . mpvue is encapsulated on the basis of the mini program and needs to pass e.mp.detail. userInfo can obtain user information,

<button open-type="getUserInfo" @getuserinfo="getUserInfo">點(diǎn)擊開始</button>
<script>
export?default?{
????getUserInfo(e)?{
??????console.log(e.mp.detail.userInfo);?//?獲取用戶信息
????}
}
</script>

wx global objectJust like a web page running in a browser environment, the browser environment will provide a global window object , the same applet runs in the applet environment,
the applet environment will also provide a global wx object, wx will provide many APIs, such as accessing the network (wx.request({}) ), page jump (wx.redirectTo({})), display loading(wx.showLoading({})), display prompt (wx. showToast({}))etc

③ 微信小程序中發(fā)起網(wǎng)絡(luò)請求
在小程序環(huán)境中不能像瀏覽器環(huán)境一個直接提供ajax，而是提供了一個全局的網(wǎng)絡(luò)請求api，即wx.request(),在小程序環(huán)境中只能使用wx.request()發(fā)起網(wǎng)絡(luò)請求，不能使用axios等常用的請求類庫，并且wx.request()并不存在跨域問題。使用wx.request()的時候，需要傳遞一個請求參數(shù)配置對象，request()方法返回結(jié)果并不是一個Promise對象，所以不能通過.then()的方式去處理請求結(jié)果，而是在請求配置對象中添加了success、fail、complete等回調(diào)函數(shù)，在回調(diào)函數(shù)中可以獲取到請求的結(jié)果，如:

wx.request({
????url:?"http://www.baidu.com",?//?請求url地址必填
????data:?{
????????user:?"even?li"
????},
????method:?"get",?//?請求方法
????header:?{
????????"content-type":?"application/json"?//?默認(rèn)值
????},
????success(res)?{
????????console.log(res.data);?//?獲取響應(yīng)數(shù)據(jù)
????},
????fail(error)?{
????????console.log(error);?//?請求失敗
????}
????complete(res)?{?//?接口調(diào)用結(jié)束，請求成功或失敗都會執(zhí)行
????????console.log(res);?//?如果請求成功則res為響應(yīng)結(jié)果res，如果請求失敗則res為錯誤信息error
????}
});

需要注意的是，返回狀態(tài)碼為404也算請求成功，一般只有網(wǎng)絡(luò)異常的時候才算請求失敗。

④ 跳轉(zhuǎn)頁面非tabBar頁面
如果想要跳轉(zhuǎn)到某個非tabBar頁面，那么可以使用一個全局的api，即wx.redirectTo({})，其作用就是關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面。但是不允許跳轉(zhuǎn)到 tabbar 頁面。需要傳遞一個配置對象，主要屬性為url，即要跳轉(zhuǎn)頁面的路徑，可帶參數(shù)，然后就是success、fail、complete三個回調(diào)函數(shù)，請處理跳轉(zhuǎn)結(jié)果，如:

wx.redirectTo({
????url:?"../question/main",?//?在某個頁面內(nèi)../相當(dāng)于pages/
????success()?{
????},
????fail()?{
????},
????complete()?{
????}
});

⑤ 跳轉(zhuǎn)到tabBar頁面
在微信小程序中，tabBar頁面是需要特殊的方式跳轉(zhuǎn)的，即使用wx.switchTab({})的方式，其會跳轉(zhuǎn)到 tabBar 頁面，并關(guān)閉其他所有非 tabBar 頁面，其用法同wx.redirectTo({});

wx.switchTab({
???url:?"../learn/main",?//?在某個頁面內(nèi)../相當(dāng)于pages/
success()?{
????},
????fail()?{
????},
????complete()?{
????}
});

⑥ 頁面配置文件
小程序的頁面配置文件分為全局配置文件app.json與即頁面配置main.json. 全局配置文件可配置項(xiàng)比較多，整個配置文件內(nèi)容要用花括號括起來，也就是說是一個JSON對象，如:

• pages屬性，是一個數(shù)組，用于定義小程序用到的頁面，數(shù)組中每一項(xiàng)對應(yīng)一個頁面，即路徑+文件名信息，不需要寫后綴，在mpvue中所有頁面固定使用main，即每個頁面下都會有一個main.js，所以在配置pages時，通常為"pages/頁面名/main"，位于pages數(shù)組第一項(xiàng)表示小程序的初始頁面，即小程序運(yùn)行時顯示的頁面。
• window屬性，即對小程序的窗口樣式進(jìn)行配置，其屬性值為一個對象，主要包括backgroundColor(窗口背景顏色，即頁面下拉后漏出的背景窗口顏色)、backgroundTextStyle(設(shè)置下拉背景字體、loading圖的樣式，目前只支持dark和light)、navigationBarBackgroundColor(導(dǎo)航欄背景顏色)、navigationBarTextStyle(導(dǎo)航欄標(biāo)題顏色，目前只支持black和white)、navigationBarTitleText(導(dǎo)航欄標(biāo)題文字內(nèi)容)、navigationStyle(值為custom自定義導(dǎo)航欄)

微信小程序設(shè)置顏色的時候，只支持十六進(jìn)制顏色，不支持RGB格式和顏色英文。

• tarBar屬性，用于配置窗口底部的tabBar，其屬性值為一個對象，主要有color(設(shè)置tab未激活狀態(tài)文字的顏色)、selectedColor(設(shè)置tab激活狀態(tài)的文字顏色)、borderStyle(設(shè)置tabBar上邊框的顏色，目前只支持black和white)、backgroundColor(設(shè)置tab的背景顏色)、list(用于配置tab項(xiàng)，最多可配置5項(xiàng))，list屬性值為一個數(shù)組，主要包括text(tab上顯示的文字內(nèi)容)、iconPath(tab處于未激活狀態(tài)時顯示的圖標(biāo)路徑)、selectedPath(tab處于激活狀態(tài)時顯示的圖標(biāo)路徑)、pagePath(tab被點(diǎn)擊時要跳轉(zhuǎn)的頁面路徑，其屬性值為pages中配置的路徑)

頁面配置配置相對于全局主配置文件來說要簡單得多，在頁面配置文件中只能配置窗口的樣式屬性，即只能配置全局配置文件中的window屬性中的內(nèi)容，頁面配置文件中配置的內(nèi)容會覆蓋掉全局配置文件中window中相同的配置，以決定當(dāng)前頁面的窗口表現(xiàn)，無需使用window屬性，直接將window配置放到花括號中即可。

⑦ 小程序頁面與Vue生命周期

小程序給頁面提供了onLoad(頁面加載)、onShow(頁面顯示，但還未渲染完成)、onReady(頁面渲染完成)、onHide(頁面隱藏)、onUnload(頁面卸載)，mpvue將小程序提供的頁面生命周期和vue的生命周期結(jié)合在了一起，也就是說使用mpvue開發(fā)小程序，可以同時使用小程序的生命周期和vue的生命周期，其順序?yàn)? beforeCreate --> created --> onLoad --> onShow --> onReady --> beforeMount --> mounted。即Vue首先實(shí)例化然后頁面開始加載、顯示、渲染，頁面渲染完成后Vue實(shí)例開始掛載。

⑧ 導(dǎo)航到某個頁面
所謂導(dǎo)航到某個頁面，就是跳轉(zhuǎn)到某個頁面，但是其會保留當(dāng)前頁面，跳轉(zhuǎn)的目的頁面導(dǎo)航欄左側(cè)中自帶一個返回按鈕，點(diǎn)擊可以回到之前的頁面，但是這個跳轉(zhuǎn)的目的頁面不能是tabbar中的頁面，其使用的是wx.navigateTo({})

wx.navigateTo({
????url:?"../myLesson/main"?//?導(dǎo)航到我的課程頁面，目標(biāo)頁面自帶返回按鈕，點(diǎn)擊可返回之前的頁面
});

⑨ 動態(tài)設(shè)置頁面導(dǎo)航欄標(biāo)題
當(dāng)我們點(diǎn)擊列表中的某個具體項(xiàng)時，通常需要在其對應(yīng)頁面動態(tài)顯示出當(dāng)前點(diǎn)擊項(xiàng)的具體導(dǎo)航欄標(biāo)題，微信小程序提供了wx.setNavigationBarTitle({})用于動態(tài)設(shè)置導(dǎo)航欄欄標(biāo)題，同樣有success、fail、complete三個回調(diào)函數(shù)，如:

wx.setNavigationBarTitle({
?????title:?"動態(tài)標(biāo)題內(nèi)容",
?????success()?{
?????},
?????fail()?{
?????},
?????complete()?{
?????}
});

⑩ 本地緩存數(shù)據(jù)
微信小程序提供了setStorage({})方法，可以將數(shù)據(jù)存儲在本地緩存中指定的 key 中，除非用戶主動刪除或因存儲空間原因被系統(tǒng)清理，否則數(shù)據(jù)都一直可用。單個 key 允許存儲的最大數(shù)據(jù)長度為 1MB，所有數(shù)據(jù)存儲上限為 10MB。如:

wx.setStorage({
????key:"key",
????data:"value"
});

同樣，微信小程序也提供了getStorage({})方法，用于獲取對應(yīng)key中存儲的數(shù)據(jù)，其還有success、fail、complete三個回調(diào)函數(shù)，如:

wx.getStorage({
????key:?"key",
????success?(res)?{?//?成功獲取到對應(yīng)key中的數(shù)據(jù)
????},
????fail()?{?//?未成功獲取到對應(yīng)key中的數(shù)據(jù)
????},
????complete()?{?//?獲取對應(yīng)key數(shù)據(jù)結(jié)束，不管成功還是失敗都會執(zhí)行
????}
});

getStorage()和setStorage()方法本身是異步的，但是微信小程序提供了對應(yīng)的同步方法，即getStorageSync("key")和setStorageSync("key", "value");

? 輪播圖組件
微信小程序提供了一個輪播圖組件，其中只可放置swiper-item組件，swiper有一些常用的屬性，如:

• indicator-dots: 是否顯示面板指示點(diǎn);
• autoplay: 是否自動切換;
• interval: 設(shè)置自動切換時間間隔;
• duration: 滑動動畫時長;
• circular: 是否循環(huán)播放;
• indicator-active-color: 設(shè)置當(dāng)前選中的指示點(diǎn)顏色;

<swiper :indicator-dots="indicatorDots" 
        :autoplay="autoPlay" 
        :interval="interval" 
        :duration="duration" 
        :circular="circular" 
        indicator-active-color="rgba(255,255,255, 0.6)">
????????<block v-for="(item, index) in imgUrls" :key="index">
????????????<swiper-item>
????????????????<img :src="item" class="slide-item"/>
????????????</swiper-item>
????????</block>
</swiper>

當(dāng)然，組件不僅僅能實(shí)現(xiàn)圖片的輪播，還可以實(shí)現(xiàn)其他輪播，比如列表內(nèi)容的輪播(導(dǎo)航和內(nèi)容的聯(lián)動)，我們不給其添加indicator-dots、autoplay、interval、duration、circular等屬性，而是通過手進(jìn)行滑動，swiper組件還有一個current屬性，屬性值為滑動塊的索引值，用于顯示對應(yīng)的滑動item，從而實(shí)現(xiàn)導(dǎo)航和內(nèi)容的聯(lián)動，即點(diǎn)擊導(dǎo)航，自動切換到對應(yīng)內(nèi)容。swiper組件也提供了change事件，當(dāng)我們手動滑動滑動item的時候，就會觸發(fā)change事件，可以在事件對象中拿到對應(yīng)滑塊的索引，從而更新導(dǎo)航位置，實(shí)現(xiàn)滑動內(nèi)容，自動高亮導(dǎo)航位置。

? 可滾動區(qū)域組件
微信提供了一個可滾動區(qū)域組件，用于設(shè)置該區(qū)域中的內(nèi)容是可以滾動的，通常用于實(shí)現(xiàn)可滾動的導(dǎo)航標(biāo)簽欄，其常用屬性為:

• scroll-x: 是否允許橫向滾動;
• scroll-y: 是否允許縱向滾動;
• scroll-into-view: 屬性值為對應(yīng)滾動item的id，表示自動滾動到對應(yīng)id元素位置;
• scroll-with-animation: 在設(shè)置滾動條位置時使用動畫過渡;

要實(shí)現(xiàn)點(diǎn)擊某個滾動item后，自動滾動到對應(yīng)滾動item位置，那么需要給每個滾動item添加一個id，然后動態(tài)改變scroll-into-view的值為對應(yīng)的滾動item的id即可。

<scroll-view class="btns_wrap" 
             scroll-x :scroll-into-view="toChildView" 
             scroll-with-animation>
????<span :class="{active: currentIndex === index}" 
          class="btn_scroll" 
          v-for="(item, index) in allLessons" 
          :key="index" 
          :id="item.id" 
          @click="switchItem(index)">
??????????{{item.name}}
????</span>
</scroll-view>

本文來自 小程序開發(fā) 欄目，歡迎學(xué)習(xí)！

The above is the detailed content of How does mpvue develop WeChat mini programs? Introduction to basic knowledge. For more information, please follow other related articles on the PHP Chinese website!