吃货福利get-今日美食food微信小程序

摘要：微信小程序仿今日美食初学微信小程序，嗯，还不错嘛，挺有趣的于是自己动手撸了一个。开发工具下载开发者工具微信小程序官网，下载好后就可以进行开发了哟。

微信小程序仿今日美食food

初学微信小程序，嗯，还不错嘛，挺有趣的！ 于是自己动手撸了一个?。你别说一看标题就知道我是吃货呀，我是不想这么快就被揭穿的，但是这个小程序就是这么有意思呀。好了我要进入正题了，我们一起去看看我的demo吧。

下载开发者工具：微信小程序官网，下载好后就可以进行开发了哟。如果你想要发布你的小程序的话呢，就要在创建小程序的时候获取AppId,可以去https://mp.weixin.qq.com 这里了解详情获取;

开发文档：微信小程序宝典秘籍，这个是开发小程序的宝典，里面包括了各种组件，API,框架and so on...　

3.　Easy Mork： easy-mock,通过它能快速生成模拟数据的服务，它能为我们提供一个数据接口url，然后使用wx.request({ url: url, .....})来发送数据请求，我的数据大部分都是通过Mork模拟的；

会自动生成一些基本文件：

page文件夹, 页面文件夹 包含你所有的页面文件,至少包含.js .wxml .wxs后缀文件，.json可选

utlis文件夹 ,放置一些全局需要使用的js文件

app.js 控制全局的逻辑结构

app.json 配置一些全局数据，所有页面都要在此处注册
 * app.wxml 内容结构

 * app.wxss 全局样式

  "pages":[
    "pages/index/index",
    "pages/detail/detail"
  ],

  * 首页插入一组图片，并实现跳转　

  * scroll-view的使用，可滚动视图区域生成　

  * 视频播放，video组件使用　

  * 发表评论　

  * 评论显示　

  * 获取数据及交互反馈　

  * 获取用户信息　

  * 动态获取评论时间　

  * 利用mock 传数据　

 

  因为是要插入一组图片，所以我们可以用wx:for={{}}来实现

HTML结构

js配置

 我是在这里插入了图片的地址信息，在data数组里面

//事件处理函数
bindViewTap: function(e) {
  console.log(e.currentTarget.id)
  var id = e.currentTarget.id
  wx.navigateTo({
    url: "../detail/detail?id="+ id
  })
  　},

在需要设置滚动区域，用scroll-view标签把内容包住

HTML结构

    
            {{videoInfo.title}}
            {{videoInfo.number}}
            {{videoInfo.time}}
            {{videoInfo.desc}}   
    

          
             
            
            {{item.nickName}}
            {{item.time}}
            
            {{item.desc}}
            

                
 

          
             
            
            {{item.nickName}}
            {{item.time}}
            
            {{item.desc}}
                

js配置

handleUpper: function (event) {
    console.log("handleUpper");
  },handleLower: function (event) {

console.log("handleLower");
  },

HTML结构

js配置

在 data中写入videoInfo: {}， hiddenVideo: true,

    onReady: function (res) {
    this.videoContext = wx.createVideoContext("item.id")
 },
  videoErrorCallback: function(e) {
  console.log("视频错误信息:")
  console.log(e.detail.errMsg)
 },
 bindButtonTap:function(){
        var that = this;
        wx.chooseVideo({
            sourceType:["album","camera"],
            maxDuration:60,
            camera:["front","back"],
            success:function(res){
                that.setData({
                    src:res.api_url
                })
            }
        })
    },
})

包括 ：

  * 获取数据及交互反馈　

  * 获取用户信息　

  * 动态获取评论时间　

HTML结构　

   
        
        发布
     

js配置

输入评论及获取其信息：

comment:[],
bindInput:function(e){
  var that=this;
  var value= e.detail.value;
  console.log(value);
  that.setData({
    content:value
  })
},

获取数据及交互反馈：

content:"",
issue:function(){
  var that=this ;
  var arr=new Array();
  if(this.data.content===""){
    wx.showModal({
  title: "提示",
  content: "请填写评论",
  success: function(res) {
    if (res.confirm) {
      console.log("用户点击确定")
    } else if (res.cancel) {
      console.log("用户点击取消")
    }
  }
  })
  }else{
  arr.push({
    nickName:this.data.nickName,
    avatarUrl:this.data.avatarUrl,
    time:util.formatTime(new Date()),
    desc:this.data.content
  })
  this.setData({
    comment:this.data.comment.concat(arr),
    content:""
  })
  console.log(this.data.comment)
  console.log(this.data.nickName)
 setTimeout (function(){
  wx.showToast({
    title: "评论成功",
    icon: "success",
    duration: 2000
  })
},1000)
}
},

动态获取评论时间　

在util.js中　

module.exports = {
  formatTime: formatTime
}

HTML结构

      
     
     {{item.nickName}}
     {{item.time}}
     
     {{item.desc}}
   

js结构

    var that = this
    wx.getUserInfo({
   success: function(res) {
    var userInfo = res.userInfo
    var nickName = userInfo.nickName
    var avatarUrl = userInfo.avatarUrl
    that.setData({
      nickName:nickName,
      avatarUrl:avatarUrl
    })
  }
})

var id=options.id; 
    //调用应用实例的方法获取全局数据
  var api_url="https://www.easy-mock.com/mock/5966410258618039284c745b/list/list";
  console.log(api_url);
  wx.request({
    url: api_url,
    method:"GET",
    success: function(res) {
    var info = res.data.data[id];
       that.setData({
              hidden: true,
              videoInfo: info
            })
    }
  })

１．由第一个页面中传递过来的数据不在是一个数组，而是一个对象，得到其id就得到其内容。

２．发表评论的时候要对输入的评论内容进行判断，加入评论信息时可以把已有的评论信息和实时加入的评论信息当成两个数组，利用ｐｕｓｈ（）方法把评论内容加　入，再利用concat()方法把两个数组连接起来。

３.就是去看文档啊，看文档！

https://github.com/carolineLH...

对了，视频可能不太好放出来，有时候要看缘分，因为视频本身权限原因，我也好难过啊?

嘻嘻，如果您觉得还不错的话，可以给个star哟，谢谢。