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

1. 下載開發者工具：微信小程序官網，下載好后就可以進行開發了喲。如果你想要發布你的小程序的話呢，就要在創建小程序的時候獲取AppId,可以去https://mp.weixin.qq.com 這里了解詳情獲取;
2. 開發文檔：微信小程序寶典秘籍，這個是開發小程序的寶典，里面包括了各種組件，API,框架and so on...　
   3.　Easy Mork： easy-mock,通過它能快速生成模擬數據的服務，它能為我們提供一個數據接口url，然后使用wx.request({ url: url, .....})來發送數據請求，我的數據大部分都是通過Mork模擬的；
3. 創建小程序后：

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

• 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 傳數據　
 具體功能解析1. 插入一組圖片，并實現跳轉　

  因為是要插入一組圖片，所以我們可以用wx:for={{}}來實現 
HTML結構

<view wx:for="{{foodList}}" wx:key="item" bindtap="bindViewTap" id="{{item.id}}" class="list">
 　<view class="image">
 <image src="{{item.src}}"/>
 　</view>
				

js配置 
 我是在這里插入了圖片的地址信息，在data數組里面

//事件處理函數
bindViewTap: function(e) {
  console.log(e.currentTarget.id)
  var id = e.currentTarget.id
  wx.navigateTo({
    url: '../detail/detail?id='+ id
  })
 　},２.　scroll-view的使用，可滾動視圖區域生成

在需要設置滾動區域，用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");
  },


３.　視頻播放，video組件使用（這是我踩過的坑！）

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()方法把兩個數組連接起來。
３.就是去看文檔啊，看文檔！