1. 程式人生 > 實用技巧 >微信小程式———新手必備-----快速上手

微信小程式———新手必備-----快速上手

視窗配置

微信小程式——底部導航tabBar
(1)最簡單的底部導航
在全域性配置 app.json 中新增 , 所有小程式的頁面都會顯示出來
在這裡插入圖片描述
自定義tabBar(修改tabBar的整體樣式)請參考https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

小程式檔案型別 每個頁面由 4個檔案組成

新建好一個微信小程式工程後,會發現其有四種檔案型別,分別是:
js -------- 指令碼檔案:頁面的互動邏輯均在此頁面中進行
json ------ 配置檔案:用於設定程式的配置效果
wxml ---- 頁面結構檔案:書寫控制元件,構建頁面

wxss ----- 樣式檔案:類似於css樣式,用於

小程式生命週期 和 小程式頁面的生命週期

1.應用生命週期
每個小程式工程中,有且僅有一個app.js檔案,用於處理程式的生命週期等,位於專案的根目錄下:
onLaunch: function () {
//監聽小程式初始化-小程式初始化完成時,會觸發,且只會觸發一次。
},
onShow: function () {
//監聽小程式顯示-小程式啟動或從後臺進入前臺,會觸發。
},
onHide: function () {
//監聽小程式隱藏-小程式從前臺進入後臺,會觸發。
},
2.頁面生命週期
js檔案中定義了一些頁面生命週期函式,下面簡述下這些生命週期函式的方法作用:

(1)onLoad:首次進入頁面載入時觸發,可以在 onLoad 的引數中獲取開啟當前頁面路徑中的引數。
(2)onShow:載入完成後、後臺切到前臺或重新進入頁面時觸發
(3)onReady:頁面首次渲染完成時觸發
(4)onHide:從前臺切到後臺或進入其他頁面觸發
(5)onUnload:頁面解除安裝時觸發
在這裡插入圖片描述

資料請求和封裝

兄弟們上程式碼
先建立兩個資料夾
在這裡插入圖片描述
env裡面建index.js
用於定義三種環境的切換
在這裡插入圖片描述
http裡先建立個filer.js
在這裡插入圖片描述
再建立一個api.js
用來定義後面地址
在這裡插入圖片描述
最後建立個http.js
用來引入filer.js和api.js
在這裡插入圖片描述
再在app.js全域性註冊

引入http檔案裡的http.js
在這裡插入圖片描述
在你對應的要渲染的js檔案裡
宣告一個
在這裡插入圖片描述

路由跳轉分類 和 路由跳轉傳遞引數

路由跳轉
在wxml寫入一個bindtap="go_details"屬性
再在js檔案裡
在這裡插入圖片描述
路由跳轉傳遞id
先定義一個id作為引數路由跳轉時傳id
在這裡插入圖片描述
js裡寫入
在這裡插入圖片描述
在你需要接受這個id的js檔案裡
在這裡插入圖片描述

點選獲取引數

利用自定義屬性即可完成事件的引數傳遞
wxml
在這裡插入圖片描述
js
用console.log()列印
在這裡插入圖片描述

本地儲存的幾種方式

在這裡插入圖片描述
這裡先介紹一個
wx.setStorageSync(string key, any data)
在這裡插入圖片描述

引數請看官方
(https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorageSync.html)

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援。