首頁 > 微信小程式 > 小程式開發 > [小程式]開發的第一個小程式之經驗分享

[小程式]開發的第一個小程式之經驗分享

php是最好的语言
發布: 2018-08-03 10:51:47
原創
1853 人瀏覽過

豆瓣API

這幾天看了下小程式的文檔,然後花了點時間寫了個沒什麼含量的小程式。本來想自己寫下API接口,但是小程式請求的網域既要求備案又要求HTTPS,太麻煩遂放棄。後來選擇了豆瓣API,又發現小程式屏蔽了豆瓣的API,好在網路上有大神架了代理伺服器。

有了豆瓣的API,打算做一個類似小本子,記錄一些自己看過的電影,然後從豆瓣拉取相關的評分和海報。無奈豆瓣API提供的海報最大的解析度也很低,導緻小程式觀感極差,但是也沒有辦法啊,畢竟用的是別人的東西…

修改data中子物件的屬性

在使用wx.request後獲得的資料要寫入Pagedata,與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裡的值不是需要的值。這裡糾結了很久,最後選擇了一個相當不優雅的做法,即將設定相關數據的函數延時了2秒後執行。如果豆瓣數據能在2秒內返回,那麼問題看起來解決了,如果2秒內沒有獲得有效數據,問題就沒有解決。再者,2秒對使用者體驗絕對有相當大的影響,但是這裡也不知道該用什麼辦法解決...

沒有用到的日曆

#在小程式的初期,本來打算實現日曆點擊跳到對應電影頁面的功能,後來覺得不好便沒做,不過日曆倒是實現了一遍。想法比較清晰,先獲取當前時間,併計算出當前月份的第一天和最後一天分別對應的是星期幾,接著再計算第一天前和最後一天后應該還應該顯示幾天。然後將上個月的、這個月的、下個月的連接成一個數組,接著根據數組分週:

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];
    }
登入後複製

接著渲染:

<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>
登入後複製

最後

只是一個試手的小程序,還有很多路要走。

相關文章:

第一個php小程式(學習)

#小程式授權第三方管理開發的步驟(小程式教學)

相關影片:

極客學院微信小程式從基礎到實戰影片教學

#

以上是[小程式]開發的第一個小程式之經驗分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板