資訊專欄INFORMATION COLUMN
摘要：配置配置全解析項目配置文件文件描述項目配置文件項目代碼配置是否檢查域名安全性和版本是否將項目的代碼轉成是否自動補全兼容前綴是否壓縮代碼是否啟用新功能編譯方式版本號項目名項目配置搜索關鍵字客服編譯方式小程序配置項目路由設置第一項為首頁窗
1. 配置
配置全解析
project.config.json ( 項目配置文件 )
{
// 文件描述
"description": "項目配置文件",
// 項目代碼配置
"setting": {
// 是否檢查 url 域名安全性和 TLS 版本
"urlCheck": false,
// 是否將項目的 es5 代碼轉成 es6
"es6": true,
// 是否自動補全 css 兼容前綴
"postcss": true,
// 是否壓縮代碼
"minified": true,
// 是否啟用新功能
"newFeature": true
},
// 編譯方式
"compileType": "miniprogram",
// 版本號
"libVersion": "1.7.2",
// appid
"appid": "touristappid",
// 項目名
"projectname": "haiyangbg",
// 項目配置
"condition": {
// 搜索關鍵字
"search": {
"current": -1,
"list": []
},
// 客服
"conversation": {
"current": -1,
"list": []
},
// 編譯方式
"miniprogram": {
"current": -1,
"list": []
}
}
}
app.json ( 小程序配置 )
{
// 項目路由設置（第一項為首頁）
"pages":[
"pages/index/index",
"pages/logs/logs"
],
// 窗口設置
"window":{
// 頂部導航欄背景色，必須是十六進制顏色值，如"#000000"
"navigationBarBackgroundColor": "#9ef468",
// 頂部導航欄顯示文字
"navigationBarTitleText": "組件展示",
// 導航欄文字顏色，僅支持 black/white
"navigationBarTextStyle": "black",
// 下拉背景的文字樣式，僅支持 dark/light
"backgroundTextStyle":"light",
// 下拉背景色，必須是十六進制顏色值，如"#000000"
"backgroundColor": "#333",
// 是否開啟下拉刷新
"enablePullDownRefresh": true,
// 距離最底端觸多少距離時觸發(fā)觸底事件，單位px
"onReachBottomDistance": 40
},
//網(wǎng)絡請求過期時間，單位毫秒
"networkTimeout": {
// 普通ajax請求
"request": 20000,
// Socket請求
"connectSocket": 20000,
// 文件上傳
"uploadFile": 20000,
// 文件下載
"downloadFile": 20000
},
// tab導航欄
"tabBar": {
// 文字的顏色
"color": "#999",
// 選中時文字的顏色
"selectedColor": "#000",
// 背景色
"backgroundColor": "#fff",
// 上邊框的顏色，僅支持 black/white
"borderStyle": "black",
// tab導航欄顯示在底部還是頂部(頂部不顯示圖片)
"position": "bottom",
// 導航欄列表項
"list": [{
// 導航到的頁面路徑
"pagePath": "pages/index/index",
// tab按鈕上的文字
"text": "組件",
// 圖片路徑
"iconPath": "img/com-l.png",
// 選中后顯示的圖片
"selectedIconPath": "img/com-d.png"
},{
"pagePath": "pages/logs/logs",
"text": "API",
"iconPath": "img/api-l.png",
"selectedIconPath": "img/api-d.png"
}]
},
// 調試信息
"debug": true
}
page.json （ 單頁面配置 ）
單頁面的json就是app.json的window字段，當加載到這個頁面時，此配置將覆蓋app.json
2. 生命周期小程序 App 生命周期
onLaunch ------ 小程序初始化完成時，觸發(fā)(只會調用一次)
onShow ------ 1. 小程序啟動 2. 從后臺進入前臺顯示，觸發(fā)
onHide ------ 當小程序從前臺進入后臺，觸發(fā)
onError ------ 1. 發(fā)生腳本錯誤 2. api 調用失敗，觸發(fā)并帶上錯誤信息
單頁面 Page 生命周期
onLoad ------ 頁面加載時，觸發(fā)(只會調用一次)
onShow ------ 頁面顯示時，觸發(fā)
onReady ------ 初次渲染完成時，觸發(fā)(只會調用一次)
onHide ------ 頁面隱藏時，觸發(fā)
onUnload ------ 頁面卸載時，觸發(fā)
詳細的生命周期分類：
1.小程序啟動：
App.onLaunch - -> App.onShow - -> 注冊app.json pages里的頁面(按索引順序) - -> 將app路由設置為首頁路由 - -> 首頁page參數(shù)深拷貝 - -> 初始化首頁 data - -> Page.onLoad - -> Page.onShow - -> Page.onReady
2.切后臺（app 和 page 生命周期重合）：
小程序被切到后臺 - -> page.onHide - -> App.onHide - -> 切回小程序 - -> App.onShow - -> page.onShow
3.跳轉頁面：
old 表示前一個頁面， new 表示新頁面
navigateTo跳轉 - -> 將路由設置為目標頁面路由 - -> old.onHide - -> 初始化頁面 data - -> new.onLoad - -> new.onShow - -> new.onReady
redirectTo重定向 - -> 設置路由 - -> old.onUnload - -> init data - -> new.onLoad - -> new.onShow - -> new.onReady
navigateBack頁面返回 - -> 設置路由 - -> old.onUnload - -> init data - -> new.onShow
reLaunch重啟動 - -> 設置路由 - -> old.onUnload - -> init data - -> new.onLoad - -> new.onShow - -> new.onReady
switchTabTab 切換（圖截自官方文檔）
3. 數(shù)據(jù)綁定和渲染數(shù)據(jù)綁定： { { message } }
渲染
列表渲染：
- wx:for=" { { message } } "
- wx:for-index="idx" （設置索引的變量名，默認 index ）
- wx:for-item="itemName"（設置每一項的變量名，默認item ）
渲染塊：
條件渲染：
- wx:if="boolean" - wx:elif="boolean" -wx:else="boolean" == (if - else if - if) - hidden="boolean"4. 模板（template） 基本用法
( 定義代碼片段，可以在不同的地方調用，使用 name 屬性，作為模板的名字,調用時使用 is 屬性 )
// 源碼（需要和調用的頁面在同一個wxml里）進階用法I am {{ name }} // 調用 // js 數(shù)據(jù) Page({ data: { message: { name: "海洋餅干" } } })
當時很多的頁面都需要同一個模板時，就需要模板導入了
先在pages文件夾中新建一個template文件夾，文件夾中新建一個template.wxml文件
// template.wxmlI am {{ name }}
// page.wxml 調用5. 事件 事件列表// js 數(shù)據(jù) Page({ data: { message: { name: "海洋餅干" } } })
點擊 事件
點擊事件 tap
長按事件（超過0.35秒） longpress
觸摸 事件
觸摸開始 touchstart
觸摸后開始移動 touchmove
觸摸后被打斷 touchcancel
觸摸結束 touchend
動畫 事件
過渡完成時觸發(fā) transitionend
動畫開始時觸發(fā) animationstart
一次迭代結束時觸發(fā) animationiteration
動畫完成時觸發(fā) animationend
事件冒泡，事件捕獲綁定事件 + 冒泡：bind + 事件名 , 如 bindtap
綁定事件 + 阻止冒泡：catch + 事件名 , 如 catchtap
捕獲 + 冒泡：capture-bind: + 事件名 , 如 capture-bind:tap
捕獲 + 中斷事件 + 取消冒泡：capture-catch: + 事件名 , 如 capture-catch:tap
事件對象
BaseEvent（ 基礎事件，所有事件的父類 ）
type （ String - 事件類型 ）
timeStamp （ Integer - 事件生成時的時間戳 ）
target （ Object - 觸發(fā)事件的組件的屬性 ）
id （ String - 事件源的id ）
tagName （ String - 當前組件的類型 ）
dataset （ Object - 事件源組件上由data-開頭的自定義屬性集合 ）
currentTarget （ Object - 當前組件的屬性 ）
同 target
TouchEvent （ 觸摸事件 ）
touches （ Array 停留在屏幕中的觸摸點的信息對象集合 ）
identifier （ Number - 觸摸點的標識符 ）
pageX （ Number - 距文檔左上角 x 軸的距離 ）
pageY （ Number 距文檔左上角 y 軸的距離 ）
clientX （ Number 距頁面可顯示區(qū)域 x 軸的距離 ）
clientY （ Number 距頁面可顯示區(qū)域 y 軸的距離 ）
changedTouches （ Array 變化的觸摸點信息對象集合 ）
CustomEvent （ 自定義事件 ）
detail （ Object - 自定義事件額外的信息 ）
6. wxs 模塊wxs 文件就是 js 文件，引入 wxs 文件就是引入一個 js 模塊( 不能用es6 )，現(xiàn)有兩種引入方式
在 wxml 里引用，使用
1.1. module 必填，為當前模塊的模塊名
1.2. src 選填，引用 .wxs 文件的相對路徑（僅當標簽為 單閉合標簽 或 標簽的內容為空 時有效）
1.3. 例
引入：自己擼： var foo = "海洋餅干" module.exports = { foo }
在 wxs 里引用，使用 require 引用
2.1. 例 var tools = require("./tools.wxs")
微信版的 css ，幾個不同的地方
添加 自適應尺寸單位 ( rpx )
添加 導入外聯(lián)樣式 ( @import )
精減 css選擇器，只支持
類選擇器 .class
id選擇器 #id
標簽選擇器 element
兄弟選擇器 element1，element2
偽元素選擇器 只支持兩種 ::after ::before
8. 自定義組件 使用自定義組件
創(chuàng)建自定義組件（ 類似于page,但需要在 json 文件中將 component 字段設為 true ）
{
"component": true
}
創(chuàng)建組件構造器 （ 構造函數(shù)不是page(),而是Component() ）
Component({
// 組件的對外屬性（父組件傳的數(shù)據(jù)）
properties: {
msg: {
type: String,
value: "msg",
// 父組件值改變時觸發(fā)的回調
observer: () => {
console.log("i am change")
}
}
},
data: {
componentData: {}
},
})
使用自定義組件（ 先要在頁面的 json 文件中進行引用聲明 ）
// 先引用聲明
"usingComponents": {
// hybg 標簽名
"hybg": "../component/component" // 相對路徑
}
// 直接使用，需要的話要綁定數(shù)據(jù)
slot 模板
1. 單 solt
```
// component
// page ( hybg 是上面的組件標簽名)
page 的 slot
// 效果
page 的 slot
```
2. 多slot
```
// 先在 Component 的 js 中添加
options: {
// 啟用多slot
multipleSlots: true
},
// 多 slot 需要使用不同的 name 來區(qū)分
// page ( hybg 是上面的組件標簽名)
first -- slot
last-- slot
// 效果
first -- slot
last-- slot
```
父子組件事件(子組件傳值)
// page
fatherEvent: function(e){
console.log(e.detail) // 組件傳遞的自定義信息
}
觸發(fā) hybgEvent 事件
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51885.html
摘要：配置配置全解析項目配置文件文件描述項目配置文件項目代碼配置是否檢查域名安全性和版本是否將項目的代碼轉成是否自動補全兼容前綴是否壓縮代碼是否啟用新功能編譯方式版本號項目名項目配置搜索關鍵字客服編譯方式小程序配置項目路由設置第一項為首頁窗 1. 配置 配置全解析 project.config.json ( 項目配置文件 ) { // 文件描述 description: 項目...
摘要：配置配置全解析項目配置文件文件描述項目配置文件項目代碼配置是否檢查域名安全性和版本是否將項目的代碼轉成是否自動補全兼容前綴是否壓縮代碼是否啟用新功能編譯方式版本號項目名項目配置搜索關鍵字客服編譯方式小程序配置項目路由設置第一項為首頁窗 1. 配置 配置全解析 project.config.json ( 項目配置文件 ) { // 文件描述 description: 項目...
摘要：十年鏟碼，八大體系超千篇數(shù)百萬字技術筆記系列匯總悅享版十年鏟碼兩茫茫，縱思量，卻易忘不覺筆者步入程序員已有十年。十年之期，正巧筆者從阿里離開，重回打印制造業(yè)的懷抱，希望能依托于設備優(yōu)勢逐步真正構建分布式制造網(wǎng)絡。 showImg(https://segmentfault.com/img/remote/1460000020151971); 十年鏟碼，八大體系超千篇數(shù)百萬字技術筆記系列匯總...
閱讀 1702·2021-11-18 10:02
閱讀 2218·2021-11-15 11:38
閱讀 2666·2019-08-30 15:52
閱讀 2190·2019-08-29 14:04
閱讀 3231·2019-08-29 12:29
閱讀 2086·2019-08-26 11:44
閱讀 994·2019-08-26 10:28
閱讀 830·2019-08-23 18:37
