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

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

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

• 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"
  ],效果預(yù)覽：

 項(xiàng)目功能：

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

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

<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ū)域生成

在需要設(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");
  },


３.　視頻播放，video組件使用（這是我踩過的坑?。?/pre>
				

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



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

					　
				

					包括 ：

					  * 獲取數(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
    })
  }
})


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

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ù)組連接起來。

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