WeChat 개발 기술 경험 요약

이 글은 주로 WeChat 미니 프로그램 개발 중 발생한 문제 요약에 대한 관련 정보를 소개합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

WeChat 미니 프로그램 개발 중 발생한 문제 요약

공식적으로 작은 프로그램을 개발한 것은 이번이 처음입니다. 이번 프로젝트에서 사용한 기능을 중심으로 다음과 같은 측면에서 작은 프로그램의 개발 과정과 경험을 이야기해보겠습니다.

데이터 요청

이 미니 프로그램에는 많은 추가 기능이 없으므로 이번에는 미니 프로그램이 사용자에게 제공하는 주요 작업은 데이터입니다. 사용자가 자신의 서버에서 데이터를 요청하기 위한 API 미니 프로그램을 개발하기 전에 WeChat 공개 플랫폼에서 appID를 신청하고 도메인 이름을 바인딩해야 한다는 점을 언급할 가치가 있습니다. https 프로토콜을 입력한 후 미니 프로그램 개발 도구의 구성 정보에 정보를 입력하세요. 요청한 주소는 이전에 바인딩된 도메인 이름에 있어야 합니다. 이 프로젝트에서는 wx.request를 사용하여 서버에서 데이터를 가져옵니다.

wx.request({
   url: that.data.couponData.requestUrl,
   data: that.data.couponData.queryData,
   header: {
     'content-type': 'application/json'
   },
   success: function(res) {
     var list = res.data.goodsList;
     console.log(res.data);
     for(var i in list) {
       list[i].quanUsedNum = parseInt(list[i].quanTotalNum) - parseInt(list[i].quanRemainNum);
      list[i].isImgRendered = false;
     }
    list[0].isImgRendered = list[1].isImgRendered = list[2].isImgRendered = list[3].isImgRendered = true;
     that.setData({"couponData.totalPage":res.data.totalPage});
     that.setData({"couponData.list":that.data.couponData.list.concat(list)});
    that.setData({"couponData.loadmore":!that.data.couponData.loadmore});
     that.setData({"couponData.queryData.pageNum":parseInt(that.data.couponData.queryData.pageNum) + 1});
     if(that.data.couponData.queryData.pageNum > that.data.couponData.totalPage) {
      that.setData({"couponData.isAction":false});
    }

    if(that.data.couponData.list.length < 1) {
      that.setData({"couponData.nodata":true});
    }
     if(f) {
       f();
     }
   }
 });

데이터 캐싱

여기에서는 페이지 간 데이터를 포함하는 검색 기능을 수행해야 하기 때문에 데이터 캐싱을 사용합니다. 주소에 있는 것도 방법입니다. wx.setStorage를 사용하여 localStorage에 데이터를 저장하면 데이터를 읽을 때 읽기와 비동기 읽기가 동기화됩니다. .

클립보드 애플리케이션

미니 프로그램의 API를 이용하면 어떤 정보든 클립보드에 쉽게 복사해서 붙여넣을 수 있습니다.

wx.setClipboardData({
   data: '【' + that.data.couponData.list[e.currentTarget.id].goodsTitle + '】复制这条信息，打开【手机淘宝】' + that.data.couponData.list[e.currentTarget.id].twoInOneKouling,
   success: function(res) {
     that.setData({"couponData.copyTip":true,"couponData.Kouling":that.data.couponData.list[e.currentTarget.id].twoInOneKouling})
   }
 });

템플릿

이 프로젝트에서는 페이지는 기본적으로 비슷하지만 미묘한 차이가 있어서 템플릿을 사용하여 새 템플릿을 만듭니다/ template.wxml, 이름 속성 을 설정해야 합니다.

 <template name=&#39;navsearch&#39;>
 <view class=&#39;nav-search&#39;>
   <view class=&#39;nav-searchcontainer space-between&#39;>
     <view class=&#39;nav-searchsearch&#39; wx:if=&#39;{{isSearch}}&#39;></view>
     <input class=&#39;nav-searchinput&#39; placeholder=&#39;请输入关键词找券&#39; name=&#39;queryStr&#39; value="{{queryStr}}" bindfocus=&#39;toggleSearch&#39; bindconfirm=&#39;doQuery&#39; bindinput="syncQuery"/>
     <view class=&#39;nav-searchdelete&#39; wx:if=&#39;{{!isSearch}}&#39; bindtap=&#39;deleteAll&#39;></view>
     <view class=&#39;nav-searchbtn center&#39; wx:if=&#39;{{!isSearch}}&#39; bindtap=&#39;doQuery&#39;>搜索</view>
   </view>

   <view class=&#39;nav-filter&#39; bindtap=&#39;toggleFilter&#39;></view>
 </view>
 </template>

 <!--在其他文件中使用模板-->
 <import src="/template/template.wxml" />
 <template is=&#39;navsearch&#39; data="{{...couponData}}"></template>

모듈화

공개 js의 경우 특수 js 파일로 작성한 후 module.exports를 사용하여 노출할 수 있습니다 인터페이스 .
일반 js 파일은 require를 사용하여 가져옵니다.

 var common = require('../../common/common.js');
 ...
 common.f(); //调用

redirectTo & NavigateTo

redirectTo는 특정 페이지로 리디렉션되고, NavigateTo는 새 페이지를 엽니다. NavigationTo를 사용하면 페이지가 너무 많이 열립니다. 미니 프로그램이 정지될 수 있습니다.

공유

 Page({
   onShareAppMessage: function () {
     return {
       title: 'your title！',
       path: '/xxxx/xxxx/xxxx',  //分享之后回到这个页面
       success: function(res) {
         f(); //成功回调；
       },
       fail: function(res) {
         f(); //失败回调；

       }
     }
   }
 })

목록 슬라이딩의 부드러움을 개선

간단히 페이지가 스크롤되는 곳은 목록에서 사진은 어디에 있든 표시됩니다. 구현 방법은 다음과 같습니다.

rree

【관련 추천】

1. 특별 추천: "php Programmer Toolbox" V0.1 버전 다운로드

2. WeChat 공개 계정 플랫폼 소스 코드 다운로드

3. Alizi 주문 시스템 소스 코드 다운로드

위 내용은 WeChat 개발 기술 경험 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!