毅耘資
返回列表
小程序開發入門與實踐
小程序開發入門與實踐2018-03-09毅耘科技761

小程序開發入門與實踐

  2018開啟小程序的大門,很多人開始對小程序展開深入的研究,特別是不懂技術的人,不明白小程序是如何開發的,下面毅耘科技簡單介紹下小程序開發入門與實踐,以供大家參考。

  MINA 框架

  為方便微信小程序開發,微信為小程序提供了 MINA 框架,這套框架集成了大量的原生組件以及 API。通過這套框架,我們可以方便快捷的完成相關的小程序開發工作。

  MINA 框架提供了自己的視圖層描述語言 WXML 和 WXSS,以及基于 JavaScript 的邏輯層框架,并在視圖層與邏輯層間提供了數據傳輸和事件系統,因此我們主要聚焦于數據與邏輯上。

  響應的數據綁定

  框架的核心是一個響應的數據綁定系統。

  整個系統分為兩塊:視圖層(View)和邏輯層(App Service),

  通過框架,可以讓數據與視圖保持同步變得很簡單。當我們修改數據的時候,只需要在邏輯層修改數據,視圖層就會做相應的更新。

  通過下面的例子來看:

  <!-- 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' }) }})

  以上通過框架將邏輯層數據中的 name 與視圖層的 name 進行了綁定,所以在頁面打開的時候會顯示 "Hello Baixing!",

  當點擊按鈕的時候,視圖層會發送 onChangeName 的事件給邏輯層,邏輯層找到對應的事件處理函數。邏輯層執行了 setData() 的操作,將 name 從 Baixing 變為 MINA,因為該數據和視圖層已經綁定了,從而視圖層會自動改變為 "Hello MINA!" 。

  頁面管理

  框架管理小程序的頁面路由,可以做到頁面間的無縫切換,并給以頁面完整的生命周期。開發者需要做的只是將頁面的數據、方法、生命周期函數注冊進框架中,其他的一切復雜的操作都交由框架處理。

  基礎組件

  框架提供了一套基礎的組件,這些組件自帶微信風格的樣式以及特殊的邏輯,我們通過組合基礎組件,就可以很方便的創建出強大的微信小程序。詳情參考微信小程序組件文檔。

  豐富的 API

  MINA 框架提供豐富的微信原生 API,可以方便地調起微信提供的能力,如獲取用戶信息,本地存儲,支付功能等。如果想了解更多,請參考微信小程序 API 文檔。

  小程序目錄結構

  小程序包含一個描述整體程序的 app 和多個描述各自頁面的 page。

  一個小程序主體部分由三個文件組成,必須放在項目的根目錄下:

  文件 作用

  app.js 小程序啟動入口文件

  app.json 小程序公共設置,如注冊路由信息

  app.wxss 小程序公共樣式表

  一個小程序頁面由四個文件組成,分別是:

  文件 作用

  js 頁面的具體邏輯功能,如頁面的分享等邏輯方法

  wxml 頁面的結構,MINA 框架提供的各種組件便用于此

  wxss 頁面樣式表,類似 Web 開發的 CSS 文件,用于控制頁面的具體顯示樣式

  json 頁面配置,用以配置 MINA 框架提供的特有功能,如下拉刷新是否啟用等配置信息

  注意:以上的四個文件必須具有相同的路徑和文件名。

