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