微信小程序——菜谱

发表于 | 更新于 | 分类于 |

在慕课网上学到了如何开发微信小程序，今天特别上阿里云上去买了个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

演示