ホームページ > 記事 > WeChat アプレット > mpvue を使用した WeChat アプレット開発の基礎知識
mpvue は、Vue.js を使用して小さなプログラムを開発するフロントエンド フレームワークです。このフレームワークは Vue.js のコアに基づいています。mpvue は、ミニ プログラム環境で実行できるように Vue.js のランタイムとコンパイラ実装 を変更し、完全な Vue.js 開発エクスペリエンスを導入します。ミニプログラム開発。 mpはミニプログラムの略称です。
をサポートしなくなったため、別途インストールする必要があります @vue/cli-init インストール後、次の手順に従って mpvue テンプレートを導入できますvue プロジェクトを WeChat アプレット プロジェクトに変換しますnpm install -g @vue/cli-init vue init mpvue/mpvue-quickstart my-project cd my-project npm install npm run devnpm run dev コマンドがプロジェクトに生成されますルート ディレクトリ dist ディレクトリ。
② アプレットの開発環境を構築します
WeChat は専用の
を提供しますWeChat 開発者ツールは、小規模なプログラムの開発に使用されます。WeChat 開発者ツールをダウンロードしてインストールする必要があります。また、小規模なプログラム ID (AppID) を申請する必要もあります。理由は、 です。 WeChat 開発者ツールを通じて小さなプログラムを作成します。プロジェクトには、WeChat パブリック プラットフォームで申請することで取得できる AppID を入力する必要があります。 ③ プロジェクトのデバッグ
WeChat 開発者ツールを通じて WeChat アプレット プロジェクトを開始します。選択したプロジェクト ディレクトリ
は、生成された dist ディレクトリではなく、mpvue プロジェクトのルート ディレクトリです。WeChat 開発者ツールは .vue ファイルの表示をサポートしていないため、 ソース コードをデバッグするには独自の開発ツールを使用する必要があります。3. mpvue の使い方詳細
App.vue ルート コンポーネントは単なる構造です 、 には特定のコンテンツはありません、ルート コンポーネントには対応する main.js ファイルが使用されますApp.vue ルート コンポーネントをレンダリングします。つまり、 App.vue を導入し、Vue コンストラクターとして Vue インスタンスを作成してから、マウントします。また、app.json ファイルもあります。 、つまり、page グローバル設定ファイル 、 ページ登録 、tabBar 登録 、グローバル ウィンドウ スタイル設定 に使用されます。たとえば、次のようになります。 ##// App.vue3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
}
2cacc6d41bbb37262a98f745aa00fbf0
c9ccee2e6ea535a969eb3f532ad9fe89
page {
width: 100%;
height: 100%;
background-color: #f7f7f7;
}
531ac245ce3e4fe3d50054a55f265927
// 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" } }② mpvue で定義されたページsrc ディレクトリの pages に配置されます。ディレクトリ
では、
1 ページが 1 つのフォルダ に対応し、各ページ フォルダには .vue ファイル ## が必要です。 # と main.js ファイル , main .js が主に行うことは、現在のページに対応する .vue を導入し、Vue コンストラクターのパラメーターとして Vue インスタンスを作成してマウント、および main.js の名前は変更できません,main のみ可能です.// main.jsimport 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()
mpvue では、ページ内の .vue ファイルの名前は任意ですが、.js および .json ファイル名は main に固定されています。通常、.vue ファイルもindex.vue を使用します。すべて
、
は外部フォルダーによって異なるページを区別します、ネイティブ アプレットでは、外部フォルダーによって異なるページも区別されますが、 フォルダー内の 4 つのファイル 各ページの名前は外側のフォルダーと同じでも、異なっていてもかまいませんが、4 つのファイルの は同じである必要があります。 ③ 新しいページを追加するたびに、プロジェクトを再起動する必要があります。つまり、npm run devを再実行します。
4. WeChat ミニ プログラムの基本と共通 API
①WeChat ミニ プログラムは Buttonbb9345e55eb71822850ff156dfde57c8 を提供します。WeChat 開発機能 は、
open-type属性を追加することで を表現します。 bb9345e55eb71822850ff156dfde57c8 タグにボタンに機能タイプ (getUserInfo など)、つまりボタンをクリックしてユーザー情報を取得する機能を与えるには、## をリッスンする必要があります。 bb9345e55eb71822850ff156dfde57c8 の #getuserinfo イベント、mpvue ミニ プログラムに基づいてカプセル化されており、ユーザー情報は e.mp.detail.userInfo、 を通じて取得する必要があります。wx.request({})1b84c2ef82cb742a2cccf70ca3d50af4点击开始65281c5ac262bf6d81768915a4a77ac0 3f1c4e4b6b16bbbd69b2ee476dc4f83a export default { getUserInfo(e) { console.log(e.mp.detail.userInfo); // 获取用户信息 } } 2cacc6d41bbb37262a98f745aa00fbf0② wx グローバル オブジェクト ブラウザ環境で実行される Web ページと同様に、ブラウザ環境はグローバル ウィンドウ オブジェクトを提供します。同様に、ミニ プログラムはミニ プログラム環境で実行されます。 . ミニ プログラム環境は、グローバル wx オブジェクト も提供します。wx は、ネットワークへのアクセス (
)、ページ ジャンプ (wx.redirectTo({}))、読み込みの表示 (
wx.showLoading({}))、プロンプトの表示 (wx.showToast({}))など
③ 微信小程序中发起网络请求
在小程序环境中不能像浏览器环境一个直接提供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页面
如果想要跳转到某个非tabBar页面,那么可以使用一个全局的api,即wx.redirectTo({}),其作用就是关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。需要传递一个配置对象,主要属性为url,即要跳转页面的路径,可带参数,然后就是success、fail、complete三个回调函数,请处理跳转结果,如:
wx.redirectTo({ url: "../question/main", // 在某个页面内../相当于pages/ success() { }, fail() { }, complete() { } });
⑤ 跳转到tabBar页面
在微信小程序中,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配置放到花括号中即可。
⑦ 小程序页面与Vue生命周期
小程序给页面提供了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" });
同样,微信小程序也提供了getStorage({})方法,用于获取对应key中存储的数据,其还有success、fail、complete三个回调函数,如:
wx.getStorage({ key: "key", success (res) { // 成功获取到对应key中的数据 }, fail() { // 未成功获取到对应key中的数据 }, complete() { // 获取对应key数据结束,不管成功还是失败都会执行 } });
getStorage()和setStorage()方法本身是异步的,但是微信小程序提供了对应的同步方法,即getStorageSync("key")和setStorageSync("key", "value");
⑪ 轮播图组件
微信小程序提供了一个806a43c0997cff837bc4d4708cd6ae53轮播图组件,其中只可放置swiper-item组件,swiper有一些常用的属性,如:
382b563c9fc8b25f4069f27991de6a93 3e350b609204f318855334b7470a220e 718137ecd0896f921b876dfd20260138 1f614e0bc8782717a386429e7848db05 6b9c44cec84deee6d613a7bf98241fff 36b196a5d42bcd29e331cb722979f9a6 00d60d359d79ef3ad471162a03ef38f0
当然,806a43c0997cff837bc4d4708cd6ae53组件不仅仅能实现图片的轮播,还可以实现其他轮播,比如列表内容的轮播(导航和内容的联动),我们不给其添加indicator-dots、autoplay、interval、duration、circular等属性,而是通过手进行滑动,swiper组件还有一个current属性,属性值为滑动块的索引值,用于显示对应的滑动item,从而实现导航和内容的联动,即点击导航,自动切换到对应内容。swiper组件也提供了change事件,当我们手动滑动滑动item的时候,就会触发change事件,可以在事件对象中拿到对应滑块的索引,从而更新导航位置,实现滑动内容,自动高亮导航位置。
⑫ 可滚动区域组件
微信提供了一个050e2adc6de973d5d8d682f9c1b9f656可滚动区域组件,用于设置该区域中的内容是可以滚动的,通常用于实现可滚动的导航标签栏,其常用属性为:
要实现点击某个滚动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>
推荐教程:《微信小程序》
以上がmpvue を使用した WeChat アプレット開発の基礎知識の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。