小さなプログラム開発の経験を共有する-ミニプログラム開発-php.cn

小さなプログラム開発の経験を共有する

Y2J

リリース： 2017-04-28 11:25:28

オリジナル

2560 人が閲覧しました

私が小規模プログラムを正式に開発するのは初めてです。主に、このプロジェクトで使用される機能について、以下の側面から小規模プログラムの開発プロセスと経験について話します。

データリクエスト

このミニプログラムには多くの追加機能がないため、今回はデータとデータ処理が主な作業であり、ユーザーが自分のサーバーにリクエストを送信するためのAPIをユーザーに提供しますデータをリクエストします。ミニプログラムを開発する前に、WeChat パブリックプラットフォームで appID を申請し、ドメイン名を https プロトコルでバインドし、ミニの構成情報に情報を入力する必要があることに注意してください。プログラム開発ツール。要求されたアドレスは、以前にバインドされたドメイン名の下にある必要があります。このプロジェクトでは、wx.request を使用してサーバーからデータを取得します。

wx.request({
      url: that.data.couponData.requestUrl,
      data: that.data.couponData.queryData,
      header: {
          &#39;content-type&#39;: &#39;application/json&#39;
      },
      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();
          }
      }
  });

ログイン後にコピー

データキャッシュ

ここではページ間のデータ転送を伴う検索機能が必要なので、localStorageを借りてwx .setStorageを使う方法もあります。データを localStorage に格納します。ページジャンプ後、localStorage からデータを読み取ることができます。データを読み取る場合は、同期読み取りと非同期読み取りに分けられます。

クリップボードアプリケーション

ミニプログラムのAPIを使用すると、任意の情報をクリップボードに簡単にコピーして貼り付けることができます。

  wx.setClipboardData({
      data: &#39;【&#39; + that.data.couponData.list[e.currentTarget.id].goodsTitle + &#39;】复制这条信息，打开【手机淘宝】&#39; + 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
このプロジェクトでは、ページは基本的に似ていますが、微妙な違いがあるため、テンプレートを使用し、新しい template/template.wxml を作成します。 name 属性を設定する必要があります。

  <template name=&#39;navsearch&#39;>
  <view class=&#39;nav-search&#39;>
      <view class=&#39;nav-search__container space-between&#39;>
          <view class=&#39;nav-search__search&#39; wx:if=&#39;{{isSearch}}&#39;></view>
          <input class=&#39;nav-search__input&#39; placeholder=&#39;请输入关键词找券&#39; name=&#39;queryStr&#39; value="{{queryStr}}" bindfocus=&#39;toggleSearch&#39; bindconfirm=&#39;doQuery&#39; bindinput="syncQuery"/>
          <view class=&#39;nav-search__delete&#39; wx:if=&#39;{{!isSearch}}&#39; bindtap=&#39;deleteAll&#39;></view>
          <view class=&#39;nav-search__btn 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>

ログイン後にコピー

モジュール性
public js の場合、特別な js ファイルに記述し、module.exports を使用してインターフェイスを公開できます。
一般的な js ファイルは require を使用してインポートされます。
```
  var common = require(&#39;../../common/common.js&#39;);
  ...
  common.f(); //调用
```
ログイン後にコピー
redirectTo & navigateTo
redirectTo は特定のページにリダイレクトし、navigateTo は新しいページを開きます。 navigateTo を使用してあまりにも多くのページを開くとミニプログラムがフリーズすることに注意してください。

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

              }
          }
      }
  })

ログイン後にコピー