[小程序]撸了第一个小程序

woshicixide 发布于2019-08-23 10:39 / 1238人阅读

摘要：豆瓣这几天看了下小程序的文档，然后花了点时间写了个没什么含量的小程序。后来选择了豆瓣，又发现小程序屏蔽了豆瓣的，好在网上有大神架了代理服务器。

豆瓣API

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

使用https://douban.uieee.com，是某大佬搭建的代理，

https://api.douban.com/v2/boo... =》https://douban.uieee.com/v2/b...

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

修改data中子对象的属性

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

var temp="person.name";
......

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

评分星星化

在界面中涉及到评分的star化，这里采用了一个比较笨的方法。就是准备星星可能的三种状态的图片，然后根据分数算出具体的分数数组，最后遍历该数组，对应每一颗星星应该展示的状态。参考3

模版的一个小坑

在这里使用了小程序的模版template。需要注意的是这里有一个坑，模版的文件名字和模版里的name必须一致。参考4

网络延时带来的问题

在页面渲染时，有可能因为网络问题导致豆瓣数据返回不够及时，然后进一步导致页面模版设置数据时，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];
    }

接着渲染：


    
      
        
          {{day.date}}

参考5

最后

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

放个二维码：

混合云云服务器一个小程序下载一个小程序做一个小程序开发一个小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96553.html

一个前端菜鸟的成长历程

摘要：张鑫旭老师的文章写的很棒，解决了我的许多困惑。所以，基础知识的牢固就显得尤为重要是个不怎么听话的孩子，总是会搞出一些奇奇怪怪的事情来张鑫旭老师十年磨一剑，钻研的魔法，可见其中技术细节有多复杂。从实习算起，到现在工作了也有一年半的时间了，在这期间，深深感受到了前端领域的飞速发展，在这里记录一下自己的成长历程，算是对知识的一个梳理，也希望帮助到刚入行的同学们。说来惭愧，大学里并没有涉...

lieeps 2019-08-29 15:37 评论0 收藏0
一个前端菜鸟的成长历程

摘要：张鑫旭老师的文章写的很棒，解决了我的许多困惑。所以，基础知识的牢固就显得尤为重要是个不怎么听话的孩子，总是会搞出一些奇奇怪怪的事情来张鑫旭老师十年磨一剑，钻研的魔法，可见其中技术细节有多复杂。从实习算起，到现在工作了也有一年半的时间了，在这期间，深深感受到了前端领域的飞速发展，在这里记录一下自己的成长历程，算是对知识的一个梳理，也希望帮助到刚入行的同学们。说来惭愧，大学里并没有涉...

SHERlocked93 2019-08-26 11:59 评论0 收藏0
we-color-picker 微信小程序拾色器（颜色选择器）组件

摘要：最近一直在搞小程序，由于刚需一个拾色器，搜了半天也没见人做过，就自己动手撸了一个，还在不断地改进优化中。。。最近一直在搞小程序，由于刚需一个拾色器，搜了半天也没见人做过，就自己动手撸了一个，还在不断地改进优化中。。。项目地址 https://github.com/KirisakiAr... 查看DEMO showImg(https://i.loli.net/2019/01/02/...

tainzhi 2019-08-23 14:28 评论0 收藏0
Min - 小程序自定义组件解决方案

摘要：首先，需要微信官方支持以自定义标签的方式来封装组件。依托于同微信团队良好的沟通渠道，我们团队在第一时间获得了自定义标签组件的内测邀请，并开始着手将我们的想法落地。微信自定义组件功能，已于日开始公测，请升级微信版本到或更高。项目开源地址： MinUI：https://github.com/meili/minuiMin Cli：https://github.com/meili/min-c...

mj 2019-08-21 17:26 评论0 收藏0
吃货福利get-今日美食food微信小程序

摘要：微信小程序仿今日美食初学微信小程序，嗯，还不错嘛，挺有趣的于是自己动手撸了一个。开发工具下载开发者工具微信小程序官网，下载好后就可以进行开发了哟。 wechat-todayFood 微信小程序仿今日美食food 初学微信小程序，嗯，还不错嘛，挺有趣的！于是自己动手撸了一个?。你别说一看标题就知道我是吃货呀，我是不想这么快就被揭穿的，但是这个小程序就是这么有意思呀。好了我要进入正题了，...

loostudy 2019-08-20 18:17 评论0 收藏0