微信小程序小結

 前幾日抽空看了下小程序，發現挺好玩的，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時代的域名了，若是用戶有了搜一搜小程序的習慣，想在微信上看大家家東西，若是沒有搜到是否是有點遺憾。早點佔個名字也行。