微信小程序小結

 前幾日抽空看了下小程序，發現挺好玩的，mvvm的結構，語法比vue要簡單，內置了一系列的組件，很方便。然后開發者工具直接上傳代碼，提交審核，然后發布，感覺挺好。雖然不打算做個工具類的，但是做個介紹類小程序就很合適了。不用去做什么官網，也不用買服務器域名什么的，用郵箱注冊個號，把自己想介紹的東西方式去，手機上發給別人也挺方便。

01.語法結構

結構上很好理解，app.js可以直接獲取用戶的登錄信息，也可以什么都不做，關鍵還是app.json

{
  "pages":[
    "pages/index/index",
    "pages/about/about",
    "pages/location/location",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "書山有路",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首頁",
    "iconPath": "images/m.png",
    "selectedIconPath": "images/m1.png"
    },
    {
      "pagePath": "pages/location/location",
      "text": "位置",
      "iconPath": "images/w.png",
      "selectedIconPath": "images/w1.png"
    },{
      "pagePath": "pages/about/about",
      "text": "關注",
     "iconPath": "images/g.png",
    "selectedIconPath": "images/g1.png"
    }
    ]
  }
}

每一個頁面必須在pages中進行注冊，window是一些基本的外觀配置，tabBar就是用來設置一個頁底導航。基本上每個頁面都包含了.js，.wxml和.wxss文件，.js以

Page({})開始，設置數據和方法，很簡單。wxml也就是頁面文件，有很多微信自己定義的元素，比如view，text和image，可以分別對應div,span和img。wxss就和css一樣。

02.滑動

swiper挺方便的，有個問題就是不能自適應高度。

<swiper indicator-dots="true"
  autoplay="true" interval="{{interval}}" duration="{{duration}}"  style='height:{{Hei}}' >
  <block wx:for="{{imgUrls}}">
    <swiper-item >
      <image src="{{item}}" mode="widthFix"  bindload="imgH"   class="slide-image" />
    </swiper-item>
  </block>
</swiper>

找了個網友的辦法，親測有效

  imgH: function (e) {
    var winWid = wx.getSystemInfoSync().windowWidth;         //獲取當前屏幕的寬度
    var imgh = e.detail.height;　　　　　　　　　　　　　　　　//圖片高度
    var imgw = e.detail.width;
    var swiperH = winWid * imgh / imgw + "px"　　　　　　　　　　//等比設置swiper的高度。  即 屏幕寬度 / swiper高度 = 圖片寬度 / 圖片高度    ==》swiper高度 = 屏幕寬度 * 圖片高度 / 圖片寬度
    this.setData({
      Hei: swiperH　　　　　　　　//設置高度
    })
  },

不要忘了在data里面設置Hei屬性。

03.地圖

地圖官方文檔說的很詳細，我也沒必要說了，主要是用百度找經緯度：拾取坐標系統，很方面。

04.獲取用戶信息

在默認的app.js里面已經提供了

// 獲取用戶信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已經授權，可以直接調用 getUserInfo 獲取頭像昵稱，不會彈框
          wx.getUserInfo({
            success: res => {
              // 可以將 res 發送給后台解碼出 unionId
              this.globalData.userInfo = res.userInfo
              console.log(res.userInfo)

              // 由於 getUserInfo 是網絡請求，可能會在 Page.onLoad 之后才返回
              // 所以此處加入 callback 以防止這種情況
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null
  }

如果我們要在別的頁面用userInfo

var app = getApp();//
Page({
data:{
 userInfo:{}
}
//....
 onLoad() {
    this.setData({ userInfo: app.globalData.userInfo })
  }
})

對data對象復制都需要使用setData。這樣你就可以在頁面顯示用戶的頭像和名稱。

05.長按掃碼 

這個功能其實有點雞肋，因為只能掃小程序的二維碼，如果用戶都已經進了這個頁面，掃碼還有個什么意義，因為小程序肯定已經下載了。關鍵用戶還是想掃微信二維碼或者公眾號的二維碼。微信確實管的比較嚴。

  previewImage: function (e) {
        wx.previewImage({
      current: 'http://images.cnblogs.com/xxxxx', // 當前顯示圖片的http鏈接     
      urls: ['http://images.cnblogs.com/xxxx'] // 需要預覽的圖片http鏈接列表     
    })

  },

<image class='img' bindtap="previewImage"  src='images/actv.jpg' />

這里的current和urls必須是http鏈接，沒法用相對路徑。於是最簡單的，我就把圖片傳到了博客園的圖冊里面... 這樣用戶點擊圖片就能出現保存，發送給朋友，收藏。只有小程序二維碼才會出現掃碼識別.... 

06.圖標

我們需要一些圖標，個人畢竟不想去找美工。發現阿里的這個還不錯：http://www.iconfont.cn/

當然還有https://www.easyicon.net/，不過這家有時候不穩定。

小結：以上只是些簡單功能的小程序開發，整體感覺不錯，開發速度很快，只是這個流量和轉化有點難，但確實方便。而且這名稱就相當於是pc時代的域名了，如果用戶有了搜一搜小程序的習慣，想在微信上看你們家東西，如果沒有搜到是不是有點遺憾。早點占個名字也行。