本人框架入門,此處記錄完成一個前后端分離項目筆記,若有錯誤,還望指正,持續(xù)更新中…
4.創(chuàng)建微信小程序項目
微信公眾平臺 (qq.com)
微信開放文檔 (qq.com)
4.1獲取appid
登錄微信公眾平臺獲取自己對應的appid并創(chuàng)建項目,不選擇云服務,使用js模板。
5.配置app.json
5.1添加頁面
創(chuàng)建完成微信小程序項目后,在app.json中添加頁面代碼文章來源:http://www.zghlxwxcb.cn/news/detail-596799.html
"pages":[
"pages/index/index",
"pages/cate/cate",
"pages/store/store",
"pages/my/my",
"pages/logs/logs"
],
5.2修改頂部框樣式
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#6b8770",
"navigationBarTitleText": "易物",
"navigationBarTextStyle":"white"
},
5.3添加taber底部導航欄
"tabBar": {
"color": "#999",
"selectedColor": "#6b8770",
"backgroundColor": "#ededed",
"position": "bottom",
"borderStyle": "black",
"list": [{
"pagePath": "pages/index/index",
"text": "首頁",
"iconPath": "icons/home.png",
"selectedIconPath": "icons/homef.png"
},{
"pagePath": "pages/cate/cate",
"text": "類型",
"iconPath": "icons/cate.png",
"selectedIconPath": "icons/catef.png"
},{
"pagePath": "pages/store/store",
"text": "物品庫",
"iconPath": "icons/store.png",
"selectedIconPath": "icons/storef.png"
},{
"pagePath": "pages/my/my",
"text": "個人中心",
"iconPath": "icons/my.png",
"selectedIconPath": "icons/myf.png"
}]
},
圖標的需要自己阿里巴巴矢量圖標庫進行下載 iconfont-阿里巴巴矢量圖標庫
下載后放在pages同級文件的icons中,通過路徑進行引入。
最終完成效果文章來源地址http://www.zghlxwxcb.cn/news/detail-596799.html
到了這里,關(guān)于前后端分離項目—微信小程序的創(chuàng)建及app.json的配置(二)的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!