小程序應(yīng)用開發(fā)的示例分析

這篇文章給大家分享的是有關(guān)小程序應(yīng)用開發(fā)的示例分析的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

便捷開發(fā)

最近在弄自己的小程序，所以整一篇文章總結(jié)一下。如果你已經(jīng)開發(fā)過小程序，這篇文章可以不用看了。

小程序開發(fā)相當?shù)谋憬?，配合官方文檔，微信小程序文檔、支付寶小程序文檔，即可在本地運行起來，如果只是單純的展示，那只需要開發(fā)完之后上傳，等待審核了。只需要一點前端基礎(chǔ)，就可開發(fā)一個自己的小程序，有想法的同學可以行動起來。

如果在開發(fā)中出現(xiàn)問題，也可以在小程序社區(qū)求助，微信小程序社區(qū)。

不是在給官方推廣。如果你希望開發(fā)屬于自己的應(yīng)用，小程序是一個可以快速入手的方案，便捷開發(fā)，快速發(fā)布，自帶傳播功能。下面我選中微信小程序講解。

微信原生小程序開發(fā)

<!-- 項目目錄結(jié)構(gòu) -->

|—— component               組件目錄
|—— pages                   page頁面目錄
|   ......more dir           
|   |—— index               index頁面
|   |  |—— index.js         index.js- js邏輯文件     
|   |  |—— index.json       index.json- json配置文件
|   |  |—— index.wxml       index.wxml- wxml頁面結(jié)構(gòu)
|   |  |—— index.wxss       index.wxss- wxss頁面樣式
|—— app.js                  全局js文件
|—— app.json                全局json配置文件
|—— app.wxss                全局樣式文件
|—— project.config.json     項目配置
|—— sitemap.json            爬蟲文件

將項目導(dǎo)入到小程序開發(fā)工具中，就可以開始開發(fā)了。添加頁面，直接在pages目錄添加新的文件目錄。具體細節(jié)參考微信小程序文檔

語法支持：

• 目前最新版本庫已經(jīng) 支持Es6 / Es7，async/await 和 Promise；

• 開發(fā)工具會將代碼轉(zhuǎn)換成Es5 語法，保證各種機型的樣式適配；

• 部分語法類似于vue和react；

組件支持：

• 提供 template 模板支持, 微信小程序 template模版；

• Component自定義組件支持，組件內(nèi)部存在生命周期, Component自定義組件；

API支持：

• 可以調(diào)用封裝過的系統(tǒng)原生方法，比如藍牙、網(wǎng)絡(luò)信息、掃碼等API方法；

• 常規(guī)的方法如：Storage、Reqeuest、Animation、Canvas等，更多可以查看微信小程序 API；

除小程序原生開發(fā)外，當然也可以使用框架了，我個人覺得 Taro框架不錯，支持多端小程序開發(fā)

Taro開發(fā)

Taro開發(fā)文檔，Taro 支持多端開發(fā)，包括微信/百度/支付寶/頭條小程序、H5、React-Native，目前我只使用開發(fā)過微信小程序和支付寶小程序、H5，其他的還沒有嘗試過。

|—— config                              開發(fā)配置文件
|—— dist                                目標文件目錄
|—— src                                 開發(fā)目錄
|   |—— actions                         redux action文件
|   |—— constants                       常量文件
|   |—— pages                           page頁面目錄
        ......more dir
|   |   |—— index
|   |   |   |—— index.scss
|   |   |   |—— index.txs
|   |—— reducers                        redux reducers文件
|   |—— store                           redux store文件
|   |—— app.scss                        app全局樣式
|   |—— app.tsx                         app全局js
|   |—— index.html                      html文件
|—— .editorconfig                       editor配置文件         
|—— .eslintrc                           eslint配置文件
|—— global.d.ts                         global配置
|—— tsconfig.json                       ts配置文件
|—— package.json
|—— project.config.json
|—— readme.md

語法支持：

• ts 語法支持；

• React語法規(guī)范；

• 支持使用 CSS 預(yù)編譯器；

• Es6/Es7 語法支持，如果需要更新的語法，可以在配置config配置；

組件支持：

• react組件式開發(fā)，不過最后還是會編譯成原生小程序；

npm包：

• 支持使用 npm/yarn 管理；

• 可以使用 Redux 進行狀態(tài)管理；

API：

• 對小程序API、H5 API進行一次封裝，更加方便；

react + ts + npm包，基本就是前端開發(fā)正常節(jié)奏。不論你開發(fā)的那個小程序，只需要運行對應(yīng)的命令，同時，將dist目錄文件導(dǎo)入到開發(fā)工具中，即可看見效果。

taro和原生小程序

原生小程序：上手快，對于接觸過前端開發(fā)的同學，可以馬上上手，基本不存在技術(shù)壁壘。面向微信小程序文檔編程。

Taro開發(fā)：react語法規(guī)范，react組件開發(fā)，ts語法支持，支持redux。對于react有偏好的同學，強烈推薦。如果你喜歡react，建議使用Taro開發(fā)。(易于團隊協(xié)作)。

小程序開發(fā)問題

微信小程序 不可以使用cookie

微信小程序 非HTTPS的域名不被支持

微信小程序 分享API是同步操作，同時回調(diào)成功失敗被無法監(jiān)聽

微信小程序 wx.setStorageSync和wx.getStorageSync的API會頻繁報錯

微信小程序 setData數(shù)據(jù)的1M限制，通過數(shù)據(jù)數(shù)據(jù)拆分可以解決

微信小程序 主包的限制2M，導(dǎo)致無法引入過多的外部文件（使用Taro會依賴npm包）

微信小程序 微信開發(fā)工具占用CPU過高，導(dǎo)致電腦卡頓

當然問題肯定不止這些，還有微信小程序原生組件、API、官方插件等問題，這里不一一細講了，對于想做自己小程序的同學，這些基本夠用。

不過可能會有人問，框架不是還沒有講嘛？其實使用Tora開發(fā)小程序，你只是在使用不同的語法，在編寫小程序，最后，命令工具都會將文件轉(zhuǎn)換成原生小程序的文件格式。

個人應(yīng)用

不論你使用哪一種方式，開發(fā)你的個人應(yīng)用，最后都會回歸到產(chǎn)品本身上。通過技術(shù)完成自己心目中的個人應(yīng)用，將應(yīng)用提供給用戶，這個才是終極目標。（技術(shù)只是手段，產(chǎn)品才是目標）不過我個人使用Taro開發(fā)，算是嘗嘗鮮。

感謝各位的閱讀！關(guān)于“小程序應(yīng)用開發(fā)的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！