微信小程序添加一个随机食谱的功能

本次应用是在微信开发者工具平台上进行的，此平台的基本用法和案例可以参考使用微信开发者工具制作小程序的基本方法或者官方的文档https://developers.weixin.qq.com/miniprogram/dev/framework/

本实验的应用所新增的功能是点击微信小程序上的按钮，就可以触发生成一个随机的食谱，例如在下图中点击一下“今日吃什么”的按钮，就随机生成食谱-糖醋排骨。

此应用的技术思路就是通过时间的不同，随机生成一个伪随机数，再通过这个伪随机数从已有的数列中选择相应的食谱。

index.wxml部分的代码和注释如下：

//index.wxml部分的代码
  <view class="chishenme"  bindtap='chi'><button>今天吃什么</button></view> //作为触发的按钮
  <view class="shiwu">{{code}}</view> //用以显示随机的食谱
  <view class="chishenme"  bindtap='qingchushipu'><button>清除食谱</button></view> //清除显示的内容，便于下次触发

index.js部分的代码和注释如下：

  Page({
  data: {
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  chi(){
       this.getcode()
  },  //“今天吃什么”按钮对应的函数
  getcode(){
    var code;
    code='';
    var timestamp =Date.parse(new Date());  //获取时间
    var n = timestamp *1000;
    var date = new Date(n);
    var s =date.getSeconds();
    var random=new Array("麻辣鸡丁", "酸菜鱼", "宫保鸡丁","烤鸡","鱼香肉丝","回锅肉","糖醋排骨","石锅三样","烤羊排","红烧肉","水煮虾");//作为随机食谱的数据库
    var id = Math.floor(s/6);  //根据时间的不同生成不同的伪随机数
    code = random[id];    //根据伪随机数选择对应的数据库上的食谱
    this.setData({
      code: code     //将食谱输出到index.wxml的{{code}}
    })
  },
  qingchushipu(){
    this.setData({
      code: ''     //清除{{code}}上显示的食谱
    })
  }
})

相关视频：

或者关注B站"月丶匈"也有相关的视频

我们的公众号：认知无线电

我们的网站：www.lolplayer.club

我们的Github：Yue-Xiong

欢迎关注和指正