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로 개발 : 실용적인 가이드 및 예제May 12, 2025 am 12:16 AM

C# 및 .NET은 강력한 기능과 효율적인 개발 환경을 제공합니다. 1) C#은 C의 힘과 Java의 단순성을 결합한 최신 객체 지향 프로그래밍 언어입니다. 2) .NET 프레임 워크는 여러 프로그래밍 언어를 지원하는 응용 프로그램을 구축하고 실행하는 플랫폼입니다. 3) C#의 클래스와 객체는 객체 지향 프로그래밍의 핵심입니다. 클래스는 데이터와 동작을 정의하고 객체는 클래스의 사례입니다. 4) .NET의 쓰레기 수집 메커니즘은 자동으로 메모리를 관리하여 개발자의 작업을 단순화합니다. 5) C# 및 .NET은 강력한 파일 작업 기능을 제공하여 동기 및 비동기 프로그래밍을 지원합니다. 6) 디버거, 로깅 및 예외 처리를 통해 일반적인 오류를 해결할 수 있습니다. 7) 성능 최적화 및 모범 사례에는 StringBuild 사용이 포함됩니다

C# .NET : Microsoft .NET 프레임 워크 이해May 11, 2025 am 12:17 AM

.NETFRAMEWORK는 일관된 프로그래밍 모델과 강력한 런타임 환경을 제공하는 교차 문자 크로스 플랫폼 개발 플랫폼입니다. 1) CLR 및 FCL로 구성되어 메모리와 스레드를 관리하고 FCL은 사전 제작 된 기능을 제공합니다. 2) 사용의 예로는 파일 읽기 및 LINQ 쿼리가 포함됩니다. 3) 일반적인 오류에는 처리되지 않은 예외와 메모리 누출이 포함되며 디버깅 도구를 사용하여 해결해야합니다. 4) 비동기 프로그래밍 및 캐싱을 통해 성능 최적화를 달성 할 수 있으며 코드 가독성 및 유지 관리 가능성을 유지하는 것이 중요합니다.

C# .net의 수명 : 지속적인 인기에 대한 이유May 10, 2025 am 12:12 AM

C#.NET이 지속적으로 매력적으로 유지되는 이유는 우수한 성능, 풍부한 생태계, 강력한 지역 사회 지원 및 크로스 플랫폼 개발 기능을 포함합니다. 1) 탁월한 성능과 엔터프라이즈 수준의 응용 프로그램 및 게임 개발에 적합합니다. 2) .NET 프레임 워크는 다양한 개발 분야를 지원하기위한 광범위한 클래스 라이브러리 및 도구를 제공합니다. 3) 활발한 개발자 커뮤니티와 풍부한 학습 리소스가 있습니다. 4) .netCore는 크로스 플랫폼 개발을 실현하고 응용 프로그램 시나리오를 확장합니다.

C# .NET 디자인 패턴 마스터 링 : 싱글 톤에서 종속성 주입까지May 09, 2025 am 12:15 AM

C#.NET의 설계 패턴에는 싱글 톤 패턴 및 종속성 주입이 포함됩니다. 1. Singleton Mode는 클래스의 인스턴스가 하나 뿐이며 글로벌 액세스 포인트가 필요한 시나리오에 적합하지만 스레드 안전 및 남용 문제에주의를 기울여야합니다. 2. 종속성 주입은 종속성을 주입하여 코드 유연성과 테스트 가능성을 향상시킵니다. 그것은 종종 생성자 주입에 사용되지만 복잡성을 증가시키기 위해 과도한 사용을 피해야합니다.

현대 세계의 C# .net : 응용 및 산업May 08, 2025 am 12:08 AM

C#.net은 현대 세계에서 게임 개발, 금융 서비스, 사물 인터넷 및 클라우드 컴퓨팅 분야에서 널리 사용됩니다. 1) 게임 개발에서 C#을 사용하여 Unity 엔진을 통해 프로그래밍하십시오. 2) 금융 서비스 분야에서 C#.NET은 고성능 거래 시스템 및 데이터 분석 도구를 개발하는 데 사용됩니다. 3) IoT 및 클라우드 컴퓨팅 측면에서 C#.NET은 Azure 서비스를 통해 지원을 제공하여 장치 제어 로직 및 데이터 처리를 개발합니다.

C# .NET 프레임 워크 대 .NET Core/5/6 : 차이점은 무엇입니까?May 07, 2025 am 12:06 AM

.NETFRAMEWORKISWINDOWS 중심, while.netCore/5/6 SupportScross-PlatformDevelopment.1) .NETFramework, 2002 년 이후, isidealforwindowsapplicationsButlimitedIncross-platformcapabilities.2) .netcore, 2016, anditsevolutions (.net5/6).

C# .NET 개발자 커뮤니티 : 리소스 및 지원May 06, 2025 am 12:11 AM

C#.NET 개발자 커뮤니티는 다음을 포함하여 풍부한 리소스와 지원을 제공합니다. 1. Microsoft의 공식 문서, 2. StackoverFlow 및 Reddit과 같은 커뮤니티 포럼, 3. GitHub의 오픈 소스 프로젝트. 이러한 리소스는 개발자가 기본 학습에서 고급 응용 프로그램에 이르기까지 프로그래밍 기술을 향상시키는 데 도움이됩니다.

C# .NET 장점 : 기능, 이점 및 사용 사례May 05, 2025 am 12:01 AM

C#.net의 장점은 다음과 같습니다. 1) 비동기 프로그래밍과 같은 언어 기능은 개발을 단순화합니다. 2) JIT 컴파일 및 쓰레기 수집 메커니즘을 통한 효율성 향상, 성능 및 신뢰성; 3) 크로스 플랫폼 지원, .netcore는 응용 프로그램 시나리오를 확장합니다. 4) 웹에서 데스크탑 및 게임 개발에 이르기까지 뛰어난 성능을 가진 광범위한 실제 응용 프로그램.

See all articles

핫 AI 도구

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

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

뜨거운 도구

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.