資訊專欄INFORMATION COLUMN
摘要：天氣預報小程序說了很多小程序開發(fā)的基礎準備，下面就結合個人實際練手項目天氣預報小程序簡單說明。物料準備從需求結果導向，天氣程序首先要能獲取到當前所在地天氣狀況，再次可以自由選擇某地，知道其天氣狀況。
前言
學習了一段時間小程序，大致過了兩遍開發(fā)文檔，抽空做個自己的天氣預報小程序，全當是練手，在這記錄下。小程序開發(fā)的安裝、注冊和接入等流程就不羅列了，在小程序接入指南已經(jīng)寫得很清楚了，以下只對開發(fā)過程常用到得一些概念進行簡單梳理，類比 Vue 加強記憶，最后選取個人項目天氣小程序中要注意的幾點來說明。
歡迎掃碼體驗
源碼請戳這里，歡迎start~
初始化項目目錄結構安裝好開發(fā)者工具，填好申請到的AppID，選好項目目錄，初始化一個普通小程序目錄結構，得到：
--|-- pages
|-- index
|-- index.js // 首頁js文件
|-- index.json // 首頁json文件
|-- index.wxml // 首頁wxml文件
|-- index.wxss // 首頁wxss文件
|-- logs
|-- logs.js // 日志頁js文件
|-- logs.json // 日志頁json文件
|-- logs.wxml // 日志頁wxml文件
|-- logs.wxss // 日志頁wxss文件
|-- utils
|-- util.js // 小程序公用方法
|-- app.js // 小程序邏輯
|-- app.json // 小程序公共配置
|-- app.wxss // 小程序公共樣式表
|-- project.config.json // 小程序項目配置
可以看到，項目文件主要分為.json、.wxml，.wxss和.js類型，每一個頁面由四個文件組成，為了方便開發(fā)者減少配置，描述頁面的四個文件必須具有相同的路徑與文件名。
JSON配置 小程序配置 app.jsonapp.json配置是當前小程序的全局配置，包括小程序的所有頁面路徑、界面表現(xiàn)、網(wǎng)絡超時時間、底部 tab 等。
工具配置 project.config.json工具配置在小程序的根目錄，對工具做的任何配置都會寫入這個文件，使得只要載入同一個項目代碼包，開發(fā)則工具會自動恢復當時你開發(fā)項目時的個性設置。
頁面配置 page.json頁面配置 是小程序頁面相關的配置，讓開發(fā)者可以獨立定義每個頁面的一些屬性，比如頂部顏色，是否下拉等。
WXML 模板WXML 充當類似 HTML 的角色，有標簽，有屬性，但是還是有些區(qū)別：
標簽名不一樣。 ，等，而小程序中標簽更像是封裝好的組件，比如 提供 wx:if，{{}}等模板語法。 下面針對小程序的數(shù)據(jù)綁定、列表渲染、條件渲染、模板、事件和應用跟 Vue 類比加深記憶。 WXML 中的動態(tài)數(shù)據(jù)均來自對應 Page（或 Component） 的 data，而在 Vue中來自當前組件。 小程序和Vue的數(shù)據(jù)綁定都使用 Mustache 語法，雙括號將變量包起來。區(qū)別是 Vue 中使用Mustache 語法不能作用在 HTML 特性上 而小程序作用在標簽屬性上 Vue 中使用 v-for 指令根據(jù)一組數(shù)組的選項列表，也可以通過一個對象的屬性迭代進行渲染，使用 (item, index) in items 或 (item, index) of items 形式特殊語法。 渲染包含多個元素，利用 元素 而在小程序中使用 wx:for 控制屬性綁定一個數(shù)組（其實對象也可以），默認數(shù)組的當前項的下標變量為 index ，當前項變量為 item。 也可以用 wx:for-item 指定數(shù)組當前元素的變量名，用 wx:for-index 指定數(shù)組當前下標的變量名。 渲染一個包含多節(jié)點的結構塊，利用 Vue 中使用v-if、v-else-if、v-else指令條件渲染，多個元素使用包裹，而小程序中使用wx:if、wx:elseif、wx:else來條件渲染，多個組件標簽使用 在 Vue 中定義模板一種方式是在
使用模板： 而在小程序中，在 中使用 name 屬性作為模板名稱，使用 is 屬性聲明需要使用的模板，然后將模板所需的 data 傳入。 定義模板： 使用模板： 在 Vue 中，用 v-on 指令監(jiān)聽 DOM 事件，并在觸發(fā)時運行一些 JavaScript 代碼，對于阻止事件冒泡、事件捕獲分別提供事件修飾符.stop和.capture的形式 而在小程序中，綁定事件以 key，value 的形式，key 以 bind 或 catch 開頭，然后跟上事件的類型，如 bindtap、catchtouchstart，也可緊跟一個冒號形式，如 bind:tap、catch:touchstart。bind 事件綁定不會阻止冒泡事件向上冒泡，catch 事件綁定可以阻止冒泡事件向上冒泡。 采用 capture-bind、capture-catch 分別捕獲事件和中斷捕獲并取消冒泡。 在 Vue 中引用用于組件的服用引入 在小程序中，WXML 提供兩種引用方式 import 和 include。 在 item.wxml 中定義了一個叫item的template： 在 index.wxml 中引用了 item.wxml，就可以使用item模板： include 可以將目標文件除了 WXSS(WeiXin Style Sheets) 具有 CSS 大部分的特性，也做了一些擴充和修改。 支持新的尺寸單位 rpx，根據(jù)屏幕寬度自適應，規(guī)定屏幕寬為750rpx，免去開發(fā)換算的煩惱（采用浮點計算，和預期結果會有點偏差）。 iPhone6上，換算相對最簡單，1rpx = 0.5px = 1物理像素，建議設計師以 iPhone6 為設計稿。 使用 @import 語句導入外聯(lián)樣式表，注意路徑為相對路徑。 app.wxss中的樣式為全局樣式，在 Page （或 Component） 的 wxss文件中定義的樣式為局部樣式，自作用在對應頁面，并會覆蓋 app.wxss 中相同選擇器。 小程序是以 Page(Object) 構造頁面獨立環(huán)境，app加載后，初始化某個頁面，類似于 Vue 的實例化過程，有自己的初始數(shù)據(jù)、生命周期和事件處理回調(diào)函數(shù)。 和 Vue 一樣，在構造實例屬性上都有一個 data 對象，作為初始數(shù)據(jù)。 Vue 中修改 data 中某個屬性值直接賦值即可，而在小程序中需要使用 Page 的實例方法 setData(Object data, Function callback) 才起作用，不需要在 this.data 中預先定義，單次設置數(shù)據(jù)大小不得超過1024kb。 支持以數(shù)據(jù)路徑的形式改變數(shù)組某項或對象某項屬性： 每個 Vue 實例在被創(chuàng)建時都要經(jīng)過一系列的初始化過程，每一個階段都有相應鉤子函數(shù)被調(diào)用，created mounted updated destroyed。 對于小程序生命周期，分為 Page 的生命周期和 Component 的生命周期。 Page 的生命周期回調(diào)函數(shù)有：
onLoad 生命周期回調(diào)-監(jiān)聽頁面加載
onShow 生命周期回調(diào)-監(jiān)聽頁面顯示
onReady 生命周期回調(diào)-監(jiān)聽頁面初次渲染完成
onHide 生命周期回調(diào)-監(jiān)聽頁面隱藏
onUnload 生命周期回調(diào)-監(jiān)聽頁面卸載
onPullDownRefresh監(jiān)聽用戶下拉動作
onReachBotton 頁面上拉觸底事件的處理函數(shù)
onShareAppMessage 用戶點擊右上角轉發(fā)
onPageScroll 頁面滾動觸發(fā)事件的處理函數(shù)
onTabItemTap 當前是 tab 頁時，點擊 tab 觸發(fā) Component 的生命周期有：
created 在組件實例剛剛被創(chuàng)建時執(zhí)行
attached 在組件實例進入頁面節(jié)點樹時執(zhí)行
ready 在組件在視圖層布局完成后執(zhí)行
moved 在組件實例被移動到節(jié)點樹另一個位置時執(zhí)行
detached 在組件實例被從頁面節(jié)點樹移除時執(zhí)行
error 每當組件方法拋出錯誤時執(zhí)行
show 組件所在的頁面被展示時執(zhí)行
hide 組件所在的頁面被隱藏時執(zhí)行
resize 組件所在的頁面尺寸變化時執(zhí)行 WXS（WeiXin Script）是小程序的一套腳本語言，結合 WXML，可以構建出頁面的結構。wxs 的運行環(huán)境和其他 JavaScript 代碼是隔離的，wxs 中不能調(diào)用其他 JavaScript 文件中定義的函數(shù)，也不能調(diào)用小程序提供的API。從語法上看，大部分和 JavaScript是一樣的，以下列出一些注意點和差別：
標簽中，只能使用定義該 的 WXML 文件中定義的
Date對象，需要使用 getDate 函數(shù)，返回一個當前時間的對象；
RegExp對象，使用 getRegExp 函數(shù)； 使用 constructor 屬性判斷數(shù)據(jù)類型。 小程序組件間通信和Vue 組件間通信很相似 在 Vue 中，父組件定義一些自定義特性，子組件通過 props 實例屬性獲取，也可通過 wm.$refs 可以獲取子組件獲取子組件所有屬性和方法。 同樣的，在小程序中，父組件定義一些特性，子組件通過 properties 實例屬性獲取，不同的是，提供了 observer 回調(diào)函數(shù)，可以監(jiān)聽傳遞值的變化。父組件還可以通過 this.selectComponent 方法獲取子組件實例對象，這樣就可以直接訪問組件的任意數(shù)據(jù)和方法。 在Vue 中通過自定義事件系統(tǒng)觸發(fā) vm.$emit( eventName, […args] ) 回調(diào)傳參實現(xiàn)。 同樣的，在小程序中也是通過觸發(fā)自定義事件 triggerEvent 回調(diào)傳參形式實現(xiàn)子組件向父組件傳遞數(shù)據(jù)。 說了很多小程序開發(fā)的基礎準備，下面就結合個人實際練手項目——天氣預報小程序簡單說明。 從需求結果導向，天氣程序首先要能獲取到當前所在地天氣狀況，再次可以自由選擇某地，知道其天氣狀況。這樣就需要有獲取天氣的API和搜索地址API。 搜集了很多免費天氣API，最終選中和風天氣，原因很簡單，它提供認證個人開發(fā)者申請，擁有更多使用功能和調(diào)用次數(shù)。 地址搜索和城市選擇能力選用微信自家產(chǎn)品騰訊位置服務微信小程序JavaScript SDK。 開發(fā)前物料（服務能力）準備好了，接下來就是擼小程序了！ 微信小程序的樣式已支持大部分 CSS 特性，不用再去考慮太多傳統(tǒng)瀏覽器兼容性問題了，布局方便直接選用 flex 布局。 首頁首次加載獲取用戶，通常會彈窗提示是否允許獲取用戶信息，用戶點擊允許獲取授權，才能成功獲取用戶信息，展示用戶名和用戶頭像等，小程序為了優(yōu)化用戶體驗，使用 wx.getUserInfo 接口直接彈出授權框的開發(fā)方式將逐步不再支持。目前開發(fā)環(huán)境不彈窗了，正式版暫不受影響。提倡使用 button 組件，指定 open-type 為 getUserInfo類型，用戶主動點擊后才彈窗。 要滿足當前的這個場景需求，首先要為城市列表的拼音首字母標題添加標志（id），當 滿足這個需求場景，可以利用 頻繁 setData 造成性能問題，在這里過濾重復賦值； 由于設置了 頻繁輸入，或者頻繁滾動，回調(diào)觸發(fā)會造成性能問題，而其接口也有限定調(diào)用頻率，這樣就需要做節(jié)流處理。節(jié)流是再頻繁觸發(fā)的情況下，在大于一定時間間隔才允許觸發(fā)。 具體對一些場景，比如騰訊位置服務提供的關鍵字搜索地址，就限定5次/key/秒，很容易就超了，可以做節(jié)流處理 對于上面城市列表滾動，獲取標志元素位置也應用節(jié)流處理。 小程序的基本入門學習門檻不高，小程序的設計應該借鑒了很多現(xiàn)在流行的框架，如果有 React 或 Vue 的基礎會有很多似曾相識的感覺，當然，在深入的探索過程還有很多“坑”要跨越，本文只是簡單的梳理，具體問題還能多看文檔和小程序社區(qū)，還有什么錯誤歡迎指正哈，完~ 文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。 轉載請注明本文地址：http://systransis.cn/yun/100070.html
寫 HTML 常用標簽 ，
小程序將渲染和邏輯分離，類似于React，Vue的MVVM開發(fā)模式，而不是讓 JS 操作 DOM。{{msg}}
列表渲染
條件渲染
Vue.component("hello-world", {
template: "#hello-world-template",
data () {
return {
msg: "this is a template"
}
}
})
Page({
data: {
item: {
msg: "this is a template"
}
}
})
事件
...
引用
import ComponentA from "./ComponentA"
import ComponentC from "./ComponentC"
WXSS 樣式
設備
rpx換算px（屏寬/750）
px換算rpx（750/屏寬）
iPhone5
1rpx = 0.42px
1px = 2.34rpx
iPhone6
1rpx = 0.5px
1px = 2rpx
iPhone6 Plus
1rpx = 0.552px
1px = 1.81rpx
// 對于對象或數(shù)組字段，可以直接修改一個其下的子字段，這樣做通常比修改整個對象或數(shù)組更好
this.setData({
"array[0].text": "changed data"
})
生命周期回調(diào)函數(shù)
{{ postTitle }}
export default {
props: ["postTitle"]
}Component({
properties: {
myProperty: { // 屬性名
type: String, // 類型（必填），目前接受的類型包括：String, Number, Boolean, Object, Array, null（表示任意類型）
value: "", // 屬性初始值（可選），如果未指定則會根據(jù)類型選擇一個
observer(newVal, oldVal, changedPath) {
// 屬性被改變時執(zhí)行的函數(shù)（可選），也可以寫成在methods段中定義的方法名字符串, 如："_propertyChange"
// 通常 newVal 就是新設置的數(shù)據(jù)， oldVal 是舊數(shù)據(jù)
}
},
myProperty2: String // 簡化的定義方式
}
})
子組件傳值到父組件
// my-component.js
Component({
methods: {
onTap () {
this.triggerEvent("customevent", {})
}
}
})
天氣預報小程序
比如：/**app.wxss**/
page {
background: #f6f6f6;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
獲取用戶信息
天氣小程序獲取用戶頭像和用戶名采用的是另一種方式，使用open-data 可以直接獲取用戶基礎信息，不用彈窗提示。
城市拼音首字母錨點
上下滑動城市列表，當滑過當前可視區(qū)的城市拼音首字母，右側字母索引欄對應的字母也會切換到高亮顯示。
Page({
// ...
// 城市列表滾動
scroll () {
wx.createSelectorQuery().selectAll(".city-list-title")
.boundingClientRect((rects) => {
let index = rects.findIndex((item) => {
return item.top >= 0
})
if (index === -1) {
index = rects.length
}
this.setIndex(index - 1)
}).exec()
},
// ...
點擊右側字母索引欄的字母，城市列表自動滑動使得對應字母標題可視
// 點擊索引條
tapIndexItem (event) {
let id = event.currentTarget.dataset.item
this.setData({
scrollIntoViewId: `title_${id === "#" ? 0 : id}`
})
// 延時設置索引條焦點
setTimeout(() => {
this.setData({
barIndex: this.data.indexList.findIndex((item) => item === id)
})
}, 500)
},
頻繁觸發(fā)節(jié)流處理
// 節(jié)流
const throttle = function(fn, delay) {
let lastTime = 0
return function () {
let nowTime = Date.now()
if (nowTime - lastTime > delay || !lastTime) {
fn.apply(this, arguments)
lastTime = nowTime
}
}
}
Page({
// ...
// 輸入搜索關鍵字
input: util.throttle(function () {
let val = arguments[0].detail.value
if (val === "") {
this.setData({
suggList: []
})
this.changeSearchCls()
return false
}
api.getSuggestion({
keyword: val
})
.then((res) => {
this.setData({
suggList: res
})
this.changeSearchCls()
})
.catch((err) => {
console.error(err)
})
}, 500),
// ...
})
摘要：課程內(nèi)容以打造一款擁有天氣預報和簽到功能的小程序為主線，從基礎知識到小程序運行機制，從開發(fā)環(huán)境搭建到小程序云開發(fā)的接口使用調(diào)試上線，打通微信小程序開發(fā)全流程。 9 月 11 日，微信開發(fā)者工具新增小程序「云開發(fā)」功能。 showImg(https://segmentfault.com/img/bVbjQLW?w=1000&h=544); 大多數(shù)開發(fā)者在開發(fā)應用時和部署服務時，無論是選擇...
摘要：微信應用號小程序資源匯總。每天不定期整理和收集微信小程序相關資源，方便查閱和學習，歡迎大家提交新的資源，完善和補充。 wechat-weapp-resource 微信應用號（小程序）資源匯總。 每天不定期整理和收集微信小程序相關資源，方便查閱和學習，歡迎大家提交新的資源，完善和補充。 showImg(https://segmentfault.com/img/remote/1460000...
摘要：微信應用號小程序資源匯總。每天不定期整理和收集微信小程序相關資源，方便查閱和學習，歡迎大家提交新的資源，完善和補充。 wechat-weapp-resource 微信應用號（小程序）資源匯總。 每天不定期整理和收集微信小程序相關資源，方便查閱和學習，歡迎大家提交新的資源，完善和補充。 showImg(https://segmentfault.com/img/remote/1460000...
摘要：潤物無聲，做一個有個格調(diào)的小程序快應用現(xiàn)在可謂是家喻戶曉，也更加密切的滲透入我們的生活中，筆者也算是個愛折騰的人，俗話說的好嘛，不折騰，不前端當然是筆者自己的小心聲。于是在平日里忙碌的工作之余抽出來時間搞點事情來寫一個屬于自己的貼身小天氣。 ———— 潤物無聲，做一個有個格調(diào)的coder小程序、快應用現(xiàn)在可謂是家喻戶曉，也更加密切的滲透入我們的生活中，筆者也算是個愛折騰的人，俗話說的好...
閱讀 2689·2021-11-16 11:53
閱讀 2757·2021-07-26 23:38
閱讀 2085·2019-08-30 15:55
閱讀 1766·2019-08-30 13:21
閱讀 3692·2019-08-29 17:26
閱讀 3319·2019-08-29 13:20
閱讀 887·2019-08-29 12:20
閱讀 3212·2019-08-26 10:21
