微信小程序知识点(二)

从开始做小程序到目前为止，已经将近二十天了。一开始我的小程序只有简简单单的crud，以至于上线的时候我朋友说这么简单有什么用？于是自己计划设计六个功能出来，分别是新闻、星座、音乐、笑话、天气、驾校考题，接口全部是调用聚合接口：https://www.juhe.cn/，大家可以自己去这个网站上注册并申请免费接口，接口每天只有一百次调用的机会，要注意珍惜！
我按照顺序依次讲下我在做的时候遇到的哪些困难。
在设计星座的时候给星座设计多选框的时候，我选择了小程序picker这个组件，效果如下：

这个组件究竟是怎么个玩法，我到现在还没有搞得特别明白，但是当时在做的时候最让我头疼的时候获取对应参数。我在控制台打印，他每次返回的都是数组下标，却获取不到对应的文字参数，我去网上百度了一大堆，后来在一篇博客里看到了解决方法。其实他这里是通过数组下标获取到了对应文字，后来想想倒还真不值一提了。

data: {array: ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座'],index: 0,alldata: {},imgdata: ''},bindPickerChange: function(e) {var that = this;this.setData({index: e.detail.value})console.log(this.data.array[e.detail.value]);var consname = this.data.array[e.detail.value];

音乐组件用的是audio，这个组件现在已经被微信官方放弃了，但是新的api本人还没有去研究，所以这里不做介绍。不过在获取音乐的URL的时候自己遇到了一个拼接字符串问题，我后来又在另一篇博客里简单说了一下。https://blog.csdn.net/Curtisjia/article/details/102995247，虽然看着很简单但是自己做的时候就没有想到，Java基础还是十分的薄弱的，后面还是会好好复习的。
至于天气的预报只是最简单的数据渲染而已，唯一的缺点就是地址是我写死的，后面可能会调取定位的接口来完善这个功能。
做笑话这个功能的时候，第一问题就是如何获取当前时间绝对秒，因为这个接口需要这个参数，当然我还是百度了，最后在一篇博客里找到了方法。

    @ResponseBody@RequestMapping(value = "/sentTimeStamp",method = RequestMethod.GET)public Map<String,Object> sentTimeStamp(){Map<String,Object> map=new HashMap<>();//https://blog.csdn.net/lin_dianwei/article/details/54616014long timeStampSec = System.currentTimeMillis()/1000;String timestamp = String.format("%010d", timeStampSec);log.info(timestamp);//获取当前绝对秒map.put("timestampSec",timestamp);return map;}

接着就是分页了，本来我是想着做个上一页下一页这样的，后来想想还是算了，下拉刷新他不香吗？你也不要问我怎么做？我这里所有列出来的点全部都是我自己百度的，要不然怎么说是面向百度编程？小程序onPullDownRefresh方法里写方法，不过这里面当时困扰了我两三个小时的就是怎么给page+1，我记得我一开始是这么写的var page=1;page=page++;当然他是有问题的，因为在函数里面定义了一个初始值，所以每次执行的时候都增加不了。所以我又去开始大面积百度了，终于让我找到了方法。首先在全局里面定义一个js的全局里面定义一个page，然后在函数里面写page=page+1再后面的代码就直接复制粘贴了，懒得写了

onPullDownRefresh: function() {// 显示顶部刷新图标wx.showNavigationBarLoading();page = page + 1;console.log('page:' + page);wx.request({url: 'http://v.juhe.cn/joke/content/list.php?sort=desc&page=' + page + '&pagesize=10&time=' + this.data.timestampSec + '&key=7993d189bad45a539efdfdd117e228f8',method: "GET",success: e => {console.log(e.data.result.data);this.setData({laughStories: e.data.result.data})// 隐藏导航栏加载框wx.hideNavigationBarLoading();// 停止下拉动作wx.stopPullDownRefresh();}})},

驾校考题这里与后台没有一点关系，就是直接调用接口然后渲染到页面上，但是有几个难点，第一个就是又用到这该死的picker组件，只不过这次不是单列了而是双列，官网上有一个三列的例子，不过我没研究透，而且我这里的功能没有做好，官网上的有个动态变化选项，我这里没有做，我这里轮转到科目四时，右边应该是空，我还没有实现出来，后面会进行更改。

当然如何通过下标获取对应的参数同样成了我的问题，我定义了一个新的二维数组里面放了我需要的参数，然后就开始了我漫漫尝试的道路。反正最终是试出来了。
然后就是隐藏radio，因为返回的数据有的是判断题，只有两个选项，本地这边有四个radio，所以当有的item为空的是，需要把radio隐藏起来。我想到了条件渲染。<radio class="radio" value="3" hidden="{{flag ?item.item3=='':item.item3!=null}}">在data那边默认flag：true，然后用三目运算符进行判断。
之后是对答案的正确判断，这里我的思路是把answer用data-的方法放到radio的函数里，然后获取就是用e.target.dataset.answer获取，判断的方法太简单我就不说了。

博客写着写着，发现自己小程序又出现问题，这是刚刚发现的，控制台上报500错误VM394:1 Failed to load local image resource /pages/jiacheexam/ the server responded with a status of 500 (HTTP/1.1 500 Internal Server Error)很奇怪，我这个功能并不涉及后台，而且我图片渲染也没有出现问题，病因在哪我一时半会找不到，百度了几个例子，说可能是图片渲染的时候路径出现了问题，又要百度了。

未完待续。。。

微信小程序知识点(二)相关推荐

微信小程序知识点总汇
微信小程序知识点总汇文件结构:最上层app ->多个page ->多个组件(内置组件/自定义组件) app: app.js:创建app实例代码 [app:实例对象 app.json:程序 ...
【微信小程序】二维码跳转规则的前缀匹配是什么意思？
前言基础库 2.12.0 开发者工具 1.03.2008270 微信小程序的二维码跳转规则为了方便小程序开发者更便捷地推广小程序,兼容线下已有的二维码,微信公众平台开放扫描普通链接二维码跳转小程序 ...
微信小程序入门二：底部导航tabBar
小程序底部导航栏组件tabBar,可以参考下官方的API:tabBar 先看代码 //app.json {"pages":["pages/index/index" ...
微信小程序获取二维码中URL中带的参数
解析微信小程序获取二维码中的url参数 onLoad: function (options) { console.log(options) let qrUrl = decodeURIComponent ...
微信小程序普通二维码解析
1.区别于微信小程序官方二维码是直接从onLoad的 options 解构出来就行,它是一个对象,这个大家都知道. 2.普通二维码也是从onLoad的 options 里解构出来,此时options ...
微信小程序：二开版优化新紫色UI云开发新款壁纸小程序源码
这是一款由旧版https://airymz.com/3387.html进行优化二开的一个新版本本壁纸表情包头像小程序采用(dcloud云开发)所以无需服务器与域名无需服务器.无需域名.云开发直接上 ...
微信小程序扫描二维码或者条码
程序是需要扫描条形码然后跳转到对应的产品信息页,其实微信小程序就有一个扫码识别的API,下面一起来看看: wx.scanCode(Object object) 调起客户端扫码界面进行扫码. 示例代码: ...
微信小程序项目实例——二维码生成器
微信小程序项目实例--二维码生成器文章目录微信小程序项目实例--二维码生成器一.项目展示二.项目核心代码三.效果展示文末项目代码见文字底部,点赞关注有惊喜一.项目展示项目是一个简单实 ...
微信小程序转二维码方法分享
微信小程序转二维码方法分享需要转码的可以看看这个东西是看个人需求的,618就要来了,各种活动也将来袭有些小伙伴不知道怎么生成为了方便小程序邀请活动没法外发,这里分享下将小程序转二维码的方法首 ...

微信小程序知识点(二)

微信小程序知识点(二)相关推荐

最新文章

热门文章