當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

微信小程序_指南部分

發(fā)布時(shí)間：2023/12/31 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了微信小程序_指南部分小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

微信小程序

下載安裝

創(chuàng)建項(xiàng)目

Step 1

Step2

Step3 目錄結(jié)構(gòu)

配置

1.我們直接在app.json中的pages寫入一下代碼

..."pages":["pages/welcome/welcome","pages/index/index","pages/logs/logs","palges/home/home","pages/kind/kind","pages/cart/cart","pages/user/user"], ...

保存后會自動生成一下目錄結(jié)構(gòu)

其中index 和logs 是微信自帶的，其他的只需要你保存代碼，就會自動生成目錄結(jié)構(gòu)

學(xué)習(xí)api

小程序配置： app.json

全局配置：小程序根目錄下的 app.json 文件用來對微信小程序進(jìn)行全局配置。文件內(nèi)容為一個(gè) JSON 對象

包括頁面路徑、界面表現(xiàn)、底部tab

pages: 描述小程序所有頁面路徑，一目了然

window字段 - 定義小程序所有頁面背景顏色，文字顏色定義等。

tabBar:

color HexColor tab 上的文字默認(rèn)顏色，僅支持十六進(jìn)制顏色

selectedColor HexColor tab 上的文字選中時(shí)的顏色，僅支持十六進(jìn)制顏色

backgroundColor HexColor tab 的背景色，僅支持十六進(jìn)制顏色

borderStyle String 默認(rèn)值 black tabbar 上邊框的顏色，僅支持 black / white

