mpvue を使用した WeChat アプレット開発の基礎知識-ミニプログラム開発-php.cn

1. mpvue の概要

mpvue は、Vue.js を使用して小さなプログラムを開発するフロントエンドフレームワークです。このフレームワークは Vue.js のコアに基づいています。mpvue は、ミニプログラム環境で実行できるように Vue.js のランタイムとコンパイラ実装 を変更し、完全な Vue.js 開発エクスペリエンスを導入します。ミニプログラム開発。 mpはミニプログラム の略称です。

2. mpvue によるクイックスタート

① スキャフォールディングによる mpvue テンプレートの導入

vue 3.0 は vue init コマンド

をサポートしなくなったため、別途インストールする必要があります @vue/cli-initインストール後、次の手順に従って mpvue テンプレートを導入できます

npm install -g @vue/cli-init vue init mpvue/mpvue-quickstart my-project cd my-project npm install npm run dev

ログイン後にコピー

npm run dev コマンドがプロジェクトに生成されますルートディレクトリ dist ディレクトリ。

vue プロジェクトを WeChat アプレットプロジェクトに変換します

② アプレットの開発環境を構築します

WeChat は専用の

を提供しますWeChat 開発者ツール

は、小規模なプログラムの開発に使用されます。WeChat 開発者ツールをダウンロードしてインストールする必要があります。また、小規模なプログラム ID ( AppID) を申請する必要もあります。理由は、です。 WeChat 開発者ツールを通じて小さなプログラムを作成します。プロジェクトには、WeChat パブリックプラットフォームで申請することで取得できる AppIDを入力する必要があります。 ③ プロジェクトのデバッグ

WeChat 開発者ツールを通じて WeChat アプレットプロジェクトを開始します。選択したプロジェクトディレクトリ

は、生成された dist ディレクトリではなく、mpvue プロジェクトのルートディレクトリです。

WeChat 開発者ツールは .vue ファイルの表示をサポートしていないため、ソースコードをデバッグするには独自の開発ツールを使用する必要があります。

3. mpvue の使い方詳細

① mpvue の src ディレクトリは vue と同じです。ルートコンポーネント

、

App.vue ルートコンポーネントは単なる構造です、には特定のコンテンツはありません、ルートコンポーネントには対応するmain.jsファイルが使用されますApp.vue ルートコンポーネントをレンダリングします。つまり、App.vue を導入し、Vue コンストラクターとして Vue インスタンスを作成してから、マウントします。また、app.jsonファイルもあります。、つまり、page グローバル設定ファイル、ページ登録、tabBar 登録、グローバルウィンドウスタイル設定に使用されます。たとえば、次のようになります。##// App.vue

ログイン後にコピー

// 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.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()

ログイン後にコピー

mpvue では、ページ内の .vue ファイルの名前は任意ですが、.js および .json ファイル名は mainに固定されています。通常、.vue ファイルもindex.vue を使用します。すべて

ページには通常、index.vue、main.js、main.json が含まれます

、

は外部フォルダーによって異なるページを区別します

、ネイティブアプレットでは、外部フォルダーによって異なるページも区別されますが、 フォルダー内の 4 つのファイル各ページの名前は外側のフォルダーと同じでも、異なっていてもかまいませんが、4 つのファイルのは同じである必要があります。 ③ 新しいページを追加するたびに、プロジェクトを再起動する必要があります 。つまり、npm run devを再実行します。

4. WeChat ミニプログラムの基本と共通 API

①

ボタンをクリックして、ユーザーを承認してユーザー情報を取得するかどうかを確認する

WeChat ミニプログラムは Button

ログイン後にコピー

)、ページジャンプ (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 } });

④跳转页面非tabBar页面
如果想要跳转到某个非tabBar页面，那么可以使用一个全局的api，即wx.redirectTo({})，其作用就是关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。需要传递一个配置对象，主要属性为url，即要跳转页面的路径，可带参数，然后就是success、fail、complete三个回调函数，请处理跳转结果，如:

⑤跳转到tabBar页面
在微信小程序中，tabBar页面是需要特殊的方式跳转的，即使用wx.switchTab({})的方式，其会跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面，其用法同wx.redirectTo({});

⑥页面配置文件
小程序的页面配置文件分为全局配置文件app.json与即页面配置main.json. 全局配置文件可配置项比较多，整个配置文件内容要用花括号括起来，也就是说是一个JSON对象，如:

⑧导航到某个页面
所谓导航到某个页面，就是跳转到某个页面，但是其会保留当前页面，跳转的目的页面导航栏左侧中自带一个返回按钮，点击可以回到之前的页面，但是这个跳转的目的页面不能是tabbar中的页面，其使用的是wx.navigateTo({})

⑨动态设置页面导航栏标题
当我们点击列表中的某个具体项时，通常需要在其对应页面动态显示出当前点击项的具体导航栏标题，微信小程序提供了wx.setNavigationBarTitle({})用于动态设置导航栏栏标题，同样有success、fail、complete三个回调函数，如:

⑩本地缓存数据
微信小程序提供了setStorage({})方法，可以将数据存储在本地缓存中指定的 key 中，除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。如:

同样，微信小程序也提供了getStorage({})方法，用于获取对应key中存储的数据，其还有success、fail、complete三个回调函数，如:

wx.getStorage({ key: "key", success (res) { // 成功获取到对应key中的数据 }, fail() { // 未成功获取到对应key中的数据 }, complete() { // 获取对应key数据结束，不管成功还是失败都会执行 } });