小程序開發入門與實踐,毅耘科技

  小程序的運行機制

  注意小程序是沒有重啟的概念的,主要的運行機制如下:

  當小程序進入后臺,客戶端會維持一段時間的運行狀態,超過一定時間后 (溫馨官方文檔 5 分鐘) 會被微信主動銷毀。

  被置頂的小程序不會被微信主動銷毀。

  當收到系統內存警告也會進行小程序的銷毀。

  開發實踐

  講了很多原理性的東西,如果沒有實際實踐的話,也只是一紙空談。下面將以一個記賬小程序作為開發實踐,這個小程序用以記錄每日花費以及具體花費說明。

  在開始前,請下載小程序開發工具。

  創建項目

  這里因為沒有申請 AppID,所以選擇了無 AppID 開發模式。如果有要使用 AppID 進行開發,可通過微信小程序官網進行配置,這里就不細說,具體參考微信小程序官網文檔說明。

  在左側的編輯選項卡下,可以進行代碼的編輯工作。

  在調試選項卡下,可以進行調試工作,如斷點調試、查看當前存儲信息、模擬坐標等。 

  在項目選項卡下,可以配置當前的程序運行選項,如是切換基礎庫版本、生成小程序預覽等。

  創建頁面

  我們的程序主要有兩個頁面,一個是展示所有記賬記錄的首頁頁面,一個是添加記賬的頁面。在開發工具編輯選項卡下,點擊添加新建,輸入要創建的文件就可以了。完成后具體的目錄如下:

  在上面的(Pages)目錄中,每個不同的頁面目錄下存在 4 種不同的文件格式。在基礎知識部分,有講解過不同格式具體的作用,這里不再贅述。接下來就進入實際的編碼工作吧。

  編寫代碼

  1. 首頁的具體功能包括:

  統計花費總額

  展示每次記錄的概要信息

  頁面主要邏輯代碼如下:

 import { loadAllRecord, deleteRecordById} from '././services/tallyService.js'var app = getApp()Page({ data: { userInfo: {}, list: [], totalMoney: 0 }, …… // 加載已存的每日花費記錄,且統計總共花費的金額。 fetchData() { wx.showLoading({ title: '加載數據中……', }) 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) }) } ……})

  頁面結構代碼如下:

  <!--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">總花費:{{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>

  2. 記錄頁面主要功能:

  用于記錄具體的花費金額以及花費詳情

  頁面主要邏輯代碼如下:

  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({}) }) }})

  頁面結構代碼如下:

  <!--record.wxml--><view class="container record-view"> <view class="money-view"> 金額: <input placeholder=“請輸入要記錄的花費金額……” 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"> 花費記錄: <textarea class="detail-textarea" placeholder-style="font-size: 14px;" placeholder=“請輸入具體的花費詳細吧……” maxlength="160" cursor-spacing="10" bindinput="onDetailChanged"/> </view> <button class="save-button" catchtap="onSaveRecord" formType="submit" disabled="{{ !canSave }}"> 保存 </button></view>

  3. 記錄 Dao 類

  主要邏輯代碼如下:

  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}

  如果是通過填寫 AppID 進行開發,在開發工具的項目選項卡下,點擊預覽即可生成當前小程序二維碼。然后使用具有開發者或體驗者權限的微信帳號掃一掃二維碼,即可真機操作小程序。

  以上就是小程序開發入門的一些小知識,想要了解更多相關資訊歡迎訪問:http://www.sontosi.com/


本文標題:小程序開發入門與實踐

本文網址:http://www.sontosi.com/news_detail/id/1252.html

原創網址:小程序開發公司< 毅耘科技 >版權所有,轉載標明出去,并以鏈接形式鏈接網址http://www.sontosi.com/

文章標簽: 合肥小程序開發 合肥小程序

毅耘科技(www.sontosi.com)提供小程序開發,微信開發,商城小程序,小程序定制開發,新零售O2O模式,餐飲,社區,門店,教育,預約,微信小程序微信商城,解決方案,一站式全商業小程序平臺,是專業為企業提升價值的公司

相關文章

友情鏈接: 合肥網站優化  知識付費平臺  合肥網站建設  手機商城系統  合肥app開發 
安徽毅耘科技有限公司 版權所有 Copyright ? 2017 All Rights Reserved 法律聲明 皖ICP備17006053號    XML地圖/ 網站地圖
關閉 内页底部: 五十老熟妇乱子伦免费观看,A片无码免费视频在线观看,日本人成网站18禁止久久影院,国产毛1卡2卡3卡4卡免费观看
<蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>