Chapter one
1.前言
我先說說一下，我打算入手微信小程式，畢竟這個小程式已經很火，不用要花下載及安裝的時間，其實上，只要你搜名字東西就直接打開小程式即可，
對于開發這個微信小程式和開發網頁的編程很類似，比如：
網頁一般采用的是HTML+CSS+JS；而微信小程式采用是WXML+WXSS+JS，因此這兩個很類似，但是在細節方面上，還是有點區別的，比如我選一個最常用的標簽就是HTML的標簽為div，而WXML的標簽為view，其他的標簽也有不同，另外，微信小程式采用了比如wx：if或{{}}的屬性等，這些屬性很像（React、Vue），一般通常用js操作DOM（HTML），比如用戶點擊行為事件，監聽事件等，對于這個，只要你理解底層原理就可以了，
css和wxss為樣式檔案，其實大部分都一樣，不過，我想要初始化的需求，為了兼容各種瀏覽器，css可以支持通配符“*”，這個意思是整個頁面的所有元素，但是wxss不支持這個通配符“*”的，只能用一個個常用的元素來進行寫，
剩下的js，我不說了！它們倆都是一樣的，
站在微信小程式的角度上，多了一個json檔案，這個意思是資料格式檔案，在用途上，其實app.json來作為所有的組態檔，
2.微信小程式目錄結構講解
2.1app目錄下：
app.js: 全域的資料和邏輯，
app.json: 配置整個app的資訊，可以自己添加一個tabBar（底部選單欄），
app.wxss: 全域的樣式設定，
2.2index頁面：
pages檔案夾都是頁面檔案夾，比如名字為index，為該頁面的檔案夾里包括：
index.js：邏輯處理和資料，
index.wxml：布局UI ，組件什么的等，
index.json：配置頁面的入口，
index.css：樣式檔案，
2.3創建一個頁面檔案夾：
如果要創建一個頁面的定制檔案夾，首先在app.json里面配置頁面的路徑，在pages方法里面寫”pages/login/login”,然后它會幫我自動創建了一個login的檔案夾，具體的檔案夾里面裝都是(.wxml、.wxss、.js、.json)，不需要用手動一個個創建檔案，
3.準備IDE工具
我自己用兩個IDE工具分別是：微信開發者工具和Visual Studio Code，
我主要是用Visual Studio Code來寫代碼，這個IDE工具用起來很舒服，插件非常多，另外微信開發者工具用來展示除錯頁面，反正它們倆會同步更新的檔案，
4.實戰專案搭建
4.1搭建目錄結構
4.2搭建專案的頁面
4.3引入字體圖示
第一步：打開Alibaba字體圖示 ?站
第二步：選擇的圖示
第三步：添加?目錄項?
第四步：下載到本地（放在style目錄下）
第五步：將樣式?件 由 css 修改為 wxss（小程式樣式）
第六步：?程式（style/iconfont.wxss）中引?
4.4tabBar屬性及結構
這個tabBar(小程式)作為導航欄，一般是在小程式視窗的底部或頂部并切換頁面，
小程式根目錄下的 app.json 檔案用來對微信小程式進行全域配置，
"tabBar": {
"color": "#999",
"selectedColor": "#ff2d4a",
"backgroundColor": "#fafafa",
"position": "bottom",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/index/index",
"text": "首頁",
"iconPath": "icons/home.png",
"selectedIconPath": "icons/home-o.png"
},
{
"pagePath": "pages/category/index",
"text": "分類",
"iconPath": "icons/category.png",
"selectedIconPath": "icons/category-o.png"
},
{
"pagePath": "pages/cart/index",
"text": "購物車",
"iconPath": "icons/cart.png",
"selectedIconPath": "icons/cart-o.png"
},
{
"pagePath": "pages/user/index",
"text": "我的",
"iconPath": "icons/my.png",
"selectedIconPath": "icons/my-o.png"
}
]
},
接下來，后面實戰的程序中順便寫筆記哈！邊做邊寫！
不斷更新中....
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/192897.html
標籤：其他