Rumah > applet WeChat > Pembangunan program mini > [小程序]开发的第一个小程序之经验分享

[小程序]开发的第一个小程序之经验分享

php是最好的语言
Lepaskan: 2018-08-03 10:51:47
asal
1867 orang telah melayarinya

豆瓣API

这几天看了下小程序的文档,然后花了点时间写了个没什么含量的小程序。本来想自己写下API接口,但是小程序请求的域名既要求备案又要求HTTPS,太麻烦遂放弃。后来选择了豆瓣API,又发现小程序屏蔽了豆瓣的API,好在网上有大神架了代理服务器。

有了豆瓣的API,打算做一个类似小本子,记录一些自己看过的电影,然后从豆瓣拉取相关的评分和海报。无奈豆瓣API提供的海报最大的分辨率也很低,导致小程序观感极差,但是也没有办法啊,毕竟用的是别人的东西……

修改data中子对象的属性

在使用wx.request后获得的数据要写入Pagedata,与Vue.js不同的是,小程序需要调用this.setData,同时里面如果写入时修改到的对象里面的属性,应定义一个变量连接对象和属性合成的字符串,再通过中括号[]将其包起来。例如:

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

this.setData({
    [temp]:'Mike'
})
Salin selepas log masuk

评分星星化

在界面中涉及到评分的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>
Salin selepas log masuk

模版的一个小坑

在这里使用了小程序的模版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];
    }
Salin selepas log masuk

接着渲染:

<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>
Salin selepas log masuk

最后

只是一个试手的小程序,还有很多路要走。

相关文章:

第一个php小程序(学习)

小程序授权第三方管理开发的步骤(小程序教程)

相关视频:

极客学院微信小程序从基础到实战视频教程

Atas ialah kandungan terperinci [小程序]开发的第一个小程序之经验分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan