微信小程序——菜谱

在慕课网上学到了如何开发微信小程序,今天特别上阿里云上去买了个API去实际的锻炼下自己。自己动手去开发一下。那么今天就带来一个小程序“菜一谱”。

以前博客文章都是贴代码,我觉得那样不行。那么今天就来聊一聊在写代码中遇到的一些问题把。

JavaSript思路

因为API是有限制的先用离线数据开发。在利用微信自带缓存API储存数据,然后调用。
因为购买的JSON数据请求有限制情况所以,在搜索页面载入所有数据并写入到缓存减少数据访问次数。在菜谱详情页面提取缓存数据。

图片

主页名

login

搜索结果页面

search

点击详情页面

list

关于微信小程序点击函数传递数据

在编写中遇到一个问题就是当有一组图片数据时,微信自带API(previewImage)不能有效的识别当前点击的图片。

解决方法:从服务器端获取的API中的JSON中数组中,每个图片绑定一个ID,供他识别。

1
2
3
4
5
6
7
8
9
10
// 图片点击函数
onCaipuImg: function (event){
// 获取数据绑定的图片id
var num = event.currentTarget.dataset.pcontentsid;
wx.previewImage({
current: this.data.Url.process[num].pic,
urls: [this.data.Url.process[num].pic]
})
console.log(event)
},

console

code

GitHub

演示