소규모 프로그램 개발 경험 공유-미니 프로그램 개발-php.cn

소규모 프로그램 개발 경험 공유

Y2J

풀어 주다： 2017-04-28 11:25:28

원래의

2502명이 탐색했습니다.

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

데이터요청

이번 애플릿은 추가기능이 많지 않아서 이번에는 데이터 및 데이터 처리가 주요 업무는 미니 프로그램은 사용자가 자신의 서버에서 데이터를 요청할 수 있도록 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에 데이터를 저장하면 됩니다. 데이터를 읽을 때는 동기식 읽기와 비동기식 읽기로 구분됩니다.

클립보드 애플리케이션

미니 프로그램의 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.wxml을 생성합니다. 이름 속성을 설정해야 합니다.

  <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>

로그인 후 복사

모듈화
공개 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(); //失败回调；

              }
          }
      }
  })

로그인 후 복사