微信的小程式已經推出了,相繼的教程也有。官方網頁推出API和接口說明,目前來講暫時足夠。
可以進入該連結檢視。微信官網
今天嘗試一下下載下傳該web的開發工具,從目前來講,使用了一個下午。目前版本給人的感覺還有待繼續提升的恐懼。從編碼的體驗來講,對一個重度使用者來講并不算太好用。但足夠對付一個輕量級的程式。在調試的過程,由于經常切換顯得不是太舒服。
1.注意項目路徑
由于第一次初始的時候,下載下傳的demo,由于沒有注意app.json的放置的檔案夾位置,導緻了多了一層,導緻老是報一個錯誤。經同僚指點後,将檔案和項目檔案夾放置同一級處,這樣就可以順利調試到。由于appid申請不到,在公衆号那裡需要公測,是以隻能有限制使用。
一個下午經過調試了一下臨時搭建了一個沒有功能的界面。
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsISOwYDMyUDNyIDNykDM2EDMy8CX0Vmbu4GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.jpg)
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這樣說法,筆者還是要持懷疑态度。