您好,登录后才能下订单哦!
这篇文章将为大家详细讲解有关如何开发的第一个小程序,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
在使用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='../../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>
在这里使用了小程序的模版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='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>
关于“如何开发的第一个小程序”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。