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

mpvue を使用した WeChat アプレット開発の基礎知識

hzc

リリース： 2020-06-22 11:28:16

転載

2839 人が閲覧しました

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

<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"
  }
}

ログイン後にコピー

② 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

①