您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“微信小程序開(kāi)發(fā)基本知識(shí)有哪些”的有關(guān)知識(shí),在實(shí)際案例的操作過(guò)程中,不少人都會(huì)遇到這樣的困境,接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
為方便微信小程序開(kāi)發(fā),微信為小程序提供了 MINA 框架,這套框架集成了大量的原生組件以及 API。通過(guò)這套框架,我們可以方便快捷的完成相關(guān)的小程序開(kāi)發(fā)工作。
MINA 框架提供了自己的視圖層描述語(yǔ)言 WXML 和 WXSS,以及基于 JavaScript 的邏輯層框架,并在視圖層與邏輯層間提供了數(shù)據(jù)傳輸和事件系統(tǒng),因此我們主要聚焦于數(shù)據(jù)與邏輯上。
框架的核心是一個(gè)響應(yīng)的數(shù)據(jù)綁定系統(tǒng)。
整個(gè)系統(tǒng)分為兩塊:視圖層(View)和邏輯層(App Service),
通過(guò)框架,可以讓數(shù)據(jù)與視圖保持同步變得很簡(jiǎn)單。當(dāng)我們修改數(shù)據(jù)的時(shí)候,只需要在邏輯層修改數(shù)據(jù),視圖層就會(huì)做相應(yīng)的更新。
通過(guò)下面的例子來(lái)看:
<!-- This is our View --> <view> Hello {{name}}! </view> <button bindtap="onChangeName"> Click me! </button>
// This is our App Service. // Register a Page. Page({ data: 'Baixing', onChangeName: function(e) { // sent data change to view this.setData({ name: 'MINA' }) } })
以上通過(guò)框架將邏輯層數(shù)據(jù)中的 name 與視圖層的 name 進(jìn)行了綁定,所以在頁(yè)面打開(kāi)的時(shí)候會(huì)顯示 "Hello Baixing!",
當(dāng)點(diǎn)擊按鈕的時(shí)候,視圖層會(huì)發(fā)送 onChangeName 的事件給邏輯層,邏輯層找到對(duì)應(yīng)的事件處理函數(shù)。邏輯層執(zhí)行了 setData() 的操作,將 name 從 Baixing 變?yōu)?MINA,因?yàn)樵摂?shù)據(jù)和視圖層已經(jīng)綁定了,從而視圖層會(huì)自動(dòng)改變?yōu)?"Hello MINA!" 。
框架管理小程序的頁(yè)面路由,可以做到頁(yè)面間的無(wú)縫切換,并給以頁(yè)面完整的生命周期。開(kāi)發(fā)者需要做的只是將頁(yè)面的數(shù)據(jù)、方法、生命周期函數(shù)注冊(cè)進(jìn)框架中,其他的一切復(fù)雜的操作都交由框架處理。
框架提供了一套基礎(chǔ)的組件,這些組件自帶微信風(fēng)格的樣式以及特殊的邏輯,我們通過(guò)組合基礎(chǔ)組件,就可以很方便的創(chuàng)建出強(qiáng)大的微信小程序。詳情參考微信小程序組件文檔。
MINA 框架提供豐富的微信原生 API,可以方便地調(diào)起微信提供的能力,如獲取用戶信息,本地存儲(chǔ),支付功能等。
小程序包含一個(gè)描述整體程序的 app 和多個(gè)描述各自頁(yè)面的 page。
一個(gè)小程序主體部分由三個(gè)文件組成,必須放在項(xiàng)目的根目錄下:
文件 | 作用 |
---|---|
app.js | 小程序啟動(dòng)入口文件 |
app.json | 小程序公共設(shè)置,如注冊(cè)路由信息 |
app.wxss | 小程序公共樣式表 |
一個(gè)小程序頁(yè)面由四個(gè)文件組成,分別是:
文件 | 作用 |
---|---|
js | 頁(yè)面的具體邏輯功能,如頁(yè)面的分享等邏輯方法 |
wxml | 頁(yè)面的結(jié)構(gòu),MINA 框架提供的各種組件便用于此 |
wxss | 頁(yè)面樣式表,類似 Web 開(kāi)發(fā)的 CSS 文件,用于控制頁(yè)面的具體顯示樣式 |
json | 頁(yè)面配置,用以配置 MINA 框架提供的特有功能,如下拉刷新是否啟用等配置信息 |
注意:以上的四個(gè)文件必須具有相同的路徑和文件名。
注意小程序是沒(méi)有重啟的概念的,主要的運(yùn)行機(jī)制如下:
當(dāng)小程序進(jìn)入后臺(tái),客戶端會(huì)維持一段時(shí)間的運(yùn)行狀態(tài),超過(guò)一定時(shí)間后 (溫馨官方文檔 5 分鐘) 會(huì)被微信主動(dòng)銷毀。
被置頂?shù)男〕绦虿粫?huì)被微信主動(dòng)銷毀。
當(dāng)收到系統(tǒng)內(nèi)存警告也會(huì)進(jìn)行小程序的銷毀。
講了很多原理性的東西,如果沒(méi)有實(shí)際實(shí)踐的話,也只是一紙空談。下面將以一個(gè)記賬小程序作為開(kāi)發(fā)實(shí)踐,這個(gè)小程序用以記錄每日花費(fèi)以及具體花費(fèi)說(shuō)明。
在開(kāi)始前,請(qǐng)下載小程序開(kāi)發(fā)工具。
這里因?yàn)闆](méi)有申請(qǐng) AppID,所以選擇了無(wú) AppID 開(kāi)發(fā)模式。如果有要使用 AppID 進(jìn)行開(kāi)發(fā),可通過(guò)微信小程序官網(wǎng)進(jìn)行配置,這里就不細(xì)說(shuō),具體參考微信小程序官網(wǎng)文檔說(shuō)明。
我們填寫(xiě)好項(xiàng)目名稱,選擇項(xiàng)目目錄后,點(diǎn)擊添加項(xiàng)目,就進(jìn)入所創(chuàng)建項(xiàng)目的開(kāi)發(fā)界面,如下:
在左側(cè)的編輯選項(xiàng)卡下,可以進(jìn)行代碼的編輯工作。
在調(diào)試選項(xiàng)卡下,可以進(jìn)行調(diào)試工作,如斷點(diǎn)調(diào)試、查看當(dāng)前存儲(chǔ)信息、模擬坐標(biāo)等。
在項(xiàng)目選項(xiàng)卡下,可以配置當(dāng)前的程序運(yùn)行選項(xiàng),如是切換基礎(chǔ)庫(kù)版本、生成小程序預(yù)覽等。
我們的程序主要有兩個(gè)頁(yè)面,一個(gè)是展示所有記賬記錄的首頁(yè)頁(yè)面,一個(gè)是添加記賬的頁(yè)面。在開(kāi)發(fā)工具編輯選項(xiàng)卡下,點(diǎn)擊添加新建,輸入要?jiǎng)?chuàng)建的文件就可以了。
在上面的(Pages)目錄中,每個(gè)不同的頁(yè)面目錄下存在 4 種不同的文件格式。在基礎(chǔ)知識(shí)部分,有講解過(guò)不同格式具體的作用,這里不再贅述。接下來(lái)就進(jìn)入實(shí)際的編碼工作吧。
統(tǒng)計(jì)花費(fèi)總額
展示每次記錄的概要信息
頁(yè)面主要邏輯代碼如下:
import { loadAllRecord, deleteRecordById } from '../../services/tallyService.js' var app = getApp() Page({ data: { userInfo: {}, list: [], totalMoney: 0 }, ... // 加載已存的每日花費(fèi)記錄,且統(tǒng)計(jì)總共花費(fèi)的金額。 fetchData() { wx.showLoading({ title: '加載數(shù)據(jù)中...', }) var self = this loadAllRecords((list) => { var totalMoney = 0 list.forEach((item) => { totalMoney += Number(item.money) }) self.setData({list, totalMoney}) self.customerData.isFirstShow = false setTimeout(() => { wx.hideLoading() }, 1000) }) } ... })
頁(yè)面結(jié)構(gòu)代碼如下:
<!--index.wxml--> <view class="container"> <view bindtap="bindViewTap" class="userinfo"><image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image><view class="info-view"> <text class="userinfo-nickname">{{userInfo.nickName}}</text> <text class="money-text">總花費(fèi):{{totalMoney}}元</text></view> </view> <view class="list-view"><block wx:for="{{list}}" wx:key="*this"> <view class="tally-cell"><text class="detail-text">{{item.detail}}</text><text class="money-text">{{item.money}}元</text><text class="time-text">{{item.time}}</text> </view></block> </view> <navigator class="add-button" url="../record/record" open-type="navigate">記一筆</navigator> </view>
用于記錄具體的花費(fèi)金額以及花費(fèi)詳情
頁(yè)面主要邏輯代碼如下:
import {addNewRecord} from '../../services/tallyService.js' var app = getApp() Page({ ... onSaveRecord() { let record = { money: this.customerData.money, detail: this.customerData.detail } addNewRecord(record, (res)=>{ console.log(res) wx.navigateBack({}) }) } })
頁(yè)面結(jié)構(gòu)代碼如下:
<!--record.wxml--> <view class="container record-view"> <view class="money-view">金額: <input placeholder="請(qǐng)輸入要記錄的花費(fèi)金額..." bindblur="onMoneyBlured" maxlength="10" placeholder-style="font-size: 14px;" confirm-type="done" type="digit" auto-focus value="{{money}}" bindinput="onMoneyChanged"/> </view> <view class="detail-view">花費(fèi)記錄: <textarea class="detail-textarea" placeholder-style="font-size: 14px;" placeholder="請(qǐng)輸入具體的花費(fèi)詳細(xì)吧..." maxlength="160" cursor-spacing="10" bindinput="onDetailChanged"/> </view> <button class="save-button" catchtap="onSaveRecord" formType="submit" disabled="{{ !canSave }}">保存 </button> </view>
主要邏輯代碼如下:
var records = [] import {formatTime} from '../utils/util.js' function addNewRecord({money, detail}, callback) { let id = records.length let time = formatTime(new Date()) let record = {id, money, detail, time} records.push(record) if (typeof callback === 'function') { callback(true) } } function loadAllRecord(callback) { if (typeof callback === 'function') { callback(records) } } module.exports = { addNewRecord, loadAllRecord }
“微信小程序開(kāi)發(fā)基本知識(shí)有哪些”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。