집 > 기사 > 위챗 애플릿 > [미니프로그램] 첫 번째 미니프로그램 개발 경험 공유

[미니프로그램] 첫 번째 미니프로그램 개발 경험 공유

php是最好的语言원래의: 2018-08-03 10:51:471795검색

Douban API

지난 며칠 동안 미니 프로그램의 문서를 읽은 후 내용이 거의 없는 미니 프로그램을 작성하는 데 시간을 보냈습니다. 원래는 API 인터페이스를 직접 작성하려고 했으나, 미니프로그램에서 요구하는 도메인네임은 등록과 HTTPS가 모두 필요해서 너무 귀찮아서 포기했습니다. 나중에 Douban API를 선택했는데 미니 프로그램이 Douban의 API를 차단한 것을 발견했습니다. 다행히 인터넷에 프록시 서버를 설정한 마스터가 있었습니다.

Douban의 API를 사용하여 이와 비슷한 작은 책을 만들어 내가 본 영화를 기록한 다음 Douban에서 관련 평점과 포스터를 가져올 계획입니다. 안타깝게도 Douban API에서 제공하는 포스터의 최대 해상도도 매우 낮아서 미니 프로그램의 모양과 느낌이 매우 좋지 않지만 결국 다른 사람의 것입니다...

데이터 중성자 객체의 속성을 수정합니다

사용중wx.request 이후에 얻은 데이터는 Page의 data에 써야 합니다. Vue.js에서는 애플릿이 이 .setData를 호출해야 함과 동시에 객체의 속성이 작성 시 수정되는 경우 객체로 구성된 문자열을 연결하는 변수를 정의해야 합니다. 속성을 입력하고 대괄호 []로 묶습니다. 예: wx.request后获得的数据要写入Page的data，与Vue.js不同的是，小程序需要调用this.setData，同时里面如果写入时修改到的对象里面的属性，应定义一个变量连接对象和属性合成的字符串，再通过中括号[]将其包起来。例如：

var temp=&#39;person.name&#39;;
......

this.setData({
    [temp]:&#39;Mike&#39;
})

评分星星化

在界面中涉及到评分的star化，这里采用了一个比较笨的方法。就是准备星星可能的三种状态的图片，然后根据分数算出具体的分数数组，最后遍历该数组，对应每一颗星星应该展示的状态。

<block wx:for="{{dbMarkArr||myStarArr}}" wx-for-item="item" >
    <image wx:if="{{item===0}}" src=&#39;../../static/image/empty.png&#39;></image>
    <image wx:if="{{item===1}}" src=&#39;../../static/image/half.png&#39;></image>
    <image wx:if="{{item===2}}" src=&#39;../../static/image/full.png&#39;></image>
</block>

模版的一个小坑

在这里使用了小程序的模版template。需要注意的是这里有一个坑，模版的文件名字和模版里的name必须一致。

网络延时带来的问题

在页面渲染时，有可能因为网络问题导致豆瓣数据返回不够及时，然后进一步导致页面模版设置数据时，data

for (var i = 0; i < calendar.length; i++) {
      if (i % 7 == 0) {
        weeks[parseInt(i / 7)] = new Array(7);
      }
      weeks[parseInt(i / 7)][i % 7] = calendar[i];
    }

Rating Starization

인터페이스에서 평점 별표화를 포함하며 여기서는 비교적 어리석은 방법이 사용됩니다. 별의 세 가지 가능한 상태에 대한 그림을 준비한 다음, 점수를 기반으로 특정 점수 배열을 계산하고, 마지막으로 각 별이 표시해야 하는 상태에 해당하도록 배열을 순회하는 것입니다.

<view class=&#39;calendarBody&#39;>
    <block wx:for="{{calendar.weeks}}" wx:for-item="weeks" >
      <view class=&#39;calendar-body-weeks&#39;>
        <block wx:for="{{weeks}}" wx:for-item="day">
          <view class="calendar-body-day {{calendar.month==day.month&&calendar.date==day.date? &#39;is-current&#39;:&#39; &#39;}} {{calendar.month!=day.month?&#39;nou-curMonth&#39;:&#39; &#39;}}" data-date=&#39;{{day.date}}&#39; bindtap=&#39;selectDate&#39;>{{day.date}}</view>
        </block>
      </view>
    </block>
</view>

템플릿의 작은 함정

여기에서는 미니 프로그램 템플릿의 템플릿을 사용합니다. 여기에는 함정이 있습니다. 템플릿의 파일 이름은 템플릿의 이름과 일치해야 합니다.

네트워크 지연으로 인한 문제

페이지 렌더링 중 네트워크 문제로 인해 Douban 데이터가 제때에 반환되지 않을 수 있으며, 이로 인해 페이지에서 데이터를 설정할 때 data의 값이 불필요해질 수 있습니다. 템플릿.값. 저는 여기서 오랫동안 고민하다가 결국 관련 데이터를 설정하는 함수의 실행을 2초 동안 지연시키는 다소 촌스러운 접근 방식을 선택했습니다. 2초 이내에 Douban 데이터가 반환되면 문제가 해결된 것 같습니다. 2초 내에 유효한 데이터를 얻지 못하면 문제가 해결되지 않은 것입니다. 게다가 2초는 분명 사용자 경험에 상당한 영향을 끼치는데 여기서는 어떻게 해결해야 할지 모르겠습니다...

사용하지 않는 캘린더

미니 프로그램 초기에는 원래 캘린더 클릭을 구현하려고 했는데요. 점프 영화 페이지에 해당하는 기능이 나오면 좋을 것 같아서 안했는데 달력이 구현되었네요. 아이디어는 비교적 명확합니다. 먼저 현재 시간을 가져오고 이번 달의 첫 번째 날과 마지막 날이 해당하는 요일을 계산한 다음 첫 번째 날 이전과 마지막 날 이후의 일수가 표시되어야 하는지 계산합니다. 그런 다음 지난 달, 이번 달, 다음 달을 배열로 연결한 다음 배열에 따라 주를 나눕니다.

rrreee 그런 다음 렌더링: rrreee

마지막으로

은 시도해 볼 작은 프로그램일 뿐이며 많은 것이 있습니다. 가다.