微信小程序?qū)W習(xí)筆記之目錄結(jié)構(gòu)、基本配置圖文詳解
本文實(shí)例講述了微信小程序?qū)W習(xí)筆記之目錄結(jié)構(gòu)、基本配置。分享給大家供大家參考,具體如下:
結(jié)束了一段時(shí)間的學(xué)習(xí),開始一段新的學(xué)習(xí)旅程 —— 微信小程序?,F(xiàn)在出去找工作只會(huì)PHP、HTML+CSS、JS什么的不夠了,總得會(huì)點(diǎn)時(shí)下熱門的東西,例如微信小程序,有很多企業(yè)的招聘要求上寫著:“做過微信小程序的優(yōu)先”、“只要做過微信小程序的”...... 可見微信小程序的熱門程度。話(fei)不(hua)多(ting)說(duo),開始學(xué)習(xí)。
首先在微信公眾平臺注冊小程序賬號:
使用小程序賬號登錄微信公眾平臺,完成基本設(shè)置:
下載微信web開發(fā)者工具,安裝,打開(如果打不開,參考附錄:微信web開發(fā)者工具不能打開的問題)
微信掃碼登錄開發(fā)者工具,然后在本地文件夾創(chuàng)建一個(gè)小程序項(xiàng)目
(其中AppID在開發(fā)設(shè)置里面)
生成小程序示例目錄如下:
全局配置app.json參數(shù):
{ /**所有頁面的路徑(省略.wxml后綴),唯一必填項(xiàng)**/ "pages":[ "pages/index/index", /**第一項(xiàng)為首頁路徑**/ "pages/logs/logs" ], /**設(shè)置窗口**/ "window":{ "backgroundTextStyle":"light", /**下拉loading樣式,dark或light**/ "navigationBarBackgroundColor": "#fff", /**導(dǎo)航欄背景顏色 十六進(jìn)制**/ "navigationBarTitleText": "WeChat", /**導(dǎo)航欄標(biāo)題內(nèi)容**/ "navigationBarTextStyle":"black", /**導(dǎo)航欄標(biāo)題顏色 black或white**/ "navigationStyle":"default", /**導(dǎo)航欄樣式 default和custom(只保留右上角膠囊按鈕,最低版本6.6.0)**/ "backgroundColor":"#ffffff", /**窗口背景色**/ "enablePullDownRefresh":false, /**是否全局開啟下拉刷新**/ "onReachBottomDistance":"50", /**頁面上拉觸底事件觸發(fā)時(shí)距頁面底部距離,單位px**/ "backgroundColorTop":"#ffffff", /**頂部窗口的背景色(僅iOS支持,最低版本6.5.16)**/ "backgroundColorBottom":"#ffffff", /**底部窗口的背景色(僅iOS支持,最低版本6.5.16)**/ }, /**頂部或底部分欄設(shè)置**/ "tabBar": { "list": [{ /**欄目列表(最少2個(gè) 最多5個(gè))**/ "pagePath": "pages/index/index", /**頁面路徑(必須在pages中先定義)**/ "text": "首頁", /**分欄按鈕文字**/ /**非必填項(xiàng)**/ "iconPath": "首頁", /**icon圖標(biāo)路徑**/ "selectedIconPath": "首頁" /**選中時(shí)icon圖標(biāo)路徑**/ /*icon說明:大小限制40kb,建議尺寸81px*81px,不支持網(wǎng)絡(luò)圖片。postion為top時(shí)不顯示*/ }, { "pagePath": "pages/logs/logs", "text": "日志" }], "color":"#ffffff", /**分欄文字顏色**/ "selectedColor":"#ffffff", /**分欄文字選中顏色**/ "backgroundColor":"#ffffff", /**分欄背景色**/ /**非必填項(xiàng)**/ "borderStyle":"black", /**分欄上邊框顏色 black或white**/ "position":"bottom", /**分欄位置 bottom或top**/ }, }
頁面配置xxx.json參數(shù):
{ "navigationBarBackgroundColor": "#000000", /**導(dǎo)航欄背景顏色 十六進(jìn)制**/ "navigationBarTextStyle": "white", /**導(dǎo)航欄標(biāo)題顏色 black或white**/ "navigationBarTitleText": "頁面標(biāo)題", /**導(dǎo)航欄標(biāo)題內(nèi)容**/ "backgroundColor": "#ffffff", /**窗口背景色**/ "backgroundTextStyle": "dark", /**下拉loading樣式,dark或light**/ "enablePullDownRefresh":false, /**是否全局開啟下拉刷新**/ "onReachBottomDistance":"50", /**頁面上拉觸底事件觸發(fā)時(shí)距頁面底部距離,單位px**/ "onReachBottomDistance":false, /**設(shè)置為 true 則頁面整體不能上下滾動(dòng);只在頁面配置中有效**/ /**說明:頁面的.json只能設(shè)置window相關(guān)配置項(xiàng),無需寫window這個(gè)鍵。**/ }
工具配置project.config.json參數(shù):
{ "description": "項(xiàng)目配置文件", /**描述**/ /**打包配置選項(xiàng)**/ "packOptions": { "ignore": [{ "type": "file", /**文件**/ "value": "test/test.js" }, { "type": "folder", /**文件夾**/ "value": "test" }, { "type": "suffix", /**后綴**/ "value": ".webp" }, { "type": "prefix", /**前綴**/ "value": "test-" }] }, /**項(xiàng)目設(shè)置**/ "setting": { "urlCheck": true, /**是否檢查安全域名和TLS版本**/ "es6": true, /**是否啟用 es6 轉(zhuǎn) es5**/ "postcss": true, /**上傳代碼時(shí)樣式是否自動(dòng)補(bǔ)全**/ "minified": true, /**上傳代碼時(shí)是否自動(dòng)壓縮**/ "newFeature": true }, "compileType": "miniprogram", /**編譯類型 miniprogram為普通小程序項(xiàng)目,plugin為小程序插件項(xiàng)目**/ "libVersion": "2.3.0", /*基礎(chǔ)庫版本*/ "appid": "wx1aebd07bdcf596b8", /*項(xiàng)目appid,只在新建項(xiàng)目時(shí)讀取*/ "projectname": "ceshi", /**項(xiàng)目名字,只在新建項(xiàng)目時(shí)讀取**/ /**調(diào)試配置選項(xiàng)**/ "debugOptions": { "hidedInDevtools": [] }, "isGameTourist": false, /**小游戲**/ "condition": { "search": { "current": -1, "list": [] }, "conversation": { "current": -1, "list": [] }, "game": { "currentL": -1, "list": [] }, "miniprogram": { "current": -1, "list": [] } } }
WXML模板:充當(dāng)類似HTML 角色,區(qū)別是標(biāo)簽不一致(view、button、text等)、渲染和邏輯分離,多了一些 wx:if
這樣的屬性以及 {{ }}
這樣的表達(dá)式。
WXSS 樣式:充當(dāng)類似CSS 角色,僅支持部分CSS選擇器,新增尺寸單位rpx,全局樣式app.wxss作用于小程序所有頁面,局部頁面樣式page.wxss僅對當(dāng)前頁面生效。
JS 交互邏輯:處理用戶操作,例如響應(yīng)用戶的點(diǎn)擊、獲取用戶的位置等。
【例】在頁面中點(diǎn)擊聲明bindtap屬性的button,調(diào)用JS中聲明的clickMe方法來響應(yīng)這次點(diǎn)擊操作,實(shí)現(xiàn)把頁面中的msg顯示為"Hello World"。
測試頁面test.js:
//test.js const util = require('../../utils/util.js') Page({ clickMe: function() { this.setData({ msg: "Hello World" }) } })
測試頁面test.wxml:
<!--test.wxml--> <view>{{ msg }}</view> <button bindtap="clickMe">點(diǎn)擊我</button>
附:微信web開發(fā)者工具不能打開的問題解決方法
今天新裝的微信開發(fā)者工具,安裝完成以后就是打不開,點(diǎn)解沒有反應(yīng),win10 64的系統(tǒng),各種百度,最后找到解決的方案
把這些都關(guān)閉了就OK了!?。?/p>
希望本文所述對大家微信小程序設(shè)計(jì)有所幫助。
- 詳解微信小程序開發(fā)(項(xiàng)目從零開始)
- 微信小程序 刪除項(xiàng)目工程實(shí)現(xiàn)步驟
- 微信小程序項(xiàng)目總結(jié)之記賬小程序功能的實(shí)現(xiàn)(包括后端)
- 基于mpvue搭建微信小程序項(xiàng)目框架的教程詳解
- 微信小程序轉(zhuǎn)化為uni-app項(xiàng)目的方法示例
- 簡單了解微信小程序的目錄結(jié)構(gòu)
- 微信小程序購物商城系統(tǒng)開發(fā)系列-目錄結(jié)構(gòu)介紹
- 微信小程序開發(fā)(二)圖片上傳+服務(wù)端接收詳解
- 微信小程序 增、刪、改、查操作實(shí)例詳解
- 微信小程序 實(shí)戰(zhàn)小程序?qū)嵗?/a>
- 微信小程序?qū)W習(xí)總結(jié)(一)項(xiàng)目創(chuàng)建與目錄結(jié)構(gòu)分析
相關(guān)文章
Varlet組件實(shí)現(xiàn)一個(gè)絲滑的點(diǎn)擊水波效果詳解
這篇文章主要為大家介紹了Varlet組件實(shí)現(xiàn)一個(gè)絲滑的點(diǎn)擊水波效果示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10js利用cookie實(shí)現(xiàn)記住用戶頁面操作
這篇文章主要給大家介紹了關(guān)于js利用cookie實(shí)現(xiàn)記住用戶頁面操作的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03JavaScript使用Blob文件流下載txt、pdf、圖片等文件,自定義下載文件名
JavaScript使用Blob文件流下載txt、pdf、圖片等格式文件,同時(shí)自定義下載文件名,2023-08-08js拆分字符串并將分割的數(shù)據(jù)放到數(shù)組中的方法
這篇文章主要介紹了js拆分字符串并將分割的數(shù)據(jù)放到數(shù)組中的方法,涉及javascript中split方法及數(shù)組的操作技巧,需要的朋友可以參考下2015-05-05