mpvue はどのように WeChat ミニ プログラムを開発するのですか?基礎知識の紹介

青灯夜游
リリース: 2019-11-25 15:10:16
転載
3392 人が閲覧しました

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

mpvue はどのように WeChat ミニ プログラムを開発するのですか?基礎知識の紹介

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 開発者ツールを通じて小さなプログラムを作成します。プログラム プロジェクトには AppID を入力する必要があり、WeChat パブリック プラットフォームで申請できます。

③ プロジェクトのデバッグ

WeChat 開発者ツールを通じて WeChat アプレット プロジェクトを開始します。選択したプロジェクト ディレクトリ は、生成された dist ディレクトリではなく、mpvue プロジェクトのルート ディレクトリです。 WeChat 開発者ツールは .vue ファイルの表示をサポートしていないため、 ソース コードをデバッグするには独自の開発ツールを使用する必要があります。

mpvue の使い方の詳細

① mpvue の src ディレクトリは vue と同じです App.vue ルート コンポーネントもあります , アプリ.vue ルート コンポーネントは単なる A 構造 であり、 には特定のコンテンツ がありません。ルート コンポーネントには、App.vue ルート コンポーネントをレンダリングするために使用される対応する main.js ファイルがあります。つまり、 は App.vue を導入し、Vue コンストラクターとして機能します。 Vue コンストラクターは Vue インスタンスを作成し、次にマウント します。また、app.json ファイル ( ページ) もあります。グローバル設定ファイル ページ登録 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 で定義されたページは、pages ディレクトリ##に配置されます。 # src ディレクトリの下にあります。1 ページは 1 つのフォルダーに対応します, 各ページ フォルダーには、.vue ファイル main.js ファイル が必要です。 main.js が行うことは、 現在のページに対応する .vue を導入し、Vue インスタンスを作成し、Vue コンストラクターのパラメーターとして をマウントすることです。main.js の名前は変更できませんmpvue では、, は 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()
ログイン後にコピー
のみにすることができます。ただし、ページ内の .vue ファイルの名前は任意です。 ,
.js ファイルと .json ファイルの名前は main に固定されています。通常、.vue ファイルも常に Index.vue を使用します。ページには通常、index.vue、main.js、main.json# が含まれます##、異なるページは外側のフォルダーによって区別されます、ネイティブ アプレットでは、異なるページも外側のフォルダーによって区別されますが、 フォルダー内の 4 つのページの名前は同じにすることができます。外側のフォルダー、または異なっていてもかまいませんが、4 つのファイルの名前は統一する必要があります。 新しいページが追加されるたびに、プロジェクトを再起動する必要がありますつまり、npm run devを再実行します。

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

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

WeChat アプレットにはいくつかのボタンがあります

関連ラベル:
ソース:segmentfault.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート