南順網絡
一(yī)個菜鳥(老yin逼)教後端的(de)你如(rú)何"一(yī)天"做(zuò)好微信小程序
前言
萬事開頭難，小程序也不例外。慕課網那個小程序課程微信小程序入門與實戰 ，說實話，那時候剛出我就買了，然而我一(yī)個做(zuò)後端從提不起興趣靜下心看。自(zì)從微信公開課說可(kě)以真機調試，我煞費苦心亂琢磨做(zuò)，看文檔，畫葫蘆畫瓢，終于做(zuò)一(yī)個小程序并上傳而且審核成功了。那麽我是如(rú)何教大家一(yī)天做(zuò)好小程序呢(ne)？聽我一(yī)一(yī)道(dào)來。
首先，貼上我的(de)小程序嘛，以便做(zuò)裝逼憑證
小程序準備環境
開發工具，去(qù)官網下載開發工具這是必備的(de)！
既然是小程序，它其實是一(yī)個前端的(de)東西，我需要你會做(zuò)後端的(de)接口。
準備好後端接口，畢竟小程序也隻負責連接傳輸數據。
如(rú)果你要發布，你必須要弄https,現在https也很簡單，去(qù)阿裏雲的(de)CA證書免費搞一(yī)個
怎麽做(zuò)好微信小程序界面
對于所有初遇小程序的(de)小夥伴們，想做(zuò)好小程序的(de)第一(yī)步，那就是界面。對于任何後端來說(大部分)，對javascript，Html，CSS都大概了解，看得懂，會用一(yī)點，基本語法怎麽用都略知一(yī)二，但是要你做(zuò)一(yī)個完整的(de)前端完整的(de)頁面呢(ne)？從0開始寫？nonono，一(yī)個良好優秀的(de)我們，不會這麽做(zuò)，我們也不會。對于web應用來說，我們可(kě)以套用模闆，用框架，用layui,用拼圖CSS等等一(yī)點點就可(kě)以湊成一(yī)個還算可(kě)以的(de)網頁，甚至我們可(kě)以去(qù)copy别人頁面來做(zuò)自(zì)己頁面(不要臉啊哈哈哈哈)
沒錯！我就是要教你們這麽做(zuò)哇啊哈哈哈哈，真他媽爽。
一(yī)點點打代碼是不可(kě)能的(de)，這輩子(zǐ)都不可(kě)能一(yī)點點打代碼的(de)，隻有copy和(hé)借鑒才可(kě)以維持的(de)了生活這樣子(zǐ)。
首選，我們要去(qù)下載一(yī)個CSS庫(WXSS),然後導入我們的(de)樣式。
注意事項：
wxss就是web的(de)css
js還是js
web是html，小程序是wxml
*json後綴我也不知道(dào)，還不需要用。不過看官方示例好像是配置。我們一(yī)般不用就留{}放在那
微信有一(yī)個專門為(wèi)方便前端用的(de)框架來增加用戶對微信的(de)體驗度，相信大家都知道(dào)，就是weui------>weui的(de)Github，
我們最好在新建項目上用官方的(de)Demo進行修改和(hé)參考，可(kě)以省很多事。具體最好還要參考文檔。如(rú)果你跟我說文檔好難哦。拜托，這對于我們後端要看什麽Spring源碼Struts2源碼啥的(de)簡單多了！（表示都不會看隻會用）
weui的(de)使用和(hé)我們用CSS庫一(yī)樣，隻是我們要知道(dào)我們的(de)盒子(zǐ)容器div在小程序是view，給他賦予class就可(kě)以呈現出我們的(de)樣式了，比如(rú)來個九宮格：
<view class="weui-grids"><!--兄弟，複制出這個9個就是一(yī)個九宮格了，空格都給你打好了--> <view class="weui-grid" hover-class="weui-grid_active" bindtap="getImageTranlate" data-index="0" > <image class="weui-grid__icon" src="圖片路徑” /> <view class="weui-grid__label">身份證識别</view> </view><view>
更多使用可(kě)以在github查看官方案例，一(yī)點一(yī)點拼湊，很簡單的(de)。還有一(yī)點就是要引入庫，如(rú)何引入庫呢(ne)？
我們要去(qù)github下載我們需要的(de)CSS，會不會去(qù)找？我還是給你貼上吧(ba)大爺！
過來大爺，點進去(qù)把CSS樣式複制了
既然這個庫大家都要引用，然後要在根目錄讓大家方便引用咯。所以我們要在根目錄引用它。
<!--然後在你的(de)頁面的(de)CSS上放這個，當然這是相對路徑，要看你的(de)路徑了。語法就是這麽寫。-->@import '../../weiui.wxss';
這樣我們的(de)樣式基本東湊西湊就搞定了。
如(rú)何讓小程序動态起來
我們在web上的(de)話，就可(kě)以用javascript一(yī)樣用document.get什麽鬼的(de)就可(kě)以讓界面改變，然後連接後端，讓界面的(de)數據随着與後端數據的(de)傳輸改變。當然啦，小程序是不可(kě)以這樣子(zǐ)的(de)。因為(wèi)小程序沒有DOM節點，這不知道(dào)是優點還是缺點。當然，我們有另外一(yī)種方法。就是微信給我們提供的(de)setData。
這東西很煩人，我在網上查閱的(de)時候，好像看到這玩意一(yī)直在更新，更新了就不能用了，還要換種寫法才可(kě)以。抱着亂試亂改，終究還是寫出來了。可(kě)能不是很規範。之所以之前不學(xué)小程序也是因為(wèi)這個，一(yī)直在改不穩定。等穩定差不多再來學(xué)。
<!--在js文件上第一(yī)句給我寫這個，不要問我為(wèi)什麽，官方示例--><!--獲取應用實例-->var app = getApp()
Page({
data: {
},
});<!--在官方示例裏，你們肯定都會看到這個。不懂不要亂删示例裏面的(de)謝謝。--><!--這個就好像我們web端的(de)全局變量一(yī)樣，但是這是在客戶端的(de)全局變量，頁面的(de)數據可(kě)以綁定在這裏給頁面顯示，反之這裏數據一(yī)改變，頁面的(de)數據也就跟着改變。所以我們的(de)難點就是如(rú)何改動這個data。-->data裏面應該怎麽寫呢(ne)？我随便舉個例子(zǐ)，比如(rú)我要弄個對象就是
Page({
data: {
result: "我是楠尼瑪",
},});然後去(qù)wxml裏面寫{{result}} 頁面就有個我是楠尼瑪。你要問我為(wèi)什麽，畫葫蘆畫瓢不會啊！不過聽說微信的(de)語法是ES6什麽的(de)，雖然我不懂。
那我們怎麽去(qù)修改這個data裏面的(de)數據呢(ne)，要是裏面很多個數據要怎麽修改呢(ne)？
<!--在其他函數裏面我們要修改的(de)話應該這麽寫-->var that = this //必須
that.setData({
result: "這麽巧啊我也是"
})我記得沒錯的(de)話可(kě)以直接this.setData，但是必須要對象而且有時候要點兩次才反應。
至于上傳文件什麽呀，點擊事件呀，文檔寫的(de)實在太清楚了。我也不細說了。基本這功能去(qù)文檔複制改一(yī)改就可(kě)以用了。然後接上自(zì)己的(de)接口返回數據就行啦。
還有一(yī)些好心的(de)給源代碼的(de)，樣式基本跟web一(yī)樣可(kě)以扣過來直接用。隻要你看的(de)懂就行。而且好像有一(yī)些網頁可(kě)以在線制作然後下載下來就可(kě)以直接拿來當樣式了。
編輯:--ns868
