如何開發(fā)的第一個(gè)小程序

這篇文章將為大家詳細(xì)講解有關(guān)如何開發(fā)的第一個(gè)小程序，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

修改data中子對象的屬性

在使用wx.request后獲得的數(shù)據(jù)要寫入Page的data，與Vue.js不同的是，小程序需要調(diào)用this.setData，同時(shí)里面如果寫入時(shí)修改到的對象里面的屬性，應(yīng)定義一個(gè)變量連接對象和屬性合成的字符串，再通過中括號[]將其包起來。例如：

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

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

評分星星化

在界面中涉及到評分的star化，這里采用了一個(gè)比較笨的方法。就是準(zhǔn)備星星可能的三種狀態(tài)的圖片，然后根據(jù)分?jǐn)?shù)算出具體的分?jǐn)?shù)數(shù)組，最后遍歷該數(shù)組，對應(yīng)每一顆星星應(yīng)該展示的狀態(tài)。

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

模版的一個(gè)小坑

在這里使用了小程序的模版template。需要注意的是這里有一個(gè)坑，模版的文件名字和模版里的name必須一致。

網(wǎng)絡(luò)延時(shí)帶來的問題

在頁面渲染時(shí)，有可能因?yàn)榫W(wǎng)絡(luò)問題導(dǎo)致豆瓣數(shù)據(jù)返回不夠及時(shí)，然后進(jìn)一步導(dǎo)致頁面模版設(shè)置數(shù)據(jù)時(shí)，data里的值不是需要的值。這里糾結(jié)了很久，最后選擇了一個(gè)相當(dāng)不優(yōu)雅的做法，即將設(shè)置相關(guān)數(shù)據(jù)的函數(shù)延時(shí)了2秒后執(zhí)行。如果豆瓣數(shù)據(jù)能在2秒內(nèi)返回，那么問題看起來解決了，如果2秒內(nèi)沒有獲得有效數(shù)據(jù)，問題就并沒有解決。再者，2秒對用戶體驗(yàn)絕對有相當(dāng)大的影響，但是這里也不知道該用什么辦法解決...

沒有用到的日歷

在小程序的初期，本來打算實(shí)現(xiàn)日歷點(diǎn)擊跳轉(zhuǎn)到對應(yīng)電影頁面的功能，后來覺得不好便沒做，不過日歷倒是實(shí)現(xiàn)了一遍。思路比較清晰，先獲取當(dāng)前時(shí)間，并計(jì)算出當(dāng)前月份的第一天和最后一天分別對應(yīng)的是星期幾，接著再計(jì)算第一天前和最后一天后應(yīng)該還應(yīng)該顯示幾天。然后將上個(gè)月的、這個(gè)月的、下個(gè)月的連接成一個(gè)數(shù)組，接著根據(jù)數(shù)組分周：

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='calendarBody'>
    <block wx:for="{{calendar.weeks}}" wx:for-item="weeks" >
      <view class='calendar-body-weeks'>
        <block wx:for="{{weeks}}" wx:for-item="day">
          <view class="calendar-body-day {{calendar.month==day.month&&calendar.date==day.date? 'is-current':' '}} {{calendar.month!=day.month?'nou-curMonth':' '}}" data-date='{{day.date}}' bindtap='selectDate'>{{day.date}}</view>
        </block>
      </view>
    </block>
</view>

關(guān)于“如何開發(fā)的第一個(gè)小程序”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。