從零開始學微信小程序開發–記錄
疫情嚴重，被困在家，利用時間學習微信小程序的開發。經過查看各個demo例子選擇了個稅計數器這個比較簡單的業務來開發實踐。
學習步驟
一、準備工作：
下載微信開發者工具。使用測試號創建一個項目。
下載colorUI格式庫開發，下載weiUI,
github地址：https://github.com/weilanwl/ColorUI/
github地址：https://github.com/Tencent/weui
二、小程序基本情況瞭解
下面列出小程序開發必須需要知道的內容，大概知道這些就差不多了。學過vue的理解會更快。
項目結構：
- pages 主要是存放各個頁面的，每個文件夾中包含四個文件，js主要放你的數據常量/變量，json主要存放引入的組件，wxml就是頁面代碼，相當於html，wxss就是格式文件
- 在項目根目錄下也存在相同的js、json、wxss文件，功能都是一樣的，只不過是全局的。而index文件夾下的就是index頁面的內容，相當於scoped = index。
- sitemap.json設置微信搜索範圍
其他的比如導航欄在app.json中設置啊，背景顏色啊什麼的，看看文檔大概知道就行，真正需要的時候採取針對學習。
三、開始開發–我們以首頁爲例子
因爲我們使用colorUI，我們需要把下載的zip包中的demo中的colorUI複製到我們項目的根目錄中。然後app.wxss中加上：引入colorui相關格式。另外我們還需要引入weiui相關格式：新建文件夾style,放入weiui.wxss文件.
/**app.wxss**/
@import 'style/weiui.wxss'; // 關鍵引入代碼
@import "colorui/main.wxss"; // 關鍵引入代碼
@import "colorui/icon.wxss"; // 關鍵引入代碼
page{
background-color: #EDEDED;
font-size: 14px;
font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
height: 100%
}
.page__hd {
padding: 40px;
}
.page__bd {
padding-bottom: 40px;
}
.page__bd_spacing {
padding-left: 15px;
padding-right: 15px;
}
.page__ft{
text-align: center;
padding:0 0 10px;
padding:0 0 calc(10px + constant(safe-area-inset-bottom));
padding:0 0 calc(10px + env(safe-area-inset-bottom));
}
.page__title {
text-align: left;
font-size: 10px;
font-weight: 400;
}
.page__desc {
margin-top: 5px;
color: #888888;
text-align: left;
font-size: 10px;
}
.weui-cell_example:before{
left:52px;
}
.tabBar{
font-size: 14px
}
- 創建兩個頁面：
在app.json中添加如下代碼，這樣在pages文件夾中會自動增加myself文件夾。
"pages/myself/myself",
- 引入img文件夾和相關圖片
詳細見項目源代碼img文件夾。主要就是selectedHome.jpg、home.jpg、myself.jpg、selectedMy.jpg。這個後面導航欄會使用到。
- 創建底部導航欄
在app.json文件中添加以下代碼。值得說的就是：selectedIconPath爲被選擇時顯示的圖片路徑
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "工資年終獎個稅計算器",
"navigationBarTextStyle": "black"
},
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首頁",
"iconPath": "img/home.jpg",
"selectedIconPath": "img/selectedHome.jpg"
},
{
"pagePath": "pages/myself/myself",
"text": "我的",
"iconPath": "img/my.png",
"selectedIconPath": "img/selectedMy.png"
}
],
"selectedColor": "#DC143C"
},
- 複製源碼中的index.wxml文件
<view class="page" xmlns:wx="http://www.w3.org/1999/xhtml">
<view class="weui-panel__hd" ><text class="text-myself">請選擇要計算的類別</text></view>
<view class="flex solid-bottom padding justify-around btn-area">
<button class="cu-btn round circle lg" bindtap="toSalary">工資</button>
<button class="cu-btn round circle lg" bindtap="toBonus"> 年終獎</button>
</view>
<view class="btn-image">
<button class="btn-share" bindtap="detail" open-type="share">
<image src="/img/share.png" class="image">
</image>
</button>
<view class="shareText" >分享好友</view>
</view>
</view>
就可以看到預覽：
四、總結
歡迎大家掃描二維碼，項目源碼學習。
項目源碼:https://github.com/fongfiafia/taxCalculation
