【ミニプログラム】初めてのミニプログラム開発の経験を共有

Douban API

私はここ数日間ミニ プログラムのドキュメントを読み、内容の少ないミニ プログラムを書くのに時間を費やしました。本当はAPIインターフェースを自分で書きたかったのですが、ミニプログラムが要求するドメイン名には登録とHTTPSの両方が必要だったので、面倒で断念しました。その後、Douban API を選択したところ、ミニ プログラムが Douban の API をブロックしていることがわかりました。幸いなことに、プロキシ サーバーを設定するマスターがインターネット上にありました。

Douban の API を使用して、これに似た小さな本を作成して、見た映画を記録し、関連する評価とポスターを Douban から取得する予定です。残念ながら、Douban API が提供するポスターの最大解像度も非常に低いため、ミニ プログラムの見た目と雰囲気は非常に悪くなりますが、結局のところ、他人のものであることは仕方がありません...

data neutron オブジェクトの属性を変更します

使用中wx.request の後に取得したデータを Page の data に書き込む必要があります。 Vue.js では、アプレットは this .setData を呼び出す必要があります。同時に、書き込み時にオブジェクト内のプロパティが変更された場合は、オブジェクトとオブジェクトで構成される文字列を接続する変数を定義する必要があります。プロパティを角括弧 [] で囲みます。例: wx.request后获得的数据要写入Page的data，与Vue.js不同的是，小程序需要调用this.setData，同时里面如果写入时修改到的对象里面的属性，应定义一个变量连接对象和属性合成的字符串，再通过中括号[]将其包起来。例如：

var temp='person.name';
......

this.setData({
    [temp]:'Mike'
})

评分星星化

在界面中涉及到评分的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];
    }

星評価

にはインターフェースの星評価が含まれており、ここでは比較的愚かな方法が使用されています。それは、星の 3 つの可能な状態の写真を準備し、次にスコアに基づいて特定のスコア配列を計算し、最後に各星が表示すべき状態に対応する配列を走査することです。

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

テンプレートの小さな落とし穴

ここではミニプログラム template のテンプレートが使用されています。ここには落とし穴があることに注意してください。テンプレートのファイル名は、テンプレート内の name と一致している必要があります。

ネットワーク遅延による問題

ページのレンダリング中、ネットワークの問題により Douban データが時間内に返されない可能性があり、さらに、ページにデータを設定するときに data の値が不要になる可能性があります。テンプレートの値。私はここで長い間悩みましたが、最終的には、関連するデータを設定する関数の実行を 2 秒遅らせるという、あまり洗練されていないアプローチを選択しました。 2 秒以内に Douban データが返されれば、問題は解決したように見えますが、2 秒以内に有効なデータが取得できなかった場合、問題は解決されていません。さらに、2秒は間違いなくユーザーエクスペリエンスにかなりの影響を与えますが、ここでそれを解決する方法がわかりません...

未使用のカレンダー

ミニプログラムの初期の頃、当初はカレンダーのクリックを実装する予定でしたジャンプ 動画ページに相当する機能に関しては、良くないと思ってやっていなかったのですが、カレンダーが実装されました。考え方は比較的明確です。まず、現在の時刻を取得し、現在の月の最初と最後の日に対応する曜日を計算し、次に最初の日から何日前と最後の日から何日前を表示するかを計算します。次に、先月、今月、来月を配列に接続し、配列に従って週を分割します:

rrreee 次にレンダリングします: rrreee

最後に

は試してみる小さなプログラムです。持ち帰り。

関連記事:

最初の PHP アプレット (学習)

🎜🎜 アプレットのサードパーティ管理と開発を承認する手順 (ミニ プログラム チュートリアル) 🎜🎜🎜関連ビデオ: 🎜🎜🎜🎜 Geek Academy WeChat アプレット ビデオ基本から実践的な手順までのチュートリアル🎜🎜

以上が【ミニプログラム】初めてのミニプログラム開発の経験を共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。