asp.net mvc를 통해 WeChat 사용자 정의 메뉴 편집 도구를 개발하기 위한 코드 예제-C#.Net 튜토리얼-php.cn

집

백엔드 개발

C#.Net 튜토리얼

asp.net mvc를 통해 WeChat 사용자 정의 메뉴 편집 도구를 개발하기 위한 코드 예제

Y2J

May 20, 2017 pm 01:40 PM

asp.netbootstrapmvc메뉴

이 글은 주로 asp.net mvc, Boostrap, knockout.js를 이용한 WeChat 사용자 정의 메뉴 편집 도구 개발을 소개합니다. 매우 훌륭하고 도움이 필요한 친구들이 참고할 수 있습니다.

머리말

WeChat의 인터페이스 디버깅 도구는 사용자 정의 메뉴를 편집할 수 있지만 메뉴를 생성하려면 json 형식의 데이터만 제출하면 되기 때문에 매우 불편하고 오류가 발생하기 쉽습니다. 온라인 도구는 사용하기 쉽지 않아서 제가 직접 작성했습니다.

텍스트

먼저 부트스트랩을 사용하여 페이지프레임을 정렬하고 사용자 정의 메뉴를 호출합니다. 인터페이스는 AccessToken을 사용해야 하며, AccessToken을 입력하기 위한 입력 상자를 배치해야 합니다. AccessToken을 얻기 위해 AppId와 AppSecret을 직접 입력하려는 사용자도 제외되지 않으므로 AccessToken을 입력할지 아니면 직접 AccessToken을 얻을지 선택하는 드롭다운 메뉴도 필요합니다. WeChat 기업 계정 애플리케이션 생성 메뉴를 고려하기 위해 AgentId, CorpId, 제품군 영구 인증 코드, SuiteId, SuiteSecret, SuiteTicket 및 매개 변수 입력 상자는 대략 다음과 같습니다.

관찰 가능 항목 모니터링 속성 을 정의하려면 녹아웃을 사용하세요. 그리고 입력 상자에 바인딩합니다.

위챗 공식 계정 메뉴에 대한 메뉴 표시 및 메뉴 편집 모듈을 정의합니다. 다섯 개의 하위 메뉴에서 구성할 수 있습니다. 일반적인 아이디어는 다음과 같습니다. 페이지 레이아웃은 6행 3열입니다. 세 개의 큰 메뉴가 완전히 구성되지 않은 경우 각 상위 메뉴의 하위 메뉴는 구성되지 않습니다. 가득 차면 위에 메뉴 추가 버튼이 표시됩니다. 구성이 가득 차지 않은 경우 공백 p가 해당 위치를 차지하는 데 사용됩니다.

사용자 정의 길이

배열을 생성하려면

함수

정의

녹아웃을 사용하여 메뉴 모니터링 속성 정의 및 형식

{
 "button": [
  {
   "name": "父级菜单1",
   "sub_button": [
    {
     "type": "view",
     "name": "子菜单1",
     "url": ""
    }
   ]
  },
  {
   "name": "父级菜单1",
   "sub_button": [
    {
     "type": "view",
     "name": "子菜单2",
     "url": ""
    },
    {
     "type": "view",
     "name": "子菜单1",
     "url": ""
    }
   ]
  }
 ]
}

에 대한 추가, 편집,

삭제

메뉴 기능을 정의하고, 편집 메뉴 추가 시 임시 모니터링 속성을 정의하고, 현재 편집 메뉴

인덱스 .

메뉴를 하나씩 편집하는 것은 그리 편리하지 않기 때문에 메뉴의 상하좌우 이동도 정의해야 하고 복사도 해야 합니다. 그리고 붙여넣기 기능.

function MenuFormValidate() {
   $("#MenuForm").validate({
    rules: {
     name: {
      required: true
     },
     value: {
      required: false
     }
    },
    messages: {
     name: {
      required: "请输入名称"
     },
     value: {
      required: $("#txtMenuButtonValue").attr("placeholder")
     }
    }
   });
  }
 　　　　　　　　　MenusReset:function () {
     var menus = JSON.stringify(model.Menus());
     model.Menus(undefined);
     model.Menus(JSON.parse(menus));//刷新菜单对象
     MenuFormValidate();//重新绑定验证方法
    },
