WeChat アプレット開発で発生した問題の概要

WeChat ミニ プログラムの開発は完了しましたが、当然のことながら多くの問題に遭遇しました。この記事では、より多くの WeChat 開発者を支援することを願って、主に WeChat ミニ プログラムの開発中に発生した問題の概要を共有します。 。

ミニプログラムのご紹介

「趣味を孤独にしない、趣味を迷わない」がWeChatミニプログラム「一緒に行こう」のテーマです このミニプログラムは現代人の孤独を解決することを目的としています。キャンパスライフ中の大学生は、ランニング、フィットネス、競技、その他のアクティビティで同じ志を持った友達やパートナーを見つけましょう。ミニ プログラムのすぐに使える使いやすい機能と友達作りを組み合わせることで、効率的、高速、負担のかからないオフライン デート ツールになります

このミニ プログラムは、bmob back によってデータ処理とストレージが提供されます。 -end クラウドサポート

ミニプログラムコード

開発中の技術的問題のまとめ

1. e.target.datasetの使用に関する問題

ミニプログラム開発のプロセスでは、属性値を使用することがよくあります。通常、 で data-*="{{XXX}}" を設定し、JS で XXX 値を取得するために e.target.dateset.* を使用しますが、よく未定義に遭遇します。 use console .log(e) 出力情報を見ると、e オブジェクトに currentTarget と target という 2 つのオブジェクトが含まれていることがわかります。このとき、データは currentTarget にある場合があります。値を取得します

WXML

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

JS

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>

JS

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 が提供する開発ドキュメントを参照してください。アプリケーションの無料版ではファジー クエリを実行できません。ここを参照して、ほぼ完成したアクティビティ検索インターフェイスを見て、その感動は言葉では言い表せません。諦めかけたとき、ふと、背景データをすべてコレクションに保存し、入力された検索値に応じて一つずつ照合する方法を思いつき、考えた結果、実行してみました。 Document, String オブジェクトには、指定された文字列値が文字列内で最初に出現する位置を返すメソッドがあり、すべてのデータを走査してそれぞれを取得します。各データの文字が表示されたら、検索結果のコレクションに追加します。

JS

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

詳しいコードはGithubにアクセスしてください

4. JSを使用して文字列形式の時間を秒前に変換します、分前...

ミニ プログラムには、イベント時間を含むコメント、アクティビティへの参加、コレクションなどの一連の機能が含まれており、データベースに保存される時間形式は 2017-11-30 23:36: 10、今度はインターフェイスに特定の時間を表示するのではなく、現在の時間との差、つまり数秒前、数分前などを表示したいと考えています。実装の主なアイデアは複雑ではありません。まず文字列の時間をタイムスタンプに変換し、それを現在のタイムスタンプと比較して、数秒前、数分前、数時間前、数日前などに変換できます。

JS

//字符串转换为时间戳 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 アプレットはフォーム データをクリアするためにフォームを送信します

イベントを公開した後、データがクリアされない場合、ミニのデータ インタラクションは悪くなるはずです。プログラムはhtml + jSのようなものではなく、dataSet({})を使用して値を代入し、ビューレイヤーが非同期で値をアクティブにできるので、フォームを送信した後、これらの入力に値を代入する必要があると考えました。もちろん、フォームには入力が含まれるだけでなく、この方法でもクリア効果を実現できます

WXML

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

JS

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

6。 WeChat ID、QQ番号、携帯電話番号の登録

イベント参加申し込みには本名、連絡先等の情報の入力が必要となるため、ユーザーが任意に情報を入力することを防ぐため、これらの情報を確認する必要があります

JS

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 が更新されると解決されると予想されます。

関連する推奨事項: WeChat ミニ プログラムのバージョン。 Zhihu の例の共有

WeChat ミニ プログラムをコンポーネント化するためのソリューションのアイデアと方法

WeChatミニプログラムバージョン2048ミニゲーム

以上がWeChat アプレット開発で発生した問題の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。