mpvue ist ein Front-End-Framework für die Entwicklung kleiner Programme mit Vue.js. Das Framework basiert auf dem Kern von Vue.js. mpvue modifiziert die Laufzeit- und Compiler-Implementierungen von Vue.js, sodass es in einer Miniprogrammumgebung ausgeführt werden kann, und führt so eine vollständige Vue.js-Entwicklungserfahrung für die Miniprogrammentwicklung ein. mp ist die Abkürzung für Miniprogramm.
① MPvue-Vorlage über Gerüst einführen
vue 3.0 ist bereits unterstützt den Vue-Init-Befehl nicht Sie müssen es also separat installieren @vue/cli-init Nach der Installation können Sie die folgenden Schritte ausführen, um die mpvue-Vorlage einzuführen
npm install -g @vue/cli-init vue init mpvue/mpvue-quickstart my-project cd my-project npm install npm run dev
Der Befehl npm run dev wird ausgeführt sich im Projektstammverzeichnis befinden. Generieren Sie ein dist-Verzeichnis, das das Vue-Projekt in ein WeChat-Applet-Projekt konvertieren soll
② Erstellen Sie eine Entwicklungsumgebung für das Applet
WeChat stellt eine spezielle WeChat Developer Tools zur Verfügung, die zum Entwickeln von Miniprogrammen verwendet wird. Sie müssen WeChat Developer Tools herunterladen und installieren. Außerdem müssen Sie eine Miniprogramm-ID beantragen, nämlich AppID erstellt Miniprogramme über WeChat Developer Tools. Programmprojekte müssen die AppID ausfüllen , die auf der öffentlichen WeChat-Plattform beantragt werden kann.
③ Debugging-Projekt
Starten Sie das WeChat-Applet-Projekt über das WeChat-Entwicklertool. Das ausgewählte Projektverzeichnis ist das Stammverzeichnis des mpvue-Projekts, nicht das generierte dist-Verzeichnis . Da die WeChat-Entwicklertools das Anzeigen von .vue-Dateien nicht unterstützen , müssen wir immer noch unsere eigenen Entwicklungstools verwenden, um den Quellcode zu debuggen.
① Das src-Verzeichnis von mpvue ist dasselbe wie das von vue. verfügt außerdem über eine App.vue-Stammkomponente , App.vue Die Stammkomponente ist nur eine Struktur , hat keinen spezifischen Inhalt und die Stammkomponente verfügt über eine entsprechende main.js-Datei zum Rendern der App.vue-Stammkomponente, d. h. wird in App.vue eingeführt und dient als Der Vue-Konstruktor erstellt eine Vue-Instanz, mountet sie dann, und es gibt auch eine app.json-Datei, die die Seite global darstellt Konfigurationsdatei, verwendet für Seitenregistrierung, TabBar-Registrierung, Globale Fensterstileinstellungen, wie zum Beispiel:
// 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" } }
② Die in mpvue definierten Seiten werden im Seitenverzeichnis abgelegt unter dem src-Verzeichnis. Eine Seite entspricht einem Ordner, jeder Seitenordner muss eine .vue-Datei und eine main.js-Datei haben .js führt Folgendes aus: führt die der aktuellen Seite entsprechende .vue-Datei ein, erstellt dann eine Vue-Instanz und mountet als Parameter des Vue-Konstruktors, und der Name von main.js kann nicht sein geändert , kann nur main sein.
/ / 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, obwohl der Name der .vue-Datei auf einer Seite sein kann Beliebig, der Name von .js- und .json-Dateien ist auf main festgelegt. Normalerweise verwenden wir auch immer index.vue.Eine Seite enthält normalerweise index.vue und main.js , main.json und verschiedene Seiten werden durch äußere Ordner unterschieden, und im nativen Applet werden verschiedene Seiten auch durch äußere Ordner unterschieden, aber die Namen der vier Seiten im Der Ordner kann mit dem äußeren Ordner identisch sein oder unterschiedlich sein, aber die Namen der vier Dateien müssen einheitlich sein.③
Jedes Mal, wenn Sie eine neue Seite hinzufügen, müssen Sie das Projekt neu starten , d. h. npm run dev erneut ausführen.
WeChat Mini-Programm – Grundlagen und Allgemeines APIs①Klicken Sie auf die Schaltfläche, um den Benutzer zu fragen, ob er Benutzerinformationen autorisieren und abrufen soll
Das WeChat-Applet stellt uns Schaltflächen zur Verfügung wx globales Objekt Genau wie eine Webseite Wenn es in einer Browserumgebung ausgeführt wird, stellt die Browserumgebung ein globales Fensterobjekt bereit. Das gleiche Miniprogramm wird in der Miniprogrammumgebung ausgeführt. Die Miniprogrammumgebung stellt auch ein globales WX-Objekt bereit. ③ 微信小程序中发起网络请求 ④ 跳转页面非tabBar页面 ⑤ 跳转到tabBar页面 ⑥ 页面配置文件 ⑦ 小程序页面与Vue生命周期 ⑧ 导航到某个页面 ⑨ 动态设置页面导航栏标题 ⑩ 本地缓存数据 同样,微信小程序也提供了getStorage({})方法,用于获取对应key中存储的数据,其还有success、fail、complete三个回调函数,如: ⑪ 轮播图组件 ⑫ 可滚动区域组件 本文来自 小程序开发 栏目,欢迎学习!
WX stellt viele APIs bereit , wie zum Beispiel Zugriff auf das Netzwerk (wx.request({}) ), Seitensprung (wx.redirectTo({})), Laden der Anzeige (wx.showLoading( {})), Anzeigeaufforderung (wx. showToast({})) usw.
在小程序环境中不能像浏览器环境一个直接提供ajax,而是提供了一个全局的网络请求api,即wx.request(),在小程序环境中只能使用wx.request()发起网络请求,不能使用axios等常用的请求类库,并且wx.request()并不存在跨域问题。使用wx.request()的时候,需要传递一个请求参数配置对象,request()方法返回结果并不是一个Promise对象,所以不能通过.then()的方式去处理请求结果,而是在请求配置对象中添加了success、fail、complete等回调函数,在回调函数中可以获取到请求的结果,如:wx.request({
url: "http://www.baidu.com", // 请求url地址必填
data: {
user: "even li"
},
method: "get", // 请求方法
header: {
"content-type": "application/json" // 默认值
},
success(res) {
console.log(res.data); // 获取响应数据
},
fail(error) {
console.log(error); // 请求失败
}
complete(res) { // 接口调用结束,请求成功或失败都会执行
console.log(res); // 如果请求成功则res为响应结果res,如果请求失败则res为错误信息error
}
});
需要注意的是,返回状态码为404也算请求成功,一般只有网络异常的时候才算请求失败。
如果想要跳转到某个非tabBar页面,那么可以使用一个全局的api,即wx.redirectTo({}),其作用就是关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。需要传递一个配置对象,主要属性为url,即要跳转页面的路径,可带参数,然后就是success、fail、complete三个回调函数,请处理跳转结果,如:wx.redirectTo({
url: "../question/main", // 在某个页面内../相当于pages/
success() {
},
fail() {
},
complete() {
}
});
在微信小程序中,tabBar页面是需要特殊的方式跳转的,即使用wx.switchTab({})的方式,其会跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面,其用法同wx.redirectTo({});wx.switchTab({
url: "../learn/main", // 在某个页面内../相当于pages/
success() {
},
fail() {
},
complete() {
}
});
小程序的页面配置文件分为全局配置文件app.json与即页面配置main.json. 全局配置文件可配置项比较多,整个配置文件内容要用花括号括起来,也就是说是一个JSON对象,如:
微信小程序设置颜色的时候,只支持十六进制颜色,不支持RGB格式和颜色英文。
页面配置配置相对于全局主配置文件来说要简单得多,在页面配置文件中只能配置窗口的样式属性,即只能配置全局配置文件中的window属性中的内容,页面配置文件中配置的内容会覆盖掉全局配置文件中window中相同的配置,以决定当前页面的窗口表现,无需使用window属性,直接将window配置放到花括号中即可。
小程序给页面提供了onLoad(页面加载)、onShow(页面显示,但还未渲染完成)、onReady(页面渲染完成)、onHide(页面隐藏)、onUnload(页面卸载),mpvue将小程序提供的页面生命周期和vue的生命周期结合在了一起,也就是说使用mpvue开发小程序,可以同时使用小程序的生命周期和vue的生命周期,其顺序为: beforeCreate --> created --> onLoad --> onShow --> onReady --> beforeMount --> mounted。即Vue首先实例化然后页面开始加载、显示、渲染,页面渲染完成后Vue实例开始挂载。
所谓导航到某个页面,就是跳转到某个页面,但是其会保留当前页面,跳转的目的页面导航栏左侧中自带一个返回按钮,点击可以回到之前的页面,但是这个跳转的目的页面不能是tabbar中的页面,其使用的是wx.navigateTo({})wx.navigateTo({
url: "../myLesson/main" // 导航到我的课程页面,目标页面自带返回按钮,点击可返回之前的页面
});
当我们点击列表中的某个具体项时,通常需要在其对应页面动态显示出当前点击项的具体导航栏标题,微信小程序提供了wx.setNavigationBarTitle({})用于动态设置导航栏栏标题,同样有success、fail、complete三个回调函数,如:wx.setNavigationBarTitle({
title: "动态标题内容",
success() {
},
fail() {
},
complete() {
}
});
微信小程序提供了setStorage({})方法,可以将数据存储在本地缓存中指定的 key 中,除非用户主动删除或因存储空间原因被系统清理,否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB。如:wx.setStorage({
key:"key",
data:"value"
});
wx.getStorage({
key: "key",
success (res) { // 成功获取到对应key中的数据
},
fail() { // 未成功获取到对应key中的数据
},
complete() { // 获取对应key数据结束,不管成功还是失败都会执行
}
});
getStorage()和setStorage()方法本身是异步的,但是微信小程序提供了对应的同步方法,即getStorageSync("key")和setStorageSync("key", "value");
微信小程序提供了一个
<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>
当然,
微信提供了一个
要实现点击某个滚动item后,自动滚动到对应滚动item位置,那么需要给每个滚动item添加一个id,然后动态改变scroll-into-view的值为对应的滚动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>
Das obige ist der detaillierte Inhalt vonWie entwickelt mpvue WeChat-Miniprogramme? Einführung in das Grundwissen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!