WeChat 미니 프로그램 개발 시 발생하는 문제 요약-미니 프로그램 개발-php.cn

WeChat 미니 프로그램 개발이 완료되었으며 당연히 많은 문제에 직면했습니다. 이 기사에서는 더 많은 WeChat 개발자에게 도움이 되기를 바라며 주로 WeChat 미니 프로그램 개발 중에 발생한 문제를 요약하여 공유합니다. .

미니 프로그램 소개

"당신의 관심사가 더 이상 외롭지 않게 하세요, 당신의 취미가 더 이상 방황하지 않게 하세요"는 WeChat 미니 프로그램 "Let's Go Together"의 주제입니다. 이 미니 프로그램은 현대인의 외로움을 해결하는 것을 목표로 합니다. 캠퍼스 생활을 하는 대학생 모두가 달리기, 피트니스, 경쟁 및 기타 활동에서 같은 생각을 가진 친구와 파트너를 찾을 수 있습니다. 즉시 사용 가능하고 사용하기 쉬운 미니 프로그램의 기능과 친구 만들기 기능을 결합하면 효율적이고 빠르며 부담 없는 오프라인 데이트 도구가 될 것입니다

이 미니 프로그램은 bmob back을 통해 데이터 처리 및 저장 기능을 제공합니다. -end cloud 지원

미니 프로그램 코드

WeChat 미니 프로그램 개발 시 발생하는 문제 요약

개발 중 기술적인 문제 요약

1.e.target.dataset 사용 문제

미니 프로그램 개발 과정에서 속성 값을 사용하는 경우가 많습니다. 태그 속성의 경우 일반적으로 에서 data-*="{{XXX}}"를 설정한 다음 e.target.dateset.*를 사용하여 JS에서 XXX 값을 가져오지만 정의되지 않은 경우가 자주 발생합니다. console .log(e)를 사용하여 출력 정보를 보면 e 객체에 currentTarget과 target이라는 두 객체가 포함되어 있는 것을 알 수 있습니다. 이때 데이터가 currentTarget에 있는 경우도 있습니다. 값 가져오기

WXML

<view bindtap="bintap" data-id="1"></view>

로그인 후 복사

bintap:function(e){
    var id = e.currentTarget.dataset.id;
}

로그인 후 복사

data-*에서 * 이름 지정 문제는 낙타 표기 이름 지정과 순수 소문자

를 제거하면 해결된다는 말이 인터넷에 있습니다. 2. -미니 프로그램 텍스트 영역 텍스트 상자의 시간 단어 수

WXML

<view> <view> <textarea name="content" bindinput="bindTextAreaChange" 
maxlength="{{noteMaxLen}}" /> <view class="chnumber">
{{noteNowLen}}/{{noteMaxLen}}</view> </view> </view>

로그인 후 복사

data:{
    noteMaxLen: 200,//备注最多字数
    noteNowLen: 0,//备注当前字数
}
  //字数改变触发事件
  bindTextAreaChange: function (e) {
    var that = this var value = e.detail.value,
      len = parseInt(value.length);
    if (len > that.data.noteMaxLen)
      return;
    that.setData({
      content: value, noteNowLen: len
    })
  },

로그인 후 복사

3. JS를 사용하여 퍼지 쿼리 구현

Bmob 백엔드 클라우드에서 제공하는 데이터 처리 및 저장 지원을 사용하고 있으므로 Bmob에서 제공하는 개발 문서에 따르면 무료 버전의 애플리케이션은 퍼지 쿼리를 수행할 수 없습니다. 여기를 참조한 다음 거의 완성된 활동 검색 인터페이스를 보면 느낌이 말로 표현할 수 없습니다. 포기하려던 순간, 먼저 배경 데이터를 모두 컬렉션에 저장한 뒤, 입력한 검색값에 따라 하나씩 매칭하는 방법이 생각나서 시작하게 되었습니다. 바로 작업하기 위해 먼저 javaScript를 확인해보았는데, Document, String 객체에는 지정된 문자열 값이 문자열에서 처음 나타나는 위치를 반환할 수 있는 메서드가 있습니다. 각 데이터의 문자가 나타나면 검색 결과 모음에 추가하세요.

//js 实现模糊匹配查询
  findEach: function (e) {
    var that = this var strFind = that.data.wxSearchData.value; //这里使用的 wxSearch 搜索UI插件, if (strFind == null || strFind == "") {
      wx.showToast({
        title: &#39;输入为空&#39;,
        icon: &#39;loading&#39;,
      })
    }
    if (strFind != "") {
      var nPos;
      var resultPost = [];
      for (var i in smoodList) {
        var sTxt = smoodList[i].title || &#39;&#39;; //活动的标题
        nPos = sTxt.indexOf(strFind); 
        if (nPos >= 0) {//如果输入的关键字在该活动标题中出现过,则匹配该活动
          resultPost.push(smoodList[i]); //将该活动加入到搜索到的活动列表中
        }
      }
      that.setData({
        moodList: resultPost
      })
    }
  },

로그인 후 복사

자세한 코드는 Github에서 확인하세요

4 JS를 사용하여 문자열 형식의 시간을 초 전으로 변환하세요. , 분 전...

미니 프로그램에는 이벤트 시간을 포함하여 댓글 달기, 활동 참여, 수집 등 일련의 기능이 포함되어 있으며 데이터베이스에 저장된 시간 형식은 2017-11-30 23:36입니다. 10, 이제 인터페이스에 특정 시간을 표시하지 않고 현재 시간과의 차이, 즉 몇 초 전, 몇 분 전 등을 표시하고 싶습니다. 구현은 복잡하지 않습니다. 먼저 문자열의 시간을 타임스탬프로 변환한 다음 현재 타임스탬프와 비교하여 몇 초 전, 몇 분 전, 몇 시간 전, 며칠 전 등으로 변환할 수 있습니다.

//字符串转换为时间戳 function getDateTimeStamp(dateStr) {
  return Date.parse(dateStr.replace(/-/gi, "/"));
}
//格式化时间 function getDateDiff(dateStr) {
  var publishTime = getDateTimeStamp(dateStr) / 1000,
    d_seconds,
    d_minutes,
    d_hours,
    d_days,
    timeNow = parseInt(new Date().getTime() / 1000),
    d,
    date = new Date(publishTime * 1000),
    Y = date.getFullYear(),
    M = date.getMonth() + 1,
    D = date.getDate(),
    H = date.getHours(),
    m = date.getMinutes(),
    s = date.getSeconds();
  //小于10的在前面补0 if (M < 10) {
    M = &#39;0&#39; + M;
  }
  if (D < 10) {
    D = &#39;0&#39; + D;
  }
  if (H < 10) {
    H = &#39;0&#39; + H;
  }
  if (m < 10) {
    m = &#39;0&#39; + m;
  }
  if (s < 10) {
    s = &#39;0&#39; + s;
  }
  d = timeNow - publishTime;
  d_days = parseInt(d / 86400);
  d_hours = parseInt(d / 3600);
  d_minutes = parseInt(d / 60);
  d_seconds = parseInt(d);
  if (d_days > 0 && d_days < 3) {
    return d_days + &#39;天前&#39;;
  } else if (d_days <= 0 && d_hours > 0) {
    return d_hours + &#39;小时前&#39;;
  } else if (d_hours <= 0 && d_minutes > 0) {
    return d_minutes + &#39;分钟前&#39;;
  } else if (d_seconds < 60) {
    if (d_seconds <= 0) {
      return &#39;刚刚&#39;;
    } else {
      return d_seconds + &#39;秒前&#39;;
    }
  } else if (d_days >= 3 && d_days < 30) {
    return M + &#39;-&#39; + D + &#39; &#39; + H + &#39;:&#39; + m;
  } else if (d_days >= 30) {
    return Y + &#39;-&#39; + M + &#39;-&#39; + D + &#39; &#39; + H + &#39;:&#39; + m;
  }
}

로그인 후 복사

5. WeChat 애플릿은 양식 데이터를 지우기 위해 양식을 제출합니다

이벤트를 게시한 후 데이터가 지워지지 않으면 사용자 경험이 좋지 않을 것입니다. mini 프로그램은 html + jS와는 다릅니다. dataSet({})을 사용하여 값을 할당하고 뷰 레이어는 비동기 방식으로 값을 활성화할 수 있으므로 양식을 제출한 후 이것에 값을 할당해야 한다고 생각했습니다. 양식을 지우는 효과를 얻으려면 입력을 비워야 합니다. 물론 양식에 입력이 포함될 뿐만 아니라 이러한 방식으로 지우기 효과도 얻을 수 있습니다

WXML

<form bindsubmit="submitForm"> <text class="key">活动名称</text>
 <input name="title" maxlength="100" value="{{title}}" /> 
 <button formType="submit">确定</button> </form>

로그인 후 복사

submitForm:function(e){
     var title = e.detail.value.title;
     ......
     success: function (res) {
         //将title值设置空
        that.setData({
            title: &#39;&#39;
         }
     }
}

로그인 후 복사

6. 위챗 아이디, QQ번호, 휴대폰번호 인증

이벤트 참여를 위해서는 실명, 연락처, 기타 정보를 필수로 입력해야 하므로, 이용자가 임의로 정보를 입력하는 것을 방지하기 위해 반드시 인증을 거쳐야 합니다

var wxReg = new RegExp("^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$");
 //微信号正则校验 var qqReg = new RegExp("[1-9][0-9]{4,}"); 
 //QQ号正则校验 var phReg = /^1[34578]\d{9}$/; 
 //手机号正则校验 var nameReg = new RegExp("^[\u4e00-\u9fa5]{2,4}$");
  //2-4位中文姓名正则校验

로그인 후 복사

7. Bmob SDK를 사용하여 등록 성공 후 템플릿 메시지 보내기, 미니 프로그램 QR 코드 생성 등을 할 수 있습니다.

개발 과정에서 등록 성공 시 사용자에게 알리는 방법을 알고 싶었기 때문에 확인했습니다. 미니 프로그램의 개발 문서에서 템플릿 메시지를 보내는 API가 있다는 것을 발견했고, Bmob의 개발 문서를 쿼리한 결과 이 기능이 템플릿 메시지에서만 성공적으로 전송될 수 있다는 것을 발견했습니다. 실제 머신 설정 후엔 주로 성공하는데 사용이 안되는 문제

즉, 미니 프로그램이 출시된 후 템플릿 메시지에 페이지 매개변수가 포함되어 있으면 전송되지 않는데 이 문제는 개발 버전에서 보고되었으며 Bmob 미니 프로그램 SDK가 업데이트되면 해결될 것으로 예상됩니다.