Vue.js を使用して WeChat パブリックアカウントメニューエディターを実装する方法 (詳細なアイデア)-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Vue.js を使用して WeChat パブリックアカウントメニューエディターを実装する方法 (詳細なアイデア)

May 31, 2018 am 09:44 AM

javascript vue.js 使用

今回は、Vue.jsを使用してWeChatパブリックアカウントメニューエディタを実装する方法を紹介します（アイデアの詳細な説明）Vue.jsを使用してWeChatパブリックアカウントメニューエディタを実装する場合の注意点は次のとおりです。実際のケースを見てみましょう。

しばらく Vue.js を勉強しているので、WeChat プラットフォームのようなメニューエディターを作成してみたいと思います。ここで共有してください

特定のスタイルコードについてはプロジェクトの github を参照してください

vue インスタンス

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
 &lt;meta charset=&quot;UTF-8&quot;&gt;
 &lt;title&gt;&lt;/title&gt;
 &lt;script src=&quot;https://cdn.bootcss.com/vue/2.5.9/vue.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;p class=&quot;content&quot; style=&quot;width:900px;margin:0 auto;&quot;&gt;
 &lt;!-- vue实例挂载的DOM元素 --&gt;
 &lt;p id=&quot;app-menu&quot;&gt;
 &lt;!-- 菜单预览界面 --&gt;
 &lt;p class=&quot;weixin-preview&quot;&gt;&lt;/p&gt;
 &lt;!-- 菜单编辑界面 --&gt;
 &lt;p class=&quot;weixin-menu-detail&quot;&gt;&lt;/p&gt;
 &lt;/p&gt;
 &lt;/p&gt;
 &lt;script&gt;
 var app = new Vue({
 el: '#app-menu',//挂载到对应的DOM元素
 data: {
 weixinTitle: 'Vue.js公众号菜单',
 //菜单对象
 menu: {
  "button": [
  {
  "name": "主菜单1",
  "sub_button": []
  },
  {
  "name": "主菜单2",
  "sub_button": []
  },
  {
  "name": "主菜单3",
  "sub_button": [
  {
  "name": "子菜单1"
  }]
  }]
 },
 selectedMenuIndex:'',//当前选中菜单索引
 selectedSubMenuIndex:'',//当前选中子菜单索引
 },
 methods: {
 }
 })
 &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

ログイン後にコピー

メニューデータをテンプレートにレンダリングします

ここでは、v-if と v-for を使用してデータをテンプレートにレンダリングします。メインメニューは最大 3 つあります。各メインメニューには最大 5 つのサブメニューがあります。

&lt;p class=&quot;weixin-preview&quot;&gt;
 &lt;p class=&quot;weixin-hd&quot;&gt;
 &lt;p class=&quot;weixin-title&quot;&gt;{{weixinTitle}}&lt;/p&gt;
 &lt;/p&gt;
 &lt;p class=&quot;weixin-bd&quot;&gt;
 &lt;ul class=&quot;weixin-menu&quot;&gt;
 &lt;!-- 这里使用v-for开始循环主菜单 --&gt;
 &lt;li v-for=&quot;(btn,i) in menu.button&quot; class=&quot;menu-item&quot;&gt;
 &lt;p class=&quot;menu-item-title&quot;&gt;
  &lt;span&gt;{{ btn.name }}&lt;/span&gt;
 &lt;/p&gt;
 &lt;ul class=&quot;weixin-sub-menu&quot;&gt;
  &lt;!-- 这里使用v-for开始循环主菜单下的子菜单 --&gt;
  &lt;li v-for=&quot;(sub,i2) in btn.sub_button&quot; class=&quot;menu-sub-item&quot;&gt;
  &lt;p class=&quot;menu-item-title&quot;&gt;
  &lt;span&gt;{{sub.name}}&lt;/span&gt;
  &lt;/p&gt;
  &lt;/li&gt;
  &lt;!-- 这里使用v-if 判断子菜单小于5个，则添加按钮来添加子菜单 --&gt;
  &lt;li v-if=&quot;btn.sub_button.length&lt;5&quot; class=&quot;menu-sub-item&quot;&gt;
  &lt;p class=&quot;menu-item-title&quot;&gt;
  &lt;i class=&quot;icon14_menu_add&quot;&gt;&lt;/i&gt;
  &lt;/p&gt;
  &lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
 &lt;!-- 这里使用v-if 判断主菜单小于3个，则添加按钮来添加主菜单 --&gt;
 &lt;li class=&quot;menu-item&quot; v-if=&quot;menu.button.length&lt;3&quot;&gt; &lt;i class=&quot;icon14_menu_add&quot;&gt;&lt;/i&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/p&gt;
&lt;/p&gt;

ログイン後にコピー

vueインスタンスにメソッドを追加します

vueインスタンスのメソッドオブジェクトにカスタムメソッドを追加します

methods: {
 //选中主菜单
 selectedMenu:function (i) {
 this.selectedSubMenuIndex = ''
 this.selectedMenuIndex = i
 },
 //选中子菜单
 selectedSubMenu:function (i) {
 this.selectedSubMenuIndex = i
 },
 //选中菜单级别
 selectedMenuLevel: function () {
 if (this.selectedMenuIndex !== '' &amp;&amp; this.selectedSubMenuIndex === '') {
 //主菜单
 return 1;
 } else if (this.selectedMenuIndex !== '' &amp;&amp; this.selectedSubMenuIndex !== '') {
 //子菜单
 return 2;
 } else {
 //未选中任何菜单
 return 0;
 }
 },
 //添加菜单 
 //参数level为菜单级别，1为主菜单、2为子菜单
 addMenu:function (level) {
 if (level == 1 &amp;&amp; this.menu.button.length &lt; 3) {
 this.menu.button.push({&quot;name&quot;: &quot;菜单名称&quot;,
 &quot;sub_button&quot;: []
 })
 this.selectedMenuIndex = this.menu.button.length - 1
 this.selectedSubMenuIndex = &#39;&#39;
 }
 if (level == 2 &amp;&amp; this.menu.button[this.selectedMenuIndex].sub_button.length &lt; 5) {
 this.menu.button[this.selectedMenuIndex].sub_button.push({
 &quot;name&quot;: &quot;子菜单名称&quot;
 })
 this.selectedSubMenuIndex = this.menu.button[this.selectedMenuIndex].sub_button.length - 1
 }
 }
}

ログイン後にコピー

メニューにメソッドをバインドします

メニューがクリックされてselectedMenuをトリガーするとき[追加] ボタンをクリックすると、addMenu メソッドがトリガーされます。イベントをリッスンするには v-on を使用します。クリックイベント @click をリッスンするには、.stop イベント修飾子を使用します。泡立つ @click.stop

切り替えメニューが選択されているときにクラスを追加するには v-bind:class を使用します。 :class は略語です

&lt;ul class=&quot;weixin-menu&quot; id=&quot;weixin-menu&quot; &gt;
 &lt;!-- 判断如果selectedMenuIndex是当前点击的主菜单索引则添加current样式 --&gt;
 &lt;li v-for=&quot;(btn,i) in menu.button&quot; class=&quot;menu-item&quot; :class=&quot;{current:selectedMenuIndex===i&amp;&amp;selectedMenuLevel()==1}&quot; @click=&quot;selectedMenu(i)&quot;&gt;
 &lt;p class=&quot;menu-item-title&quot;&gt;
 &lt;span&gt;{{ btn.name }}&lt;/span&gt;
 &lt;/p&gt;
 &lt;!-- v-show来切换是否显示 这里如果选中了主菜单则子菜单弹出 --&gt;
 &lt;ul class=&quot;weixin-sub-menu&quot; v-show=&quot;selectedMenuIndex===i&quot;&gt;
 &lt;li v-for=&quot;(sub,i2) in btn.sub_button&quot; class=&quot;menu-sub-item&quot; :class=&quot;{current:selectedSubMenuIndex===i2&amp;&amp;selectedMenuLevel()==2}&quot; @click.stop=&quot;selectedSubMenu(i2)&quot;&gt;
 &lt;p class=&quot;menu-item-title&quot;&gt;
  &lt;span&gt;{{sub.name}}&lt;/span&gt;
 &lt;/p&gt;
 &lt;/li&gt;
 &lt;li v-if=&quot;btn.sub_button.length&lt;5&quot; class=&quot;menu-sub-item&quot; @click.stop=&quot;addMenu(2)&quot;&gt;
  &lt;p class=&quot;menu-item-title&quot;&gt;
  &lt;i class=&quot;icon14_menu_add&quot;&gt;&lt;/i&gt;
  &lt;/p&gt;
 &lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
 &lt;li class=&quot;menu-item&quot; v-if=&quot;menu.button.length&lt;3&quot; @click=&quot;addMenu(1)&quot;&gt;
 &lt;i class=&quot;icon14_menu_add&quot;&gt;&lt;/i&gt;
 &lt;/li&gt;
&lt;/ul&gt;

ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

JS コールバック関数を使用する手順の詳細な説明

JS の一般的なアルゴリズムの累積、反復、枯渇、再帰実装 (コード付き)

以上がVue.js を使用して WeChat パブリックアカウントメニューエディターを実装する方法 (詳細なアイデア)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。