★ 背景

【提示】：正在補充更新中…

• 首先，附上一張效果圖.
  

• 之前就有關注過小程式的發展，感覺可以抽一點的時間來學習一下，通過官方文件以及提供的示例 Demo，發現興趣挺高，不失為一個可以擴充套件自身技能的試煉場

• 此處僅做簡單的使用介紹，幾乎無需涉及艱深的程式碼技術問題，旨在備忘自己的使用步驟 …

（一）. 前期準備

• ②. 申請開發賬號 》》》【 申請帳號】

注意：作為登入帳號，請填寫未被微信公眾平臺註冊，未被微信開放平臺註冊，未被個人微訊號繫結的郵箱

進行微信小程式的開發，需要使用官方提供的開發工具進行程式碼的開發和上傳

• ④. 開發工具的使用 》》》【
  開發工具的使用】

根據官方文件，快速熟悉開發者工具的使用

（二）. 開發筆記

①. 實現的功能

1. 微信獲取當前所處地的經緯度
2. 根據經緯度，訪問 api.seniverse.com 所提供的天氣狀況介面，獲取 JSON 資料
3. 頁面初始化載入或者通過點選按鈕ajax載入資料，完成頁面展示效果的更新

②. 熟悉框架程式碼

• 本身來講，小程式所提供的初始原始碼是極為簡潔的，在此就不多說了，可以參考官方文件加強了解即可，主要操作的程式碼如下圖所示：

③. 配置伺服器域名

• 騰訊要求微信小程式使用到的域名都需要在公眾平臺中進行設定（可以說是一種備案）

  1. request 合法域名基本上一定要填寫，因為只要小程式需要伺服器，基本上就需要這個設定。
  2. socket 合法域名一般是小程式功能涉及即時通訊時需要
  3. uploadFile 合法域名和 downloadFile 合法域名分別是小程式功能涉及上傳檔案和下載檔案時需要
  4. 也就是說第一項基本是必填，後面三項根據功能選填

• 以我的程式碼需求，則需要進行如下的配置（通過這次的操作，以後也要記住這一重點）
  

④. HTTP請求

• 因為我只設計了一個頁面，簡便起見在頁面初始化時即進行了三個http請求，/pages/index/index.js 核心程式碼參考如下：

onReady:function
 
(){
  //初始化載入資料
    var self = this
    //獲取定位資訊 經緯度
    wx.getLocation({
      success: function (res) {
        //初始化【北京】經緯度  location=39.93:116.40（格式是 緯度:經度，英文冒號分隔） 
        var newLocation = '39.93:116.40'; 
        if(res){newLocation = res.latitude + ":" + res.longitude}
        self.setData({
          newLocation: newLocation
        })

      //初始化獲取 當前的天氣狀況
        wx.request({
          url: 'https://api.seniverse.com/v3/weather/now.json?key=fdw9qkun1btvenxt&location=' + newLocation+'&language=zh-Hans&unit=c',
          success: function (result) {
            self.setData({
              nowInfo: result.data.results[0]
            })
          },
          fail: function ({ errMsg }) {
            console.log('request fail', errMsg)
          }
        }),
          //初始化獲取今天的生活指數資訊
          wx.request({
          url: 'https://api.seniverse.com/v3/life/suggestion.json?key=fdw9qkun1btvenxt&location=' + newLocation + '&language=zh-Hans',
            success: function (result) {
              self.setData({
                lifeInfo: result.data.results[0].suggestion
              })
            },
            fail: function ({ errMsg }) {
              console.log('request fail', errMsg)
            }
          }),
          //初始化話獲取最近三天的天氣狀況
          wx.request({
          url: 'https://api.seniverse.com/v3/weather/daily.json?key=fdw9qkun1btvenxt&location=' + newLocation + '&language=zh-Hans&unit=c&start=0&days=5',
            success: function (result) {
              self.setData({
                //weatherInfo: result.data.results[0]
                weatherInfo: formatDate(result.data.results[0])
              })
            },
          })
      }
    })
  },

⑤. 程式碼編譯上傳

• 因為微信小程式上傳總量的限制，儘量不要等到最後一次性上傳，通過微信掃描“預覽”所展示的二維碼，即可在真機測試自己的小程式效果

最後附一張，開發者工具所展示的效果圖：

★ 附錄

①. 提示：

• 使用介面：【心知天氣】（在此我只使用了三個免費介面，可自行註冊）

②. 問題收集

♠. 頁面佈局提示

• 小程式要求元件擁有了一些特有的屬性值，需要格外注意，以便準確順利的進行頁面佈局

♥. wx:key 警告

• 主要的提示資訊為：

Now you can provide attr "wx:key" for a "wx:for" to improve performance.

• 官方解釋如下：
  

顯然wx：key的出現都與wx：for繫結，可以參看文件：【列表渲染-小程式】
此處對於我的專案，最簡單的解決方案：在wx:for後面新增wx:key="key" 可消除警告

♦. 域名配置問題

• 報錯資訊如下：

... 不在以下 request 合法域名列表中，請參考文件 ...

• 類似報錯情況如下：
  

提示：可以參考前面介紹的 【(二)-③】中的解決方案.

③. 關於微信支付的一點思考

• 根據官方Demo中對此功能的註釋如下：
  

④. 參考推薦

⑤. 原始碼參考

• 歡迎指摘