小程式的第三方框架有
1.騰訊wepy 類似Vue
2.美團mpvue 類似Vue
3.京東taro 類似react
4.滴滴 chameleon
5.uni-app 類似Vue
6.原生框架 MIMA
本專案使用原生框架
1.介面檔案
2.幫助檔案
1.小程式開發檔案
2.阿里巴巴字體 iconfont
3.專案搭建
3.1新建小程式專案
填入自己的APPID
3.2搭建專案結構
3.3搭建專案的頁面
3.4引入字體圖示
1.打開阿里巴巴字體圖示網站
阿里巴巴字體 iconfont
2.選擇圖示
3.添加至專案
4.查看在線鏈接然后復制
在新的頁面打開看到代碼后全選復制，然后回傳微信開發工具找到新建的style檔案粘貼
5.將樣式檔案由CSS修改為wxss
6.小程式中引入
在app.wxss中
/**app.wxss**/
@import "./styles/iconfont.wxss"最后在那個頁面要使用只需要輸入<text class="iconfont xxx"></text>,xxx是你要使用的圖示名稱
3.5搭建專案的tabbar結構
參照小程式基礎篇中tabbar的知識點
"tabBar": {
"color": "#2c2c2c",
"selectedColor": "#d81e06",
"backgroundColor": "#fafafa",
"position": "bottom",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/index/index",
"text": "首頁",
"iconPath": "./icons/home.png",
"selectedIconPath": "./icons/home-o.png"
},
{
"pagePath": "pages/category/category",
"text": "分類",
"iconPath": "./icons/category.png",
"selectedIconPath": "./icons/category-o.png"
},
{
"pagePath": "pages/cart/cart",
"text": "購物車",
"iconPath": "./icons/cart.png",
"selectedIconPath": "./icons/cart-o.png"
},
{
"pagePath": "pages/user/user",
"text": "我的",
"iconPath": "./icons/my.png",
"selectedIconPath": "./icons/my-o.png"
}
]
},
3.6初始化頁面樣式
在app.wxss中
/**app.wxss**/
@import "./styles/iconfont.wxss";
/* 在微信小程式中不支持通配符 * */
page,view,text,swiper,swiper-item,image,navigator{
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* 主題顏色 通過變數來實作
1 less 中存在變數這個知識
2 原生的CSS和wxss也是支持變數
*/
page{
/* 定義主題顏色 */
--themeColor:#eb4450;
/* 定義充一字體大小 假設設計稿大小是375px
1px=2rpx
*/
font-size: 28rpx;
}在那個頁面要使用自定義主題顏色，就在那個頁面的wxss中
{
/* 使用主題顏色 */
color: var(--themeColor);
}轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/386553.html
標籤：其他
上一篇：DBUtils工具類實作增刪改查
下一篇：三年計劃綱領