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

1. 下載開發(fā)者工具：微信小程序官網(wǎng)，下載好后就可以進行開發(fā)了喲。如果你想要發(fā)布你的小程序的話呢，就要在創(chuàng)建小程序的時候獲取AppId,可以去https://mp.weixin.qq.com 這里了解詳情獲取;
2. 開發(fā)文檔：微信小程序寶典秘籍，這個是開發(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模擬的；
3. 創(chuàng)建小程序后：

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

• page文件夾, 頁面文件夾 包含你所有的頁面文件,至少包含.js .wxml .wxs后綴文件，.json可選
• utlis文件夾 ,放置一些全局需要使用的js文件
• app.js 控制全局的邏輯結構
• app.json 配置一些全局數(shù)據(jù)，所有頁面都要在此處注冊  * app.wxml 內容結構  * app.wxss 全局樣式頁面注冊：

  "pages":[
    "pages/index/index",
    "pages/detail/detail"
  ],效果預覽：

 項目功能：

  * 首頁插入一組圖片，并實現(xiàn)跳轉　
  * scroll-view的使用，可滾動視圖區(qū)域生成　
  * 視頻播放，video組件使用　
  * 發(fā)表評論　
  * 評論顯示　
  * 獲取數(shù)據(jù)及交互反饋　
  * 獲取用戶信息　
  * 動態(tài)獲取評論時間　
  * 利用mock 傳數(shù)據(jù)　
 具體功能解析1. 插入一組圖片，并實現(xiàn)跳轉　

  因為是要插入一組圖片，所以我們可以用wx:for={{}}來實現(xiàn) 
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數(shù)組里面

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

在需要設置滾動區(qū)域，用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組件使用（這是我踩過的坑?。?/pre>
				

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



４.　發(fā)表評論（最大的坑?。?/pre>
				

					　
				

					包括 ：

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

					  * 獲取用戶信息　

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

					HTML結構　
				

   
        發(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結構
				


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


６.　用ｍｏｃｋ傳遞數(shù)據(jù)
				

var id=options.id; 
    //調用應用實例的方法獲取全局數(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就得到其內容。

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

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