盆友圈最近真是被微信小程式這貨刷爆了,哪那都是它,作為一個喜歡嘗(作)鮮(死)的前端汪來說,我肯定不會輕易放棄這麼好的嘗試機會,嘛溜的,先搭好環境壓壓驚!

環境搭建

地球人都知道此次微信官方釋出小程式的內測版只給了200個測試名額,作為茫茫人海中的我,毫無懸念的沒有我的份,對此,小編我還是要給一個大大的表情!!!

儘管如此,小編我還是找到了工具,沒時間解釋太多,上車走人!這裡小編提供一份優化(你懂得)的工具,有興趣的可以上車試試喔! 微信開發者工具下載 領取密碼：4xr9

安裝就不說了,一路next就好,只是在!安裝完成之後,開啟工具,用微信掃一掃進行微信驗證後就可以看到如下介面啦!

點選新增專案,按照要求填寫APPID和專案名稱和儲存路徑,填寫好後,點選確定,開發工具就會自動生成專案基本的結構!

專案結構

檔案結構很簡單
- pages資料夾裡面放所有頁面的內容,在小程式的開發中,是將每個頁面的內容(包括佈局頁面.wxml,樣式檔案.wxss,配置檔案json檔案)單獨的放在統一的資料夾內!
- utils資料夾裡面存放通用的js檔案,J2ee的小夥伴應該對它很熟悉!
- app.js檔案,也是專案的入口檔案,在這裡小程式會開始他的生命週期!
- app.json檔案是配置專案的載入檔案和相關元件,專案在載入的時候首先會在這個檔案裡面查詢它所要載入的元件,因此,它至關重要!
- app.wxss

檔案,存放所有通用的樣式檔案!

小提醒:
1,想必你也已經看出來了,wxml其實就是我們熟的不能載熟的html檔案,wxss就是css檔案!
2,app.json檔案中的配置項中,不能寫註釋(沒搞清楚為什麼會這樣!)!
3,app.json中windows選項(也就是頁面的頭部資訊)配置好後,所有頁面都會顯示這個名稱,更改的方法是在需要更改頭部資訊的頁面新增.json檔案,重新命名navigationBarTitleText的值
4...

地圖定位例項

好了,說了這麼多口都幹了,還是不囉嗦了,直接上咱們的小demo吧!

配置app.json檔案所要載入的頁面

//app
 
.json
{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#10DDC2",
    "navigationBarTitleText": "Appjs全域性名稱",
    "navigationBarTextStyle":"white"
  }
}
需要注意的是:
* pages配置路徑的時候,不要寫註釋!
* "navigationBarTitleText": "Appjs全域性名稱",
  是定義的全域性名稱,區域性頁面更高的方法在上面我已經提到過了!
  (什麼?沒看見?諾!就是在具體要更改的介面增加json檔案,重定義navigationBarTitleText的值啦)!
* "navigationBarBackgroundColor": "#10DDC2",指頭部背景顏色,可自行更改!

配置好載入的頁面和基本的頭部資訊後,我們開啟pages/index/index.wxml檔案,來搭建介面的基本佈局!

<!--index.wxml-->
<view class="wrapper">
  <view class="page-body">
    <view class="page-body-wrapper">

      <form bindsubmit="openLocation">
        <view class="page-body-form">

            <text class="page-body-form-key">經度</text>
            <input class="page-body-form-value" type="text" value="{{location.longitude}}" name="longitude"></input>

            <text class="page-body-form-key">緯度</text>
            <input class="page-body-form-value" type="text"  value="{{location.latitude}}" name="latitude"></input>


            <text class="page-body-form-key">位置名稱</text>
            <input class="page-body-form-value" type="text"  value="總部基地二區" name="name"></input>


            <text class="page-body-form-key">詳細位置</text>
            <input class="page-body-form-value" type="text"  value="浙江大學濱海產業技術研究院" name="address"></input>

        </view>

        <view class="page-body-buttons">
          <button class="page-body-button" type="primary" bindtap="getLocation">獲取位置</button>
          <button class="page-body-button" type="primary" formType="submit">檢視位置</button>
        </view>

      </form>
    </view>
  </view>
</view>

然後再根據我們的需要,在index.wxss檔案裡面寫入基本的樣式

/**index.wxss**/
.wrapper{
  height: 100%;
  background:#fff;
}
.page-body-form-value{
  font-size: 14px;
  color:darkturquoise;
  font-weight: bold;
  padding-left: 15px;
  border: 1px solid rgb(72, 165, 131);
  border-radius: 4px;
  height: 30px;
  line-height: 30px;
}

.page-body-form-key{
  font-size:14px;
  padding: 10px;
  margin-top:15px;
  font-family: "Microsoft Yahei";
  font-weight: bold;
  height: 30px;
  line-height: 30px;
}

.page-body-button{
  margin-top:20px;
  line-height: 2;
}

介面搭建完成,在index.wxml介面中,經緯度的獲取我們採用雙向繫結的機制從js中動態奪取(是不是想到了angularjs和vuejs呢),這又涉及到小程式的載入機制的問題,我將在後面的文章具體闡述,現在我們先忽略這些,本次重在走一遍流程實現效果為主!

打了這麼久,還是先看看效果,點選左側的除錯按鈕,重新整理看到如下效果!

在index.wxml中,我們給表單中的經度和緯度輸入框雙向繫結經緯度的指,並給第一個按鈕綁定了獲取經緯度值的事件,當點選獲取位置的按鈕,就可以通過微信提供的介面獲取我們想要的值,同時,我們也可以自己輸入經緯度進行查詢位置.

因此,接下來我們寫獲取地理位置的方法,開啟index.js,輸入以下程式碼:

//index.js
//獲取應用例項
var app = getApp()
Page( {

  data: {
    //預設未獲取地址
    hasLocation: false
  },

  //獲取經緯度
  getLocation: function(e) {
    console.log(e)
    var that = this
    wx.getLocation( {
      success: function( res ) {
        console.log( res )
        that.setData( {
          hasLocation: true,
          location: {
            longitude: res.longitude,
            latitude: res.latitude
          }
        })
      }
    })
  },
//根據經緯度在地圖上顯示
  openLocation: function( e ) {
    var value = e.detail.value
    wx.openLocation( {
      longitude: Number( value.longitude ),
      latitude: Number( value.latitude )
    })
  }
})

在index.js中我首先定義了頁面載入的時候hasLocation:false,也就是預設不載入地理位置,當點選獲取地理位置的時候,通過getLocation方法獲取到當前的經緯度位置,並將他以物件的形式返回回去,這樣,在前端介面的input輸入框中,通過{{location.longitude}}和{{location.latitude}}就可以動態獲取到經緯度的值!

在除錯中,我們點選獲取地址按鈕,得到我們想要的結果

得到地理位置後,我們就可以將這些資料傳送給微信的開啟地圖的介面,以此來在地圖中展示位置資訊,給form表單繫結openLocation事件,這樣當點選檢視位置按鈕,就可以將地理位置資訊傳送給openLocation事件,通過這個介面在地圖中開啟位置!

自此,我們的demo也就完成啦!

總結

1.首先說明的事,本篇文章重在梳理以下開發的流程,從一個小demo中去理解小程式的實現過程,涉及到的資料繫結,載入機制等等都沒做深入討論!(來啊!互相傷害啊!)

2.在除錯頁面的時候,如果是更改了js或者json檔案,請點選左側的重啟來檢視效果!如果只更改了樣式和佈局,那麼直接F5重新整理就可看到效果!

3.配置app.json的時候,請保證所有要顯示的介面都配置上,並且之間不要留註釋!

4.也是剛剛得到的福利,送給大家: