国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

剖析簡易計算器帶你入門微信小程序開發(fā)

RichardXG / 1028人閱讀

摘要：源碼分析這個簡易計算器界面布局依然延續(xù)祖制，采用布局，貌似微信官方也是這么推薦的官方文檔中就是使用。本計算器存在不完善和，因為重點不是實現(xiàn)全部功能，而是搞清楚微信小程序開發(fā)方法，所以非關(guān)注點不用在意。

寫在前面，但是重點在后面

這是教程，也不是教程。

可以先看Demo的操作動圖，看看是個什么玩意兒，GitHub地址（https://github.com/dunizb/wxapp-sCalc）

自從微信小程序內(nèi)測以來，我的網(wǎng)絡(luò)信息幾乎被它刷屏，一瞬間，都不知道發(fā)生了什么。特別是當(dāng)晚有人熬夜吐血出教程，我勒個去，這么拼，感覺不立馬學(xué)習(xí)等會兒就會被別人踩死在這個行業(yè)。惶恐惶恐的過來幾天，等到了國慶終于也可以跟風(fēng)熬夜研究了。

好吧，來吧，所以說菜鳥只會寫計算器。。。。嗯，是的，我想不出什么好創(chuàng)意。下面介紹一下這個簡易計算器，以及開發(fā)過程中踩的一些坑吧。

首先，什么Web開發(fā)者工具之類的、文檔之類的，網(wǎng)上多的是，我就不重復(fù)了，已經(jīng)不需要什么破解了，微信官方已經(jīng)修改驗證機(jī)制，沒有APPID也能玩了，只不過部分功能受限。

其次，微信小程序開發(fā)其實不難，在沒掌握之前我也是不明覺厲，看似高大上。其實他相對我們傳統(tǒng)的寫法更簡單，高度封裝了，按照他們的規(guī)則和規(guī)范來，寫起來體驗還是很不錯的。

但因為沒有權(quán)限，目前的微信小程序都是在開發(fā)者工具的模擬器中運行的，不知道在微信上真實情況如何。

xxx.wxml文件和xxx.wxss文件

wxml是微信自己開發(fā)的一套標(biāo)記語言，你可以直接看做是HTML文件也沒問題，因為我們的界面構(gòu)建都是在這個文件里編寫，只是沒有HTML標(biāo)簽了，只有wxml標(biāo)簽了，而wxml標(biāo)簽數(shù)量也是很少的。

wxss是微信自己開發(fā)的一套樣式文件格式，等同于我們的CSS文件，寫法也是一樣的，只是換了個文件后綴，以前我們怎么寫CSS的在微信小程序中我們依然怎么寫。

wxml加上wxss我們就可以構(gòu)建出我們想要的界面UI了。

xxx.js和xxx.json文件

xxx.js文件就是寫JS的地方，每個xxx.js對應(yīng)一個同名的xxx.wxml文件，xxx.js文件必須有Page對象，哪怕該頁面沒有任何業(yè)務(wù)邏輯。輸入Page微信Web開發(fā)者工具會自動生成一些列空方法待你實現(xiàn)，當(dāng)然你可以不實現(xiàn)，只是把你把骨架搭好而已。

xxx.josn文件就是配置文件，一般是全局配置才用，比如根目錄的app.josn，定義了小程序由哪些頁面構(gòu)成，小程序?qū)Ш紹ar樣式等，屬性看名字就知道什么意思了。

pages屬性配置的是頁面，第一個就是啟動頁，所有頁面都必須在這里配置，如果你建了一個頁面忘記在這里添加了，那么你會很郁悶的，應(yīng)為到時候頁面跳轉(zhuǎn)的時候onLoad方法不會執(zhí)行，我就被這個浪費好多時間抓耳饒腮好奇不斷。

整體結(jié)構(gòu)

看看下面的項目結(jié)構(gòu)圖，一個頁面是一個文件夾，一個面通常都有js、wxml、wxss，wxml和js文件是必須的，可以有沒有樣式。

calc（計算器頁面）、history（歷史記錄）、index（小程序首頁、啟動頁）、logs（日志信息）、utils（js工具類）,logs和utils是自帶的，可以有可以沒有。

源碼分析

這個簡易計算器界面布局依然延續(xù)祖制，采用CSS Flexbox布局，貌似微信官方也是這么推薦的（官方文檔中就是使用Flexbox）。

計算器的按鍵，都是用標(biāo)簽來做的，加上wxss樣式即可，當(dāng)然也可以直接用button組件。

wxml:


    9
    8
    7
    －

這里bindtap，看名字就知道是用來綁定事件的，跟我們在HTML中使用onclick一個道理。id={{id9}} 雙大括號中的值來自js文件中data屬性定義的同名屬性

wxss:

.btnGroup {
    display: flex;
    flex-direction: row;
    flex: 1;
    width: 100%;
    background-color: #fff;
}
.item {
    width:25%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin-top: 1px;
    margin-right: 1px;
}
.item:active {
    background-color: #ff0000;
}

css就沒什么好說的了，唯一需要注意的是微信提供了一個尺寸單位rpx，responsive pixel ，可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)，官網(wǎng)文檔有詳細(xì)解析。我在計算器的history頁面也有使用：

主要涉及組件

view、text，大部分頁面都是它倆哥們。

按鈕（button），index頁面的按鈕“簡易計算器”

圖標(biāo)（icon）,計算機(jī)的歷史記錄安靜使用的就是icon自帶的圖標(biāo)之一。

標(biāo)記方式調(diào)整頁面（navigator）

圖片（Image），首頁頭像

for循環(huán)，歷史記錄顯示頁面用到了，得從Storage中讀取數(shù)據(jù)展示，而Storage中保存就是一個數(shù)組


    {{log}}
主要涉及API

wx.navigateTo，導(dǎo)航，跳轉(zhuǎn)，在當(dāng)前頁面打開新頁面

Storage，本地存儲，保存計算歷史記錄用到了它
有setStorage、getStorage，同時還有帶Sync結(jié)尾的異步方法

注意事項

每新建一個頁面一定要記得去app.josn的pages屬性中添加，不然的話使用navigateTo跳轉(zhuǎn)到新頁面后新頁面的onLoad方法不會執(zhí)行。

微信小程序中沒有window等JavaScript對象，所以在寫JS前想好替代方案，比如本計算器就被坑大了，本來使用eval函數(shù)可以方便的計算表達(dá)式，結(jié)果沒法用，繞了好大的彎。

微信小程序中的JS并不是真正的JS，wxss也并不是真正的CSS，所以寫的時候還是要注意一下。

本計算器存在不完善和bug，因為重點不是實現(xiàn)全部功能，而是搞清楚微信小程序開發(fā)方法，所以非關(guān)注點不用在意。

微信小程序總體來說不難，官方的文檔也寫的非常好，認(rèn)真閱讀官方文檔就好。

最后，歡迎小伙伴star或fork【微信小程序版簡易計算器】進(jìn)行參考和學(xué)習(xí)，由于本人水平有限，程序中或博客中如有不對或錯誤之處請留言指出，謝謝！

另外，我的github還有【微信小程序-豆瓣電影】項目，歡迎學(xué)習(xí)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/50118.html

相關(guān)文章

  • 剖析簡易計算器帶你入門微信小程序開發(fā)

    摘要：源碼分析這個簡易計算器界面布局依然延續(xù)祖制，采用布局，貌似微信官方也是這么推薦的官方文檔中就是使用。本計算器存在不完善和，因為重點不是實現(xiàn)全部功能，而是搞清楚微信小程序開發(fā)方法，所以非關(guān)注點不用在意。 寫在前面，但是重點在后面 這是教程，也不是教程。 可以先看Demo的操作動圖，看看是個什么玩意兒，GitHub地址（https://github.com/dunizb/wxapp-sCa...

    AaronYuan 評論0 收藏0

  • 剖析簡易計算器帶你入門微信小程序開發(fā)

    摘要：源碼分析這個簡易計算器界面布局依然延續(xù)祖制，采用布局，貌似微信官方也是這么推薦的官方文檔中就是使用。本計算器存在不完善和，因為重點不是實現(xiàn)全部功能，而是搞清楚微信小程序開發(fā)方法，所以非關(guān)注點不用在意。 寫在前面，但是重點在后面 這是教程，也不是教程。 可以先看Demo的操作動圖，看看是個什么玩意兒，GitHub地址（https://github.com/dunizb/wxapp-sCa...

    Hanks10100 評論0 收藏0

  • 前端資源系列（3）-微信小程序開發(fā)資源匯總

    摘要：微信小程序應(yīng)用號開發(fā)資源匯總文檔工具教程代碼插件組件文檔從搭建一個微信小程序開始小程序開發(fā)文檔小程序設(shè)計指南工具小程序開發(fā)者工具官方支持微信小程序?qū)崟r預(yù)覽的支持的微信小程序組件化開發(fā)框架轉(zhuǎn)在線工具小程序云端增強社區(qū)微信小程序 微信(小程序or應(yīng)用號)開發(fā)資源匯總-文檔-工具-教程-代碼-插件-組件 文檔 從搭建一個微信小程序開始 小程序開發(fā)文檔 小程序設(shè)計指南 工具 小程序開發(fā)者...

    paney129 評論0 收藏0

  • 微信應(yīng)用號（小程序）資源匯總（1010更新）

    摘要：微信應(yīng)用號小程序資源匯總。每天不定期整理和收集微信小程序相關(guān)資源，方便查閱和學(xué)習(xí)，歡迎大家提交新的資源，完善和補充。 wechat-weapp-resource 微信應(yīng)用號（小程序）資源匯總。 每天不定期整理和收集微信小程序相關(guān)資源，方便查閱和學(xué)習(xí)，歡迎大家提交新的資源，完善和補充。 showImg(https://segmentfault.com/img/remote/1460000...

    趙春朋 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<