微信:小程式學習筆記(1)
微信的小程式已經推出了,相繼的教程也有。官方網頁推出API和介面說明,目前來講暫時足夠。
可以進入該連結檢視。微信官網
今天嘗試一下下載該web的開發工具,從目前來講,使用了一個下午。目前版本給人的感覺還有待繼續提升的恐懼。從編碼的體驗來講,對一個重度使用者來講並不算太好用。但足夠對付一個輕量級的程式。在除錯的過程,由於經常切換顯得不是太舒服。
1.注意專案路徑
由於第一次初始的時候,下載的demo,由於沒有注意app.json的放置的資料夾位置,導致了多了一層,導致老是報一個錯誤。經同事指點後,將檔案和專案資料夾放置同一級處,這樣就可以順利除錯到。由於appid申請不到,在公眾號那裡需要公測,因此只能有限制使用。
一個下午經過除錯了一下臨時搭建了一個沒有功能的介面。
2.使用元件
微信這裡提供了很多元件,這個和之前的微信樣式有點類似。通過元件的組合可以拼接一些介面使用。這個有點像css那樣,據官方說wxss檔案和css有點相似,區別和限制。
配置一個Tabbar,一個Tabbar最多是5個,相應的欄位需要對其進行配置,提供了圖片,點選的關聯的頁面。選擇的圖示狀態。
官方的程式碼如下:
"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": "我的"
}]
使用檢視,圖片,文字,按鈕
<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這樣說法,筆者還是要持懷疑態度。