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

微信小程序仿今日美食food

初學微信小程序，嗯，還不錯嘛，挺有趣的！ 于是自己動手擼了一個?。你別說一看標題就知道我是吃貨呀，我是不想這么快就被揭穿的，但是這個小程序就是這么有意思呀。好了我要進入正題了，我們一起去看看我的demo吧。

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

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

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

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

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

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

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

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

?* app.wxss 全局樣式

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

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

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

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

? * 發(fā)表評論　

? * 評論顯示　

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

? * 獲取用戶信息　

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

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

?

? 因為是要插入一組圖片，所以我們可以用wx:for={{}}來實現(xiàn)

HTML結(jié)構

 ?　
 
 ?　

js配置

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

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

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

HTML結(jié)構

 ?  
            {{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é)構

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
                })
            }
        })
    },
})

包括 ：

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

? * 獲取用戶信息　

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

HTML結(jié)構　

   
        
        發(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("用戶點擊確定")
    } 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)
}
},

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

在util.js中　

module.exports = {
  formatTime: formatTime
}

HTML結(jié)構

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

js結(jié)構

    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)用應用實例的方法獲取全局數(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
            })
    }
  })

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

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

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

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

對了，視頻可能不太好放出來，有時候要看緣分，因為視頻本身權限原因，我也好難過啊?

嘻嘻，如果您覺得還不錯的話，可以給個star喲，謝謝。