微信：小程式學習筆記（1）
微信的小程式已經推出了，相繼的教程也有。官方網頁推出API和介面說明，目前來講暫時足夠。
可以進入該連結檢視。微信官網
今天嘗試一下下載該web的開發工具，從目前來講，使用了一個下午。目前版本給人的感覺還有待繼續提升的恐懼。從編碼的體驗來講，對一個重度使用者來講並不算太好用。但足夠對付一個輕量級的程式。在除錯的過程，由於經常切換顯得不是太舒服。
1.注意專案路徑
由於第一次初始的時候，下載的demo，由於沒有注意app.json的放置的資料夾位置，導致了多了一層，導致老是報一個錯誤。經同事指點後，將檔案和專案資料夾放置同一級處，這樣就可以順利除錯到。由於appid申請不到，在公眾號那裡需要公測，因此只能有限制使用。
一個下午經過除錯了一下臨時搭建了一個沒有功能的介面。
2.使用元件
微信這裡提供了很多元件，這個和之前的微信樣式有點類似。通過元件的組合可以拼接一些介面使用。這個有點像css那樣，據官方說wxss檔案和css有點相似，區別和限制。
配置一個Tabbar，一個Tabbar最多是5個，相應的欄位需要對其進行配置，提供了圖片，點選的關聯的頁面。選擇的圖示狀態。
官方的程式碼如下：
"tabBar": {
"color": "#dddddd",
"selectedColor": "#3cc51f",
"borderStyle": "black" 使用檢視，圖片，文字，按鈕
<view class="card">
<view class="shopitem">
<image class="shopimg" src="http://img12.360buyimg.com/n5/jfs/t1174/338/865120803/45181/e564982f/5563cb4cNa42cf32c.jpg"></image>
<text class="title">小米充電寶</text>
<text class="price">$69元</text>
<button class="buy" type="primary">購買</button>
</view>
</view>按鈕提供了一些使用的樣式型別。
3.使用頁面
建立Tabbar按鈕，需要關聯一些頁面，頁面的命名方式需要保持一致。
如資料夾為index，裡面js wxml 和wxss保持 字首一樣。
index.js
index.wxml
index.wxss
切換頁面的時候，可以在js裡面控制一些行為。下面可以看到，通過app來獲取使用者的基本資訊。
定義資料
data: {
motto: 'Hello World',
userInfo: {}//使用者的基本資訊，微信使用者的資訊
},//官方案例
//index.js
//獲取應用例項
var app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {}
},
//事件處理函式
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
console.log('onLoad')
var that = this
//呼叫應用例項的方法獲取全域性資料
app.getUserInfo(function(userInfo){
//更新資料
that.setData({
userInfo:userInfo
})
})
}
})
資料繫結
通過載入的資料，獲取到了使用者的基本資訊userInfo。通過資料繫結來顯示微信的頭像和名字。
<view bindtap="bindViewTap" class="userinfo">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</view>4.新建多一頁面
編輯器裡面新增一個頁面，並且在app.json裡面配置多一頁面，把相應的頁面配置一下。
在pages裡面進行配置新增多一頁面。並在tabBar裡面新增一個選項指向我們剛建立的頁面。
{
"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/me/me"
],
"window":{
"navigationBarTitleText": "初心暖暖心意",
"navigationBarBackgroundColor": "#000",
"navigationBarTextStyle":"white"
},
"tabBar": {
"color": "#dddddd",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/index/index",
"iconPath": "image/icon_component.png",
"selectedIconPath": "image/icon_component_HL.png",
"text": "首頁"
}, {
"pagePath": "pages/logs/logs",
"iconPath": "image/icon_API.png",
"selectedIconPath": "image/icon_API_HL.png",
"text": "日誌"
},
{
"pagePath": "pages/me/me",
"iconPath": "image/icon_API.png",
"selectedIconPath": "image/icon_API_HL.png",
"text": "我的"
}]
},
"debug":true
}
在me.js裡面定義一個數據
//index.js
//獲取應用例項
var app = getApp()
Page({
data: {
name: 'weChat',
age:"qqq"
},
onLoad: function () {
}
})
介面如下，同時綁定了我們建立的欄位。
<view>
<text>我叫{{name}}微信</text>
</view>
初步的頁面也實現出來了。
5.不足的地方
用起來的時候，軟體啟動起來十分慢，其次是部分文件出現了錯誤（同事發現了標籤不對的地方）。
軟體除錯提示性一般對wxml支援不夠好，編寫起來會有點吃力。提示這塊存在薄弱的地方。
（1）建立檔案的時候，還需要填寫字尾名，這一點讓我不理解
（2）軟體經常切換除錯，如果能實時重新整理這個效果不錯。類似ReactNative那樣
（3）啟動畫面比較慢
（4）提示比較薄弱，對wxml提示比較差。對這種重度使用者而言，用起來不夠智慧。
（5）文件複製程式碼比較槽糕，選取的時候經常選取不到。加個複製按鈕如何？
（6）程式碼區域不能拖動，編譯的時候為何不在加一個按鈕在編輯區域裡？
6.app和小程式爭論焦點
憑藉小程式曝光，很多媒體過渡閱讀這個小程式可以消滅app這樣的說法。app的開發門檻相對小程式要高，對於遊戲而言，能不能進去還是未知之數。小程式限制了document和window物件，也不能操控dom，因此在製作上會有所限制。app的門檻高，這個其實h5和app爭執的觀點。在app上效能更加有所保障，對硬體底層支援更足。這也是小程式很難比較的。目前還沒有公測，對小程式可以發揮到什麼商業價值。這還有待觀察。
我們在微信可以看到滴滴打車也就是一個一類的小程式了。對於小程式可以消滅app這樣說法，筆者還是要持懷疑態度。