天天看點

微信:小程式學習筆記(1)

微信的小程式已經推出了,相繼的教程也有。官方網頁推出API和接口說明,目前來講暫時足夠。

可以進入該連結檢視。微信官網

今天嘗試一下下載下傳該web的開發工具,從目前來講,使用了一個下午。目前版本給人的感覺還有待繼續提升的恐懼。從編碼的體驗來講,對一個重度使用者來講并不算太好用。但足夠對付一個輕量級的程式。在調試的過程,由于經常切換顯得不是太舒服。

1.注意項目路徑

由于第一次初始的時候,下載下傳的demo,由于沒有注意app.json的放置的檔案夾位置,導緻了多了一層,導緻老是報一個錯誤。經同僚指點後,将檔案和項目檔案夾放置同一級處,這樣就可以順利調試到。由于appid申請不到,在公衆号那裡需要公測,是以隻能有限制使用。

一個下午經過調試了一下臨時搭建了一個沒有功能的界面。

微信:小程式學習筆記(1)

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

微信:小程式學習筆記(1)

切換頁面的時候,可以在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.建立多一頁面

微信:小程式學習筆記(1)

編輯器裡面新增一個頁面,并且在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>
           
微信:小程式學習筆記(1)

初步的頁面也實作出來了。

5.不足的地方

用起來的時候,軟體啟動起來十分慢,其次是部分文檔出現了錯誤(同僚發現了标簽不對的地方)。

軟體調試提示性一般對wxml支援不夠好,編寫起來會有點吃力。提示這塊存在薄弱的地方。

(1)建立檔案的時候,還需要填寫字尾名,這一點讓我不了解

(2)軟體經常切換調試,如果能實時重新整理這個效果不錯。類似ReactNative那樣

(3)啟動畫面比較慢

(4)提示比較薄弱,對wxml提示比較差。對這種重度使用者而言,用起來不夠智能。

(5)文檔複制代碼比較槽糕,選取的時候經常選取不到。加個複制按鈕如何?

(6)代碼區域不能拖動,編譯的時候為何不在加一個按鈕在編輯區域裡?

微信:小程式學習筆記(1)

6.app和小程式争論焦點

憑借小程式曝光,很多媒體過渡閱讀這個小程式可以消滅app這樣的說法。app的開發門檻相對小程式要高,對于遊戲而言,能不能進去還是未知之數。小程式限制了document和window對象,也不能操控dom,是以在制作上會有所限制。app的門檻高,這個其實h5和app争執的觀點。在app上性能更加有所保障,對硬體底層支援更足。這也是小程式很難比較的。目前還沒有公測,對小程式可以發揮到什麼商業價值。這還有待觀察。

我們在微信可以看到滴滴打車也就是一個一類的小程式了。對于小程式可以消滅app這樣說法,筆者還是要持懷疑态度。