3-微信小程式開發(小程式的目錄結構說明),備份
- 2019 年 10 月 10 日
- 筆記
https://www.cnblogs.com/yangfengwu/p/10050784.html
源碼下載鏈接:
或者
我的微信小程式篇的教程實際上是
1,用小程式實現具體的功能
2, 用微信公共號實現具體的功能
3,微信公眾號+小程式實現具體的功能
由於下面所示的一系列文章基礎知識還有沒有寫完(網頁製作部分),而大部分朋友需要立即看到效果,所以增加這一系列文章,等到基礎教程寫完之後將把這部分文章放到 STM32+WIFI+GPRS物聯網開發微信小程式篇,(這一系列文章是小程式的基礎知識,只做幾節,只是帶著大家入門)
經過長時間的影片錄製和用戶回饋,我改變一下方式
說一下整體的目錄結構
以後每一個篇章設計到的基礎知識都已上面那種方式提供
0-XXXXXXX (這裡面的所有的資料和源碼全部公開)
下面的
1-精簡版Mqtt小程式,配網以後利用小程式綁定設備,遠程控制設備,採集溫濕度數據
2-精簡版MQTT小程式,在上一節的基礎上增加數據存儲
3-XXXXX
4-XXXX
.
.
.
為具體實現的某個功能,但是實現這個功能可能還會涉及一些非基礎,但是又必須學會的知識點,所以
咱們打開第一個
1-精簡版Mqtt小程式,配網以後利用小程式綁定設備,遠程控制設備,採集溫濕度數據
裡面 MiniProgramMqttSimplify 為當前工程源碼
下面的
1-安裝Nginx,配置反向代理,小程式導入js包測試MQTT通訊
2-XXXXXX
.
.
.
這部分內容我先以自己的想法做教程,然後根據回饋再做上大家希望的知識點
這種模式也是為了解決當前教程的出現的許多問題!以適應各種開發人員的需求
大家看我前面的教程基本上(尤其是數據篇和安全篇),很多天了教程都沒有怎麼動!!
是因為我發現了再那樣錄製下去會出問題!!!所以好多天我都在找尋新的模式….
當然,這種模式以後
這種的每一節將開始單獨出售!(滿足各種用戶的需求,有些朋友也許只需要其中一節的功能)
我以前的教程也將重新整理成現在的模式.
儘管模式改變,但是所有的影片照樣是全部公開.
好了扯了這麼多,開始寫了
這節先說一下小程式的目錄結構
自行根據 https://www.cnblogs.com/yangfengwu/p/9992613.html 建一個工程
新建一個lesson2的文件夾
現在官方做的默認功能是
點擊這個頭像 (用滑鼠點擊一下)
跳轉到
這個軟體可以模擬大部分功能,咱也可以用手機調試
打開手機微信
現在說一下整個工程目錄
先來看全局的
咱讓程式一進來的時候列印點東西
console.log("11111111111111111111");
整個程式一載入就列印
咱剛才說 這幾個文件實際上對整個應用的所有頁面都生效
現在看這個 js
再後面加上
onShow:function(){//頁面從後台顯示到前台(程式第一次執行,或者用戶按下home鍵以後,又打開了微信,進入下批程式) console.log("頁面顯示出來了"); },
注意:可能有人問為啥要這樣寫…這是微信規定的哈….
大家可以去看
https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html
保存一下
然後寫
onHide() { console.log("用戶按下Home,進入了後台運行"); },
保存下
點擊一下這個
當然,這裡還可以定義全局變數.所有頁面都可以使用
可以隨意定義哈
下幾節的時候咱再說怎麼在其它頁面使用
接著說
這個下一節咱自己建個頁面的時候會細說,
注意:小程式並不難哈….主要是知道使用方法
下面看
注意…這裡面不可以加註釋……..
為了更好的敘述,改一下Windows裡面的程式碼
"backgroundTextStyle": "dark", "navigationBarBackgroundColor": "#ff0", "navigationBarTitleText": "這個頁面的標題哈", "navigationBarTextStyle": "black", "enablePullDownRefresh":true
注意….我是先測試好然後運行以後又加的注釋哈…加註釋會報錯.加註釋會報錯.加註釋會報錯.
是對以後所有頁面生效的
不過(咱們下一節建立新頁面的時候再測試)
最後說一下 WXSS
其實就相當於 咱做網頁時的 CSS
由於app.wxss所有的頁面都可以用,所以
它自己的布局方式
好了先消化消化