list Array 必填項(xiàng) tab 的列表，詳見list屬性說明，最少 2 個(gè)`、最多 5 個(gè) tab

pagePath String 必填路徑

text String 必填 tab 上按鈕文字

iconPathString 圖片路徑，icon 大小限制為 40kb，建議尺寸為 81px * 81px，不支持網(wǎng)絡(luò)圖片。當(dāng) position 為 top 時(shí)，不顯示 icon

selectedIconPath String 選中時(shí)的圖片路徑，icon 大小限制為 40kb，建議尺寸為 81px * 81px，不支持網(wǎng)絡(luò)圖片 當(dāng) position 為 top 時(shí)，不顯示 icon

position String 默認(rèn)值 bottom tabBar 的位置，僅支持 bottom / top

custom boolean 默認(rèn)值 false 自定義 tabBar

"tabBar": {"list": [{"pagePath": "palges/home/home", // 首頁路徑"text": "首頁", // tabbar標(biāo)題"iconPath": "./resources/tabBar/home.png",// tabbar 圖標(biāo)"selectedIconPath": "./resources/tabBar/home_active.png" // 選中后的的樣式},{"pagePath": "pages/kind/kind","text": "詳情","iconPath": "./resources/tabBar/kind.png","selectedIconPath": "./resources/tabBar/kind_active.png"},{"pagePath": "pages/cart/cart","text": "購物車","iconPath": "./resources/tabBar/cart.png","selectedIconPath": "./resources/tabBar/cart_active.png"},{"pagePath": "pages/user/user","text": "我的","iconPath": "./resources/tabBar/user.png","selectedIconPath": "./resources/tabBar/user_active.png"}]},

這便是效果圖其中的resources 是我自己去阿里圖標(biāo)庫自己找的icon

entryPagePath: String : 小程序默認(rèn)啟動頁設(shè)置

// 如果不填，將默認(rèn)為 pages 列表的第一項(xiàng)。不支持帶頁面路徑參數(shù)。 "entryPagePath": "palges/home/home", // 表示默認(rèn)啟動為首頁

pages: String[] 必填項(xiàng) 頁面路徑列表

// 用于指定小程序由哪些頁面組成，每一項(xiàng)都對應(yīng)一個(gè)頁面的路徑（含文件名）信息。文件名不需要寫文件后綴，框架會自動去尋找對應(yīng)位置的 .json, .js, .wxml, .wxss 四個(gè)文件進(jìn)行處理。 // 未指定 entryPagePath 時(shí)，數(shù)組的第一項(xiàng)代表小程序的初始頁面（首頁） {"pages": ["pages/index/index", "pages/logs/logs"] }

window: Object: 非必填全局默認(rèn)展示

navigationBarBackgroundColor: HexColor #00000

navigationBarTextStyle:String white 導(dǎo)航欄標(biāo)題顏色，僅支持 black / white

navigationBarTitleText :String 導(dǎo)航欄文字內(nèi)容

navigationStyle: String 默認(rèn)值default，僅支持default 和 custom 自定義導(dǎo)航欄

backgroundColor HexColor 默認(rèn)#ffffff 窗口的背景色就是最下方的，下拉后顯示的顏色"backgroundColor": "#000",

backgroundTextStyle String 默認(rèn)dark 下拉loading 樣式，僅支持dark/light

若要開啟，需要配合后文提到的api，這里我先寫上看一看 enablePullDownRefresh

enablePullDownRefresh Boolean 默認(rèn) false

onPullDownRefresh() 監(jiān)聽用戶下拉刷新事件。需要在app.json的window選項(xiàng)中或頁面配置中開啟enablePullDownRefresh。可以通過wx.startPullDownRefresh觸發(fā)下拉刷新，調(diào)用后觸發(fā)下拉刷新動畫，效果與用戶手動下拉刷新一致。當(dāng)處理完數(shù)據(jù)刷新后，wx.stopPullDownRefresh可以停止當(dāng)前頁面的下拉刷新。

onReachBottomDistance number 默認(rèn) 50 頁面上拉觸底事件觸發(fā)時(shí)距頁面底部距離，單位為 px。

onReachBottom() 監(jiān)聽用戶上拉觸底事件。可以在app.json的window選項(xiàng)中或頁面配置中設(shè)置觸發(fā)距離onReachBottomDistance。在觸發(fā)距離內(nèi)滑動期間，本事件只會被觸發(fā)一次。

pageOrientation String 默認(rèn)值 portrait 屏幕旋轉(zhuǎn)設(shè)置，支持 auto/portrait/landscape 橫屏

restartStrategy Sting 默認(rèn)值 homePage 重新啟動策略配置

initialRenderingCache String 頁面初始渲染緩存配置，支持 static / dynamic

visualEffectInBackground String 默認(rèn)值 none 切入系統(tǒng)后臺時(shí)，隱藏頁面內(nèi)容，保護(hù)用戶隱私。支持 hidden / none

networkTimeout Object 網(wǎng)絡(luò)超時(shí)時(shí)間

debug Boolean 開啟關(guān)閉debug模式，默認(rèn)關(guān)閉

functionalPages Boolean 是否啟用插件功能頁，默認(rèn)關(guān)閉

subpackages Object[] 分包結(jié)構(gòu)配置

使用分包

先在app.json 聲明項(xiàng)目分包結(jié)構(gòu)

"subpackages": [{"root": "searchMode","name": "search","pages": ["pages/search"]}, {"root": "login","name": "login","pages": ["pages/login"]}, {"root": "register","name": "register","pages": ["pages/register"]}],├── app.js ├── app.json ├── app.wxss ├── searchMode │ └── pages │ ├── search ├── login │ └── pages │ ├── login ├── register │ └── pages │ ├── register ├── pages │ ├── index │ └── log

字段：

root String 分包根目錄

name String 分包別名，分包預(yù)下載時(shí)可以使用

pages StringArray 分包頁面路徑，相對與分包根目錄

independent Boolean 分包是否獨(dú)立分包

打包原則

聲明 subpackages 后將subpackages 配置路徑進(jìn)行打包到app(主包)中

app(主包)可以有自己的pages (最外層的pages字段)

subpackage的根目錄不能是另一個(gè)subpackage的子目錄

tabBar 必須包含在app內(nèi)

獨(dú)立分包

開發(fā)者通過在app.json的subpackages字段中對應(yīng)的分包配置項(xiàng)中定義independent字段聲明對應(yīng)分包為獨(dú)立分包。

獨(dú)立分包屬于分包的一種。普通分包的所有限制都對獨(dú)立分包有效。獨(dú)立分包中插件、自定義組件的處理方式同普通分包。

此外，使用獨(dú)立分包時(shí)要注意：

獨(dú)立分包中不能依賴主包和其他分包中的內(nèi)容，包括 js 文件、template、wxss、自定義組件、插件等（使用分包異步化時(shí) js 文件、自定義組件、插件不受此條限制）
主包中的 app.wxss 對獨(dú)立分包無效，應(yīng)避免在獨(dú)立分包頁面中使用 app.wxss 中的樣式；
App 只能在主包內(nèi)定義，獨(dú)立分包中不能定義 App，會造成無法預(yù)期的行為；
獨(dú)立分包中暫時(shí)不支持使用插件。
與普通分包不同，獨(dú)立分包運(yùn)行時(shí)，App 并不一定被注冊，因此 getApp() 也不一定可以獲得 App 對象：
當(dāng)用戶從獨(dú)立分包頁面啟動小程序時(shí)，主包不存在，App也不存在，此時(shí)調(diào)用 getApp() 獲取到的是 undefined。當(dāng)用戶進(jìn)入普通分包或主包內(nèi)頁面時(shí)，主包才會被下載，App 才會被注冊。（不過這里我是獲取到app實(shí)例了）

分包預(yù)下載

開發(fā)者可以通過配置，在進(jìn)入小程序某個(gè)頁面時(shí)，由框架自動預(yù)下載可能需要的分包，提升進(jìn)入后續(xù)分包頁面時(shí)的啟動速度。對于獨(dú)立分包，也可以預(yù)下載主包。

分包預(yù)下載目前只支持通過配置方式使用，暫不支持通過調(diào)用API完成。

預(yù)下載分包行為在進(jìn)入某個(gè)頁面時(shí)觸發(fā)，通過在 app.json 增加 preloadRule 配置來控制。

"preloadRule": {"pages/index/index":{ // 頁面路徑"network": "wifi", // 只有兩個(gè)參數(shù) wifi 和all"packages": ["searchMode", "login", "register"] 可以放單個(gè)，也可以放數(shù)組，}},

packages 是必填項(xiàng)，類型是String類型，無默認(rèn)值，進(jìn)入頁面后預(yù)下載分包的 root 或 name。__APP__ 表示主包。

ackagesStringArray是無進(jìn)入頁面后預(yù)下載分包的 root 或 name。__APP__ 表示主包。

networkString否wifi在指定網(wǎng)絡(luò)下預(yù)下載，可選值為： all: 不限網(wǎng)絡(luò) wifi: 僅wifi下預(yù)下載

分包異步化

在小程序中，不同的分包對應(yīng)不同的下載單元；因此，除了非獨(dú)立分包可以依賴主包外，分包之間不能互相使用自定義組件或進(jìn)行 require。分包異步化特性將允許通過一些配置和新的接口，使部分跨分包的內(nèi)容可以等待下載后異步使用，從而一定程度上解決這個(gè)限制。

//app.json {"entryPagePath": "palges/home/home","pages":["pages/welcome/welcome","pages/index/index","pages/logs/logs","palges/home/home","pages/kind/kind","pages/cart/cart","pages/user/user","pages/detail/detail"],"subpackages": [{"root": "searchMode","name": "search","pages": ["pages/search"]}, {"root": "login","name": "login","pages": ["pages/login"]}, {"root": "register","name": "register","pages": ["pages/register","components/simple-list"],"independent": false},{"root": "commonPackage","name": "commonPackage","pages": ["components/button"]},{"root": "subPackageB","name": "subPackageB","pages": ["components/full-list"]}],"preloadRule": {"pages/index/index":{"network": "wifi","packages": ["searchMode", "login", "register"]}},"window":{"navigationBarBackgroundColor": "#f90","navigationBarTextStyle": "white","navigationBarTitleText": "Hello World","navigationStyle": "default","backgroundColor": "#000","backgroundTextStyle":"dark","enablePullDownRefresh": true,"pageOrientation": "portrait"},"tabBar": {"color": "#f90","borderStyle": "black","list": [{"pagePath": "palges/home/home","text": "首頁","iconPath": "./resources/tabBar/home.png","selectedIconPath": "./resources/tabBar/home_active.png"},{"pagePath": "pages/kind/kind","text": "詳情","iconPath": "./resources/tabBar/kind.png","selectedIconPath": "./resources/tabBar/kind_active.png"},{"pagePath": "pages/cart/cart","text": "購物車","iconPath": "./resources/tabBar/cart.png","selectedIconPath": "./resources/tabBar/cart_active.png"},{"pagePath": "pages/user/user","text": "我的","iconPath": "./resources/tabBar/user.png","selectedIconPath": "./resources/tabBar/user_active.png"}]},"style": "v2","sitemapLocation": "sitemap.json" }// register/pages/register.json {"usingComponents": {"button": "../../commonPackage/components/button","list": "../../subPackageB/components/full-list","simple-list": "../components/simple-list"},"componentPlaceholder": {"button": "view","list": "simple-list"} } // 記得上述文件夾。簡單來說，保存app.json 在full-list 中創(chuàng)建json文件，配置一下 {"component": true,"usingComponents": {} }

在這個(gè)配置中，button 和 list 兩個(gè)自定義組件是跨分包引用組件，其中 button 在渲染時(shí)會使用內(nèi)置組件 view 作為替代，list 會使用當(dāng)前分包內(nèi)的自定義組件 simple-list 作為替代進(jìn)行渲染；在這兩個(gè)分包下載完成后，占位組件就會被替換為對應(yīng)的跨分包組件。

一個(gè)分包中的代碼引用其它分包的代碼時(shí)，為了不讓下載阻塞代碼運(yùn)行，我們需要異步獲取引用的結(jié)果。

worker

多線程 Worker

一些異步處理的任務(wù)，可以放置于 Worker 中運(yùn)行，待運(yùn)行結(jié)束后，再把結(jié)果返回到小程序主線程。Worker 運(yùn)行于一個(gè)單獨(dú)的全局上下文與線程中，不能直接調(diào)用主線程的方法。

Worker 與主線程之間的數(shù)據(jù)傳輸，雙方使用 Worker.postMessage() 來發(fā)送數(shù)據(jù)，Worker.onMessage() 來接收數(shù)據(jù)，傳輸?shù)臄?shù)據(jù)并不是直接共享，而是被復(fù)制的。

使用 Worker處理多線程任務(wù)時(shí)，設(shè)置 Worker 代碼放置的目錄

在app.json 中配置 {“workers”: “workers”}

添加worker代碼文件

workers/request/index.js workers/request/utils.js workers/response/index.js├── app.js ├── app.json ├── project.config.json └── workers├── request│ ├── index.js│ └── utils.js└── response└── index.js

編寫 Worker 代碼

在 workers/request/index.js 編寫 Worker 響應(yīng)代碼

const utils = require('./utils')// 在 Worker 線程執(zhí)行上下文會全局暴露一個(gè) worker 對象，直接調(diào)用 worker.onMessage/postMessage 即可 worker.onMessage(function (res) {console.log(res) })

在主線程中初始化 Worker

// +++ app.js中注冊一下 const worker = wx.createWorker('workers/request/index.js') // 文件名指定 worker 的入口文件路徑，絕對路徑

主線程向worker發(fā)送消息

worker.postMessage({msg: 'hello worker' })

注意：

Worker 最大并發(fā)數(shù)量限制為 1 個(gè)，創(chuàng)建下一個(gè)前請用 Worker.terminate() 結(jié)束當(dāng)前 Worker

Worker 內(nèi)代碼只能 require 指定 Worker 路徑內(nèi)的文件，無法引用其它路徑

Worker 的入口文件由 wx.createWorker() 時(shí)指定，開發(fā)者可動態(tài)指定 Worker 入口文件

Worker 內(nèi)不支持 wx 系列的 API

Workers 之間不支持發(fā)送消息

Worker 目錄內(nèi)只支持放置 JS 文件，其他類型的靜態(tài)文件需要放在 Worker 目錄外

基礎(chǔ)庫 v2.18.1 開始支持在插件內(nèi)使用 worker。相應(yīng)地，插件使用worker前需要在plugin.json內(nèi)配置workers代碼路徑，即一個(gè)相對插件代碼包根目錄的路徑。

requiredBackgroundModes

聲明需要使用運(yùn)行在后臺，如音樂播放，后臺定位

// app.json 聲明 {"pages": ["pages/index/index"],"requiredBackgroundModes": ["audio", "location"] }

resizable

屏幕旋轉(zhuǎn)

顯示區(qū)域尺寸

顯示區(qū)域指小程序界面中可以自由布局展示的區(qū)域。在默認(rèn)情況下，小程序顯示區(qū)域的尺寸自頁面初始化起就不會發(fā)生變化。但以下兩種方式都可以改變這一默認(rèn)行為。

// 手機(jī) {"pageOrientation": "auto" }// iPAd {"resizable": true }

Media Query 解決不同尺寸的顯示區(qū)域，頁面的布局會有所差異

.my-class {width: 40px; }@media (min-width: 480px) {/* 僅在 480px 或更寬的屏幕上生效的樣式規(guī)則 */.my-class {width: 200px;} }

頁面尺寸發(fā)生改變的事件，可以使用頁面的 onResize 來監(jiān)聽。對于自定義組件，可以使用 resize 生命周期來監(jiān)聽。回調(diào)函數(shù)中將返回顯示區(qū)域的尺寸信息。（從基礎(chǔ)庫版本開始支持。）

// page 類型處理監(jiān)聽 Page({onResize(res) {res.size.windowWidth // 新的顯示區(qū)域?qū)挾?/span>res.size.windowHeight // 新的顯示區(qū)域高度} })// 自定義組件Component Page({onResize(res) {res.size.windowWidth // 新的顯示區(qū)域?qū)挾?/span>res.size.windowHeight // 新的顯示區(qū)域高度} })

permission 授權(quán)

部分接口需要經(jīng)過用戶授權(quán)同意才能調(diào)用。我們把這些接口按使用范圍分成多個(gè) scope ，用戶選擇對 scope 來進(jìn)行授權(quán)，當(dāng)授權(quán)給一個(gè) scope 之后，其對應(yīng)的所有接口都可以直接使用。

此類接口調(diào)用時(shí)：

如果用戶未接受或拒絕過此權(quán)限，會彈窗詢問用戶，用戶點(diǎn)擊同意后方可調(diào)用接口；
如果用戶已授權(quán)，可以直接調(diào)用接口；
如果用戶已拒絕授權(quán)，則不會出現(xiàn)彈窗，而是直接進(jìn)入接口 fail 回調(diào)。

開發(fā)者可以使用 wx.getSetting 獲取用戶當(dāng)前的授權(quán)狀態(tài)。

用戶可以在小程序設(shè)置界面（「右上角」 - 「關(guān)于」 - 「右上角」 - 「設(shè)置」）中控制對該小程序的授權(quán)狀態(tài)。

開發(fā)者可以調(diào)用 wx.openSetting 打開設(shè)置界面，引導(dǎo)用戶開啟授權(quán)。

開發(fā)者可以使用 wx.authorize 在調(diào)用需授權(quán) API 之前，提前向用戶發(fā)起授權(quán)請求。

總結(jié)

以上是生活随笔為你收集整理的微信小程序_指南部分的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。