摘要：微信小程序仿今日美食初學(xué)微信小程序，嗯，還不錯(cuò)嘛，挺有趣的于是自己動手?jǐn)]了一個(gè)。開發(fā)工具下載開發(fā)者工具微信小程序官網(wǎng)，下載好后就可以進(jìn)行開發(fā)了喲。

微信小程序仿今日美食food

初學(xué)微信小程序，嗯，還不錯(cuò)嘛，挺有趣的！ 于是自己動手?jǐn)]了一個(gè)?。你別說一看標(biāo)題就知道我是吃貨呀，我是不想這么快就被揭穿的，但是這個(gè)小程序就是這么有意思呀。好了我要進(jìn)入正題了，我們一起去看看我的demo吧。

下載開發(fā)者工具：微信小程序官網(wǎng)，下載好后就可以進(jìn)行開發(fā)了喲。如果你想要發(fā)布你的小程序的話呢，就要在創(chuàng)建小程序的時(shí)候獲取AppId,可以去https://mp.weixin.qq.com 這里了解詳情獲取;

開發(fā)文檔：微信小程序?qū)毜涿丶@個(gè)是開發(fā)小程序的寶典，里面包括了各種組件，API,框架and so on...　

3.　Easy Mork： easy-mock,通過它能快速生成模擬數(shù)據(jù)的服務(wù)，它能為我們提供一個(gè)數(shù)據(jù)接口url，然后使用wx.request({ url: url, .....})來發(fā)送數(shù)據(jù)請求，我的數(shù)據(jù)大部分都是通過Mork模擬的；

會自動生成一些基本文件：

page文件夾, 頁面文件夾 包含你所有的頁面文件,至少包含.js .wxml .wxs后綴文件，.json可選

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

app.js 控制全局的邏輯結(jié)構(gòu)

app.json 配置一些全局?jǐn)?shù)據(jù)，所有頁面都要在此處注冊
?* app.wxml 內(nèi)容結(jié)構(gòu)

?* app.wxss 全局樣式

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

? * 首頁插入一組圖片，并實(shí)現(xiàn)跳轉(zhuǎn)　

? * scroll-view的使用，可滾動視圖區(qū)域生成　

? * 視頻播放，video組件使用　

? * 發(fā)表評論　

? * 評論顯示　

? * 獲取數(shù)據(jù)及交互反饋　

? * 獲取用戶信息　

? * 動態(tài)獲取評論時(shí)間　

? * 利用mock 傳數(shù)據(jù)　

?

? 因?yàn)槭且迦胍唤M圖片，所以我們可以用wx:for={{}}來實(shí)現(xiàn)

HTML結(jié)構(gòu)

 ?　
 
 ?　

js配置

?我是在這里插入了圖片的地址信息，在data數(shù)組里面

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

在需要設(shè)置滾動區(qū)域，用scroll-view標(biāo)簽把內(nèi)容包住

HTML結(jié)構(gòu)

 ?  
            {{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結(jié)構(gòu)

js配置

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

    onReady: function (res) {
    this.videoContext = wx.createVideoContext("item.id")
 },
  videoErrorCallback: function(e) {
  console.log("視頻錯(cuò)誤信息:")
  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
                })
            }
        })
    },
})

包括 ：

? * 獲取數(shù)據(jù)及交互反饋　

? * 獲取用戶信息　

? * 動態(tài)獲取評論時(shí)間　

HTML結(jié)構(gòu)　

   
        
        發(fā)布
     

js配置

輸入評論及獲取其信息：

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

獲取數(shù)據(jù)及交互反饋：

content:"",
issue:function(){
  var that=this ;
  var arr=new Array();
  if(this.data.content===""){
    wx.showModal({
  title: "提示",
  content: "請?zhí)顚懺u論",
  success: function(res) {
    if (res.confirm) {
      console.log("用戶點(diǎn)擊確定")
    } else if (res.cancel) {
      console.log("用戶點(diǎn)擊取消")
    }
  }
  })
  }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)
}
},

動態(tài)獲取評論時(shí)間　

在util.js中　

module.exports = {
  formatTime: formatTime
}

HTML結(jié)構(gòu)

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

js結(jié)構(gòu)

    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; 
    //調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù)
  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
            })
    }
  })

１．由第一個(gè)頁面中傳遞過來的數(shù)據(jù)不在是一個(gè)數(shù)組，而是一個(gè)對象，得到其id就得到其內(nèi)容。

２．發(fā)表評論的時(shí)候要對輸入的評論內(nèi)容進(jìn)行判斷，加入評論信息時(shí)可以把已有的評論信息和實(shí)時(shí)加入的評論信息當(dāng)成兩個(gè)數(shù)組，利用ｐｕｓｈ（）方法把評論內(nèi)容加　入，再利用concat()方法把兩個(gè)數(shù)組連接起來。

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

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

對了，視頻可能不太好放出來，有時(shí)候要看緣分，因?yàn)橐曨l本身權(quán)限原因，我也好難過啊?

嘻嘻，如果您覺得還不錯(cuò)的話，可以給個(gè)star喲，謝謝。