一個菜鳥(老yin逼)教後端的你如何"一天"作好微信小程序

前言

萬事開頭難，小程序也不例外。慕課網那個小程序課程微信小程序入門與實戰 ，說實話，那時候剛出我就買了，然而我一個作後端從提不起興趣靜下心看。自從微信公開課說能夠真機調試，我煞費苦心亂琢磨作，看文檔，畫葫蘆畫瓢，終於作一個小程序並上傳並且審覈成功了。那麼我是如何教你們一天作好小程序呢？聽我一一道來。

---

首先，貼上個人小程序嘛，以便作裝逼憑證

---

小程序準備環境

1. 開發工具，去官網下載開發工具這是必備的！
2. 既然是小程序，它實際上是一個前端的東西，我須要你會作後端的接口。
3. 準備好後端接口，畢竟小程序也只負責鏈接傳輸數據。
4. 若是你要發佈，你必需要弄https,如今https也很簡單，去阿里雲的CA證書免費搞一個

---

怎麼作好微信小程序界面

對於全部初遇小程序的小夥伴們，想作好小程序的第一步，那就是界面。對於任何後端來講(大部分)，對javascript，Html，CSS都大概瞭解，看得懂，會用一點，基本語法怎麼用都略知一二，可是要你作一個完整的前端完整的頁面呢？從0開始寫？nonono，一個良好優秀的咱們，不會這麼作，咱們也不會。對於web應用來講，咱們能夠套用模板，用框架，用layui,用拼圖CSS等等一點點就能夠湊成一個還算能夠的網頁，甚至咱們能夠去copy別人頁面來作本身頁面(不要臉啊哈哈哈哈)

沒錯！我就是要教大家這麼作哇啊哈哈哈哈，真他媽爽。
一點點打代碼是不可能的，這輩子都不可能一點點打代碼的，只有copy和借鑑才能夠維持的了生活這樣子。

首選，咱們要去下載一個CSS庫(WXSS),而後導入咱們的樣式。

注意事項：
wxss就是web的css
js仍是js
web是html，小程序是wxml
*json後綴我也不知道，還不須要用。不過看官方示例好像是配置。咱們通常不用就留{}放在那

微信有一個專門爲方便前端用的框架來增長用戶對微信的體驗度，相信你們都知道，就是weui------>weui的Github，
咱們最好在新建項目上用官方的Demo進行修改和參考，能夠省不少事。具體最好還要參考文檔。若是你跟我說文檔好難哦。拜託，這對於咱們後端要看什麼Spring源碼Struts2源碼啥的簡單多了！（表示都不會看只會用）

weui的使用和咱們用CSS庫同樣，只是咱們要知道咱們的盒子容器div在小程序是view，給他賦予class就能夠呈現出咱們的樣式了，好比來個九宮格：

<view class="weui-grids">



<!--兄弟，複製出這個9個就是一個九宮格了，空格都給你打好了-->
    <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>

更多使用能夠在github查看官方案例，一點一點拼湊，很簡單的。還有一點就是要引入庫，如何引入庫呢？
咱們要去github下載咱們須要的CSS，會不會去找？我仍是給你貼上吧大爺！
過來大爺，點進去把CSS樣式複製了
既然這個庫你們都要引用，而後要在根目錄讓你們方便引用咯。因此咱們要在根目錄引用它。

<!--而後在你的頁面的CSS上放這個，固然這是相對路徑，要看你的路徑了。語法就是這麼寫。-->
@import '../../weiui.wxss';

這樣咱們的樣式基本東湊西湊就搞定了。

---

如何讓小程序動態起來

咱們在web上的話，就能夠用javascript同樣用document.get什麼鬼的就可讓界面改變，而後鏈接後端，讓界面的數據隨着與後端數據的傳輸改變。固然啦，小程序是不能夠這樣子的。由於小程序沒有DOM節點，這不知道是優勢仍是缺點。固然，咱們有另一種方法。就是微信給咱們提供的setData。
這東西很煩人，我在網上查閱的時候，好像看到這玩意一直在更新，更新了就不能用了，還要換種寫法才能夠。抱着亂試亂改，終究仍是寫出來了。可能不是很規範。之因此以前不學小程序也是由於這個，一直在改不穩定。等穩定差很少再來學。

<!--在js文件上第一句給我寫這個，不要問我爲何，官方示例-->
<!--獲取應用實例-->
var app = getApp()
Page({
  data: {
    
  },
});
<!--在官方示例裏，大家確定都會看到這個。不懂不要亂刪示例裏面的謝謝。-->
<!--這個就好像咱們web端的全局變量同樣，可是這是在客戶端的全局變量，頁面的數據能夠綁定在這裏給頁面顯示，反之這裏數據一改變，頁面的數據也就跟着改變。因此咱們的難點就是如何改動這個data。-->

data裏面應該怎麼寫呢？我隨便舉個例子，好比我要弄個對象就是

Page({
  data: {
        result: "我是楠尼瑪",
  },
});

而後去wxml裏面寫{{result}} 頁面就有個我是楠尼瑪。你要問我爲何，畫葫蘆畫瓢不會啊！不過據說微信的語法是ES6什麼的，雖然我不懂。

那咱們怎麼去修改這個data裏面的數據呢，要是裏面不少個數據要怎麼修改呢？

<!--在其餘函數裏面咱們要修改的話應該這麼寫-->
var that = this    //必須
 that.setData({
        result: "這麼巧啊我也是"
      })

我記得沒錯的話能夠直接this.setData，可是必需要對象並且有時候要點兩次才反應。

至於上傳文件什麼呀，點擊事件呀，文檔寫的實在太清楚了。我也不細說了。基本這功能去文檔複製改一改就能夠用了。而後接上本身的接口返回數據就行啦。

還有一些好心的給源代碼的，樣式基本跟web同樣能夠扣過來直接用。只要你看的懂就行。並且好像有一些網頁能夠在線製做而後下載下來就能夠直接拿來當樣式了。