MenuIndex: ko.observable(), //父级菜单索引
    isEditMenu: ko.observable(false), //是否是编辑菜单
    BottonIndex: ko.observable(-1), //编辑菜单的父级菜单索引
    SubBottonIndex: ko.observable(-1), //编辑菜单的子菜单索引
    Menu: ko.observable(),//编辑菜单时临时监控属性
    CopyMenu: ko.observable(),//复制的菜单对象
    Copy: function () { //复制
     if (model.Menu() != undefined) {
      var menu = JSON.stringify(model.Menu());
      model.CopyMenu(JSON.parse(menu));
      model.Menu(undefined);
     }
    },
    Paste: function () {//粘贴
     if (model.CopyMenu() != undefined) {
      var menu = JSON.parse(JSON.stringify(model.CopyMenu()));
      if (model.SubBottonIndex() !== -1 && menu.sub_button != undefined || (!model.isEditMenu() && model.MenuIndex() != undefined)) {
       delete menu.sub_button;
      }
      model.Menu(menu);
      MenuFormValidate();
     }
    },
    Up: function () {//向上移动
     var bottonIndex = model.BottonIndex();
     var subBottonIndex = model.SubBottonIndex();
     var newSubBottonIndex = subBottonIndex - 1;
     model.Menus().button[bottonIndex].sub_button[subBottonIndex] = model.Menus().button[bottonIndex].sub_button[newSubBottonIndex];
     model.Menus().button[bottonIndex].sub_button[newSubBottonIndex] = model.Menu();
     model.MenusReset();
     model.SubBottonIndex(newSubBottonIndex);
    },
    Down: function () {//向下移动
     var bottonIndex = model.BottonIndex();
     var subBottonIndex = model.SubBottonIndex();
     var newSubBottonIndex = subBottonIndex + 1;
     model.Menus().button[bottonIndex].sub_button[subBottonIndex] = model.Menus().button[bottonIndex].sub_button[newSubBottonIndex];
     model.Menus().button[bottonIndex].sub_button[newSubBottonIndex] = model.Menu();
     model.MenusReset();
     model.SubBottonIndex(newSubBottonIndex);
    },
    Left: function () {//向左移动
     var bottonIndex = model.BottonIndex();
     var subBottonIndex = model.SubBottonIndex();
     if (subBottonIndex === -1) {
      var newBottonIndex = bottonIndex - 1;
      model.Menus().button[bottonIndex] = model.Menus().button[newBottonIndex];
      model.Menus().button[newBottonIndex] = model.Menu();
      model.MenusReset();
      model.BottonIndex(newBottonIndex);
     }
    },
    Right: function () {//向右移动
     var bottonIndex = model.BottonIndex();
     var subBottonIndex = model.SubBottonIndex();
     if (subBottonIndex === -1) {
      var newBottonIndex = bottonIndex + 1;
      model.Menus().button[bottonIndex] = model.Menus().button[newBottonIndex];
      model.Menus().button[newBottonIndex] = model.Menu();
      model.MenusReset();
      model.BottonIndex(newBottonIndex);
     }
    },
    EditMenu: function (obj, bottonindex, subbottonindex) {//编辑菜单
     model.BottonIndex(bottonindex);
     model.SubBottonIndex(subbottonindex);
     model.isEditMenu(true);
     var data = JSON.stringify(obj);
     model.Menu(JSON.parse(data));
     MenuFormValidate();
    },
    AddMenu: function (index) {//添加菜单
     model.BottonIndex(-1);
     model.SubBottonIndex(-1);
     model.isEditMenu(false);
     model.MenuIndex(index);
     var menu = { type: "view", name: "", value: "" };
     model.Menu(menu);
     MenuFormValidate();
    },
    DeleteMenu: function () {//删除菜单
     $(model.Menus().button).each(function (index, item) {
      if (index === model.BottonIndex() && model.SubBottonIndex() === -1) {
       model.Menus().button.splice(index, 1);
      }
      if (item.sub_button instanceof Array) {
       $(item.sub_button).each(function (index1) {
        if (index === model.BottonIndex() && index1 === model.SubBottonIndex()) {
         item.sub_button.splice(index1, 1);
        }
       });
      }
     });
     model.Menu(undefined);
     model.MenuIndex(undefined);
     model.BottonIndex(-1);
     model.SubBottonIndex(-1);
     model.MenusReset();
    },
    CancelMenuSave: function () {//取消编辑，重置参数
     model.Menu(undefined);
     model.MenuIndex(undefined);
     model.BottonIndex(-1);
     model.SubBottonIndex(-1);
    },
    MenuSave: function () {//保存编辑的菜单
     if (!$("#MenuForm").data("validator").form()) {
      return;
     }
     if (model.isEditMenu()) {
      var menuIndex = model.BottonIndex();
      var subMenuIndex = model.SubBottonIndex();
      if (subMenuIndex === -1) {
       model.Menus().button[menuIndex] = model.Menu();
      } else {
       model.Menus().button[menuIndex].sub_button[subMenuIndex] = model.Menu();
      }
     } else {
      if (model.MenuIndex() != undefined) {
       if (model.Menus().button[model.MenuIndex()].sub_button == undefined) {
        model.Menus().button[model.MenuIndex()].sub_button = new Array();
       }
       model.Menus().button[model.MenuIndex()].sub_button.unshift(model.Menu());
      } else {
       model.Menus().button.push(model.Menu());
      }
     }
     model.Menu(undefined);
     model.MenuIndex(undefined);
     model.BottonIndex(-1);
     model.SubBottonIndex(-1);
     model.MenusReset();
    },

모니터링 속성을 바인딩하고 메뉴 레이아웃을 생성합니다

<p class="panel-body" data-bind="with:Menus" id="pMenu"   style="max-width:90%">
  <p style="height: 200px;" data-bind="foreach:newArray(3)">
   <p class="list-group col-xs-4 clearFill bn">
    <!--ko if:($parent.button.length>0 && $parent.button[$index()]!=undefined && $parent.button[$index()].sub_button!=undefined ) -->
    <!--ko foreach:newArray((4-$parent.button[$index()].sub_button.length)) -->
    <p class="list-group-item bn"></p>
    <!--/ko-->
    <!--ko if:$parent.button[$index()].sub_button.length<5 -->
    <p class="list-group-item" data-bind="click:function (){$root.AddMenu($index())}"><i class="fa fa-plus"></i>
    </p>
    <!--/ko-->
    <!--ko foreach:($parent.button[$index()].sub_button) -->
    <p class="list-group-item" data-bind="text:name,attr:{&#39;bottonIndex&#39;:$parent.value,&#39;subbottonIndex&#39;:$index()},click:function (){$root.EditMenu($data,$parent.value,$index())}"></p>
    <!--/ko-->
    <!--/ko -->
    <!--ko if: $parent.button[$index()]!=undefined && $parent.button[$index()].sub_button==undefined -->
    <p class="list-group-item bn"></p>
    <p class="list-group-item bn"></p>
    <p class="list-group-item bn"></p>
    <p class="list-group-item bn"></p>
    <p class="list-group-item" data-bind="click:function (){$root.AddMenu($index())}"><i class="fa fa-plus"></i>
    </p>
    <!--/ko-->
    <!--ko if: $parent.button[$index()]==undefined -->
    <p class="list-group-item bn"></p>
    <p class="list-group-item bn"></p>
    <p class="list-group-item bn"></p>
    <p class="list-group-item bn"></p>
    <p class="list-group-item bn"></p>
    <!--/ko-->
   </p>
  </p>
  <!--ko foreach:button -->
  <p class="col-xs-4 list-group-item list-group-item-danger" data-bind="text:name,attr:{&#39;bottonindex&#39;:$index()},click:function (){$root.EditMenu($data,$index(),-1)}"></p>
  <!--/ko-->
  <!--ko if:button.length < 3 -->
  <p class="col-xs-4 list-group-item" data-bind="click:function (){$root.AddMenu();}"><i class="fa fa-plus"></i>
  </p>
  <!--/ko-->
  <p class="clearfix"></p>
  <p class="col-xs-12" style="border: 1px solid #EEEEEE; padding-top: 15px; margin-top: 15px;" data-bind="with:$root.Menu,visible:($root.Menu()!=undefined)">
   <form id="MenuForm" onsubmit="return false;">
    <p class="form-group col-xs-4">
     <input type="text" class="form-control" name="name" placeholder="请输入名称" data-bind="value:name">
    </p>
    <p class="form-group col-xs-4">
     <select class="form-control" onchange="$(&#39;#txtMenuButtonValue&#39;)
 .attr(&#39;placeholder&#39;, $(this).find(&#39;option:selected&#39;).attr(&#39;pl&#39;))" data-bind="value:type">
      <option value="view" pl="请输入Url">跳转URL</option>
      <option value="click" pl="请输入Key">点击推事件</option>
      <option value="scancode_push" pl="请输入Key">扫码推事件</option>
      <option value="scancode_waitmsg" pl="请输入Key">扫码推事件且弹出“消息接收中”提示框</option>
      <option value="pic_sysphoto" pl="请输入Key">弹出系统拍照发图</option>
      <option value="pic_photo_or_album" pl="请输入Key">弹出拍照或者相册发图</option>
      <option value="pic_weixin" pl="请输入Key"> 弹出微信相册发图器</option>
      <option value="location_select" pl="请输入Key">弹出地理位置选择器</option>
     </select>
    </p>
    <p class="form-group col-xs-8">
     <input type="text" id="txtMenuButtonValue" name="value" class="form-control" placeholder="请输入Url" data-bind="value:value">
    </p>
    <p class="form-group col-xs-12">
     <button type="submit" class="btn btn-primary" data-bind="click:$root.MenuSave">确定</button>
     <button type="submit" class="btn btn-danger" data-bind="visible:$root.isEditMenu,click:$root.DeleteMenu">删除</button>
     <button type="button" class="btn btn-default" title="上移" data-bind="visible:$root.isEditMenu(),disable:!$root.IsUp(),click:$root.Up"><i class="fa fa-chevron-circle-up" aria-hidden="true"></i></button>
     <button type="button" class="btn btn-default" title="下移" data-bind="visible:$root.isEditMenu(),disable:!$root.IsDown(),click:$root.Down"><i class="fa fa-chevron-circle-down" aria-hidden="true"></i></button>
     <button type="button" class="btn btn-default" title="左移" data-bind="visible:$root.isEditMenu(),disable:!$root.IsLeft(),click:$root.Left"><i class="fa fa-chevron-circle-left" aria-hidden="true"></i></button>
     <button type="button" class="btn btn-default" title="右移" data-bind="visible:$root.isEditMenu(),disable:!$root.IsRight(),click:$root.Right"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i></button>
     <button type="button" class="btn btn-default" title="复制菜单" data-bind="visible:$root.isEditMenu(),click:$root.Copy">复制</button>
     <button type="button" class="btn btn-default" title="粘贴菜单" data-bind="click:$root.Paste">粘贴</button>
     <button type="submit" class="btn btn-default" data-bind="click:$root.CancelMenuSave">关闭</button>
    </p>
   </form>
  </p>
  <p class="clearfix"></p>
 </p>

마지막으로 메뉴의

쿼리

기능과 게시 기능을 추가합니다. 메뉴 편집이 편리하기 때문에 메뉴 개체가 WeChat의 사용자 정의 메뉴 인터페이스에서 요구하는 json 형식과 일치하지 않습니다. 따라서 기존 메뉴를 쿼리하고 메뉴를 게시할 때 json 데이터의 일부 형식을 변경해야 합니다. ,

2. ASP.NET 튜토리얼

Geek Academy ASP.NET 비디오 튜토리얼

4. >ASP.NET MVC란 무엇입니까? ASP.NET MVC 개요

5. ASP.NET MVC 세부 소개--컨트롤러

ASP 세부 소개 .NET MVC--보기

7. ASP.NET MVC에 대한 자세한 소개--라우팅

8.ASP에 대한 심층적인 이해 .NET MVC와 WebForm의 차이점

위 내용은 asp.net mvc를 통해 WeChat 사용자 정의 메뉴 편집 도구를 개발하기 위한 코드 예제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

C# .NET 애플리케이션 배포 Azure/AWS : 단계별 안내서Apr 23, 2025 am 12:06 AM

C# .NET 앱을 Azure 또는 AWS에 배포하는 방법은 무엇입니까? 답은 Azureappservice와 Awelasticbeanstalk를 사용하는 것입니다. 1. Azure에서 Azureappservice 및 AzurePipelines를 사용하여 배포를 자동화하십시오. 2. AWS에서 Amazon Elasticbeanstalk 및 Awslambda를 사용하여 배포 및 서버리스 컴퓨팅을 구현하십시오.

C# .net : 강력한 프로그래밍 언어 소개Apr 22, 2025 am 12:04 AM

C#과 .NET의 조합은 개발자에게 강력한 프로그래밍 환경을 제공합니다. 1) C#은 다형성 및 비동기 프로그래밍을 지원합니다. 2) .net은 크로스 플랫폼 기능과 동시 처리 메커니즘을 제공하여 데스크탑, 웹 및 모바일 애플리케이션 개발에 널리 사용됩니다.

.NET 프레임 워크 대 C#: 용어 디코딩Apr 21, 2025 am 12:05 AM

.NETFramework는 소프트웨어 프레임 워크이며 C#은 프로그래밍 언어입니다. 1..netframework는 데스크탑, 웹 및 모바일 애플리케이션 개발을 지원하는 라이브러리 및 서비스를 제공합니다. 2.C#은 .NETFramework 용으로 설계되었으며 최신 프로그래밍 기능을 지원합니다. 3..NetFramework는 CLR을 통해 코드 실행을 관리하고 C# 코드는 IL로 컴파일되어 CLR에 의해 실행됩니다. 4. .NETFramework를 사용하여 응용 프로그램을 신속하게 개발하면 C#은 LINQ와 같은 고급 기능을 제공합니다. 5. 일반적인 오류에는 유형 변환 및 비동기 프로그래밍 교착 상태가 포함됩니다. 디버깅을 위해서는 VisualStudio 도구가 필요합니다.

Demystifying C# .net : 초보자를위한 개요Apr 20, 2025 am 12:11 AM

C#은 Microsoft에서 개발 한 최신 객체 지향 프로그래밍 언어이며 .NET은 Microsoft가 제공하는 개발 프레임 워크입니다. C#은 C의 성능과 Java의 단순성을 결합하며 다양한 응용 프로그램을 구축하는 데 적합합니다. .NET 프레임 워크는 여러 언어를 지원하고 쓰레기 수집 메커니즘을 제공하며 메모리 관리를 단순화합니다.

C# 및 .NET 런타임 : 함께 작동하는 방법Apr 19, 2025 am 12:04 AM

C# 및 .NET 런타임은 개발자가 효율적이고 강력하며 크로스 플랫폼 개발 기능을 강화하기 위해 긴밀히 협력합니다. 1) C#은 .NET 프레임 워크와 완벽하게 통합하도록 설계된 유형 안전 및 객체 지향 프로그래밍 언어입니다. 2) .NET 런타임은 C# 코드 실행을 관리하고, 쓰레기 수집, 유형 안전 및 기타 서비스를 제공하며, 효율적이고 크로스 플랫폼 운영을 보장합니다.

C# .NET 개발 : 시작에 대한 초보자 안내서Apr 18, 2025 am 12:17 AM

C# .NET 개발을 시작하려면 다음과 같은 것이 필요합니다. 1. C#의 기본 지식과 .NET 프레임 워크의 핵심 개념을 이해하십시오. 2. 변수, 데이터 유형, 제어 구조, 기능 및 클래스의 기본 개념을 마스터하십시오. 3. LINQ 및 비동기 프로그래밍과 같은 C#의 고급 기능을 배우십시오. 4. 일반적인 오류에 대한 디버깅 기술 및 성능 최적화 방법에 익숙해 지십시오. 이러한 단계를 통해 C#.NET의 세계를 점차적으로 침투하고 효율적인 응용 프로그램을 작성할 수 있습니다.

C# 및 .NET : 둘 사이의 관계 이해Apr 17, 2025 am 12:07 AM

C#과 .NET의 관계는 분리 할 수 없지만 같은 것은 아닙니다. C#은 프로그래밍 언어이며 .NET은 개발 플랫폼입니다. C#은 코드를 작성하고 .NET의 중간 언어 (IL)로 컴파일하고 .NET 런타임 (CLR)에 의해 실행되는 데 사용됩니다.

C#.NET은 여러 응용 프로그램 개발을 지원하는 강력한 도구 및 라이브러리를 제공하기 때문에 여전히 중요합니다. 1) C#은 .NET 프레임 워크를 결합하여 개발 효율적이고 편리하게 만듭니다. 2) C#의 타입 안전 및 쓰레기 수집 메커니즘은 장점을 향상시킵니다. 3) .NET은 크로스 플랫폼 실행 환경과 풍부한 API를 제공하여 개발 유연성을 향상시킵니다.

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.