摘要：先上圖開(kāi)發(fā)環(huán)境準(zhǔn)備小程序出來(lái)第二天就被破解，第三天微信就把開(kāi)發(fā)工具開(kāi)發(fā)下載了，現(xiàn)在只需要下載微信開(kāi)發(fā)者工具就可以使用了，創(chuàng)建項(xiàng)目的時(shí)候，要選擇無(wú)這樣就不會(huì)有的驗(yàn)證了。

上周被 小程序 刷了屏，嚇得我周末趕緊擼了個(gè) 小程序 版的 知乎日?qǐng)?bào) 壓壓驚, 總結(jié)一下這個(gè)開(kāi)發(fā)體驗(yàn)，和踩過(guò)的坑。

小程序 出來(lái)第二天就被破解，第三天微信就把開(kāi)發(fā)工具開(kāi)發(fā)下載了， 現(xiàn)在只需要下載 微信開(kāi)發(fā)者工具 就可以使用了，

創(chuàng)建項(xiàng)目的時(shí)候，要選擇無(wú) appid, 這樣就不會(huì)有 appid 的驗(yàn)證了。

app.js 注冊(cè)app邏輯， app.wxss 全局樣式文件 app.json 配置信息

pages 存放頁(yè)面文件

utils 工具類(lèi)代碼

images 圖片資源文件

小程序中每一個(gè)頁(yè)面都會(huì)有三個(gè)文件 .wxml .wxss .js ，對(duì)應(yīng)著結(jié)構(gòu)、樣式、和邏輯，相當(dāng)于網(wǎng)頁(yè)中的 html css 和 js 的關(guān)系。

代碼來(lái)自新建項(xiàng)目

  
    
    {{userInfo.nickName}}
  
  
    {{motto}}
  

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}

//index.js
//獲取應(yīng)用實(shí)例
var app = getApp()
Page({
  data: {
    motto: "Hello World",
    userInfo: {}
  },
  //事件處理函數(shù)
  bindViewTap: function() {
    wx.navigateTo({
      url: "../logs/logs"
    })
  },
  onLoad: function () {
    console.log("onLoad")
    var that = this
    //調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù)
    app.getUserInfo(function(userInfo){
      //更新數(shù)據(jù)
      that.setData({
        userInfo:userInfo
      })
    })
  }
})

新建的項(xiàng)目中，index 下都會(huì)看到這些代碼，接下來(lái)分別介紹 wxml wxss js

這個(gè)是頁(yè)面結(jié)構(gòu)的描述文件, 主要用于以下內(nèi)容

用標(biāo)簽形式指定組件使用

使用 wx:for wx:if 等指令完成一些模板上的邏輯處理

使用 bind* 綁定事件

樣式文件，和 css 語(yǔ)法基本一致，不過(guò)支持的選擇器語(yǔ)法有限 看這里， 可以使用 flexbox 完成布局。
內(nèi)部也可以使用 import 命令引入外部樣式文件

@import "common.wxss";

.pd {
    padding-left: 5px;
}

頁(yè)面邏輯控制， 遵循 commonJs 規(guī)范

// util.js
function formatTime(date) {
  // ....
}

function formatDate(date, split) {
  // ...
}
module.exports = {
  formatTime: formatTime,
  formatDate: formatDate
}

var utils = require("../../utils/util.js")

這里的js 并不是在 瀏覽器環(huán)境下運(yùn)行， 所以 window.* 這一類(lèi)的代碼都會(huì)報(bào)錯(cuò)， dom 操作也是不被允許的，官方目前好像是不能支持其他的 js 庫(kù)運(yùn)行，全封閉式，這個(gè)以后應(yīng)該會(huì)逐漸完善。

頁(yè)面上使用 Page 方法來(lái)注冊(cè)一個(gè)頁(yè)面

Page({
  data:{
    // text:"這是一個(gè)頁(yè)面"
  },
  onLoad:function(options){
    // 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù)
  },
  onReady:function(){
    // 頁(yè)面渲染完成
  },
  onShow:function(){
    // 頁(yè)面顯示
  },
  onHide:function(){
    // 頁(yè)面隱藏
  },
  onUnload:function(){
    // 頁(yè)面關(guān)閉
  }
})

當(dāng)我們需要改變 綁定的數(shù)據(jù)時(shí)，必須調(diào)用 setData 方法修改，才會(huì)觸發(fā)頁(yè)面更新，像這樣：

Page({
    data: {
        text: "這是一個(gè)頁(yè)面"
    },
    onLoad: function() {
        this.setData({
            text: "this is page"
        })
    }
})

以下內(nèi)容來(lái)自微信官方文檔。

小程序使用 wx:if="{{condition}}" 完成條件渲染，類(lèi)似于 vue 的 v-if

 True 

也可以用 wx:elif 和 wx:else 來(lái)添加一個(gè) else 塊：

 1 
 2 
 3 

wx:for 控制屬性綁定一個(gè)數(shù)組，即可使用數(shù)組中各項(xiàng)的數(shù)據(jù)重復(fù)渲染該組件。
內(nèi)置變量 index （數(shù)組遍歷的下標(biāo)）， item （數(shù)組遍歷的每一項(xiàng)）

  {{index}}: {{item.message}}

Page({
  items: [{
    message: "foo",
  },{
    message: "bar"
  }]
})

使用wx:for-item可以指定數(shù)組當(dāng)前元素的變量名

使用wx:for-index可以指定數(shù)組當(dāng)前下標(biāo)的變量名：

  {{idx}}: {{itemName.message}}

wxml 只是用 bind[eventName]="handler" 語(yǔ)法綁定事件

  tap

Page({
    bindViewTap: function(e) {
        console.log(e.taget)
    }
})

通過(guò) data-* 和 e.target.dateset 傳遞參數(shù)

  tap

Page({
    bindViewTap: function(e) {
        // 會(huì)自動(dòng)轉(zhuǎn)成駝峰式命名
        console.log(e.taget.dataset.testMsg) // 啦啦啦啦啦啦
    }
})

當(dāng)在父組件綁定事件和參數(shù)，點(diǎn)擊時(shí)又子組件冒泡事件到父組件，這個(gè)時(shí)候 e.target.dataset 為空

    tap

Page({
    bindViewTap: function(e) {
        console.log(e.taget.dataset.testMsg) // undefined
    }
})

在知乎日?qǐng)?bào)這個(gè)項(xiàng)目上有大量圖片需要從網(wǎng)上下載，這里 image 組件額顯示顯得極其不穩(wěn)定，有很多的圖片都顯示不出來(lái).

微信小程序現(xiàn)在還在內(nèi)測(cè)階段，有很多的問(wèn)題需要完善，不過(guò)對(duì)于開(kāi)發(fā)速度和體驗(yàn)來(lái)說(shuō)還是不錯(cuò)的，期待正式發(fā)布的那一天。

官方文檔

開(kāi)發(fā)工具下載

awesome-wechat-weapp