小程序
1.警告信息顯示與隱藏
project.config.json => setting => checkSiteMap （false / true）
2. App.json設置
創建文件和切換主頁面顯示 app.json => pages => ""
全局下拉刷新 app.json => window => "enablePullDownRefresh": true
下拉背景顏色配置 app.json => window => "backgroundColor" : "16進制顏色"
下拉文本顏色 app.json => window => "backgroundTextStyle": "dark / light"只能選其一
自定義tabBar
新建文件夾 custom-tab-bar => 右鍵新建component 必須是index
app.json 導航欄tabBar
"tabBar": {
"custom": true, // 照顧低版本得
"list": {
"pagePath": "當前頁的路徑",
"text": "當前頁的名稱",
"iconPath": "/沒點過的字體圖標",
"selectedIconPath": "/選中的時候字體圖標"
}
}
3.常用標簽
<view></view> == <div></div>
<text></text> == <span></span>
<image/> == <img/>
<navigator url="" /> == <a href="" />
<scroll-view> </scroll-view>滾動組件 需要配和 scorll-x 橫向滾動，scroll-y 縱向滾動
<swiper> <swiper-item></swiper-item> </swiper> 輪播圖
<navigator url="/" open-type="switchTab"> </navigator>(tarBar導航欄)聲明式導航
<navigator url="/"> </navigator> 非tabBar導航欄內可省略不寫open-type="switchTab"
編程式導航（tabBar導航欄）方法內 wx.switchTab({ url: '/路徑' })
編程式導航 (非tabBar導航欄) 方法內 wx.navigateTo({ url: '/路徑' })
4.事件
1.觸摸(點擊) 事件 bindtap 傳參 data-自定義="{{}}"
接收傳參 e.target.dataset.自定義
2.input 事件 bindinput
接收input的value e.detail.value
5.方法
- wx:if wx:elif wx:else 顯示與隱藏是操作DOM
- hidden 顯示與隱藏是操作 css樣式隱藏
- wx:for 是循環遍歷 wx:for-index="自定義index索引" wx:for-item="自定義item值"
6.生命周期
Page({
onLoad : function (options) { }, // 監聽頁面加載，一個頁面只調用一次
onShow : function () { }, // 監聽頁面顯示
onReady : function () { }, // 監聽也買你初次渲染，一個頁面只能調用一次
onHide : function () { }, // 監聽頁面隱藏
onUnload : function () { } // 監聽頁面卸載，一個頁面只能調用一次
})
7.wxs腳本 注意只能使用es5
內聯式定義
<wxs module="自定義"> module.export.方法名 = function (str) { return str.方法 }</wxs>
內聯式腳本使用 {{'自定義'.方法名( 待修改的狀態 )}}
外聯式定義
以.wxs的文件， 定義方法 module.exports = { 方法名: 方法名 } // 因為es5沒有簡寫所以必須寫全
外聯式調用 <wxs src="/路徑" module="自定義"></wxs> 使用跟內聯式一樣
注冊全局組件
app.json => "usingComponents": {
**"自定義組件名": "/ 組件的路徑"**
}
8.組件注意事項
1.properties 接收外面的狀態 === data 組件自己的狀態
2.方法都要寫在methods 如果要改對象中的某個數據 '對象.數據 ‘
3.組件中的監聽器 observers 與 methods同級
# '監聽的數據.**' 對象數據比較多的情況用通配符來
observers: {
'監聽的數據.**': function (obj) {
this.setState({
修改的數據: obj.**
})
}
}
9.組件的生命周期
// 組件的生命周期
lifetimes: {
created() {
},
attached() {
}
},
// 監聽組件的生命周期
pageLifetimes: {
show() {
頁面顯示進入此鉤子
}
hide() {
頁面隱藏進入此鉤子
}
}
10. 組件插槽 和 樣式隔離
optaions: {
multipleSlots: true, // 開啟多個插槽
styleIsolation: (apply-shared (頁面單方面影響組件樣式), shared(互相影響)) // 樣式隔離
}
11.組件父傳子，子傳父
// 父傳子
<子組件 子接收父親的變量="{{ 父親的data值 }}"></子組件>
子組件的js => properties: { 變量名: 類型 } // 接收的狀態值
// 子傳父
<子組件 bind:自定義事件名="父組件的方法"></子組件>
子組件內的js， this.triggerEvent('自定義事件名',{ 傳給父組件的 (對象) })
父組件的方法通過 e.detail.對象名 來獲取子傳父的值
// 獲取子組件的實例對象
<子組件 class="自定義" / id="自定義"></子組件>
父組件的方法內 (可以獲取子組件的實例對象)
const child = this.selectComponent('.自定義類') / ('#自定義id')
12.behavior 公共狀態
module.exports = Behavior({
// 屬性節點(接收外面傳來的數據)
properties: {},
// 私有數據
data: {},
// 事件處理函數和自定義方法節點
methods: {},
...
})
13.定義樣式變量
Page {
--開頭: 色域;
}
14.小程序的項目API promise化
app.js
import { promisifyAll } from 'miniprogram-api-promise' // 導入下載的包
const wxp = wx.p = {}
promisifyAll(wx,wxp)
15.Mobx
// store.js 創建 mobx
import { action, observable } from 'mobx-miniprogram' // 導入下載的包
export const store = observable({
// 狀態
(自定義): 1,
// 計算屬性
get 自定義() {
retrun this.num
}
// 方法
自定義: action(function (step) {
this.自定義 += step
})
})
// 在其他的頁面導入store js文件 (非組件內)
import { createStoreBindings } from 'mobx-miniprogram-bindings' // 導入下載的包
import { store } from '../../store/store'
Page({
// 生命周期 -- 監聽頁面加載
onLoad: function (options) {
this.storeBindings = createStoreBindings(this, {
store,
fields: ['numA','numB','sum'], // 數字字段，計算屬性
actions: ['updateNum1'] // 方法
})
},
// 生命周期 -- 監聽頁面卸載
onUnload: function () {
this.storeBindings.destoryStoreBindings()
},
})
// 組件內導入store
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings' // 導入下載的包
import { store } from '../../store/store'
Component({
behaviors: [storeBindingsBehavior],
storeBindings: {
store,
fields: { // 數字字段，計算屬性
numA: 'numA',
numB: 'numB',
sum: 'sum'
},
actions: {
updateNum2: 'updateNum2' // 方法
}
},
})
16.分包
// app.json 創建分包
"subPackages": [
{
"root": "自定義", // 分包的文件夾名
"pages": [
"pages/cat/cat" // 分包的子分包
],
"name": "起別名", // 分包的別名
"independent": true // 開啟獨立分包 (獨立分包不能使用主包的公共資源)
}
],
// 分包預下載
"preloadRule": {
"這是主包的子包路徑": {
"packages": ['分包的name / 或者root'],
"network": "all / wifi" // 指的是wifi下載分包,還是所有得網絡情況都下載分包
}
}
17.忽略git上傳文件
新建 .gitignore
忽略文件
/node_module
/unpackage/dist // 注意要將unpackage目錄下創建一個 .gitkeep
18.mixins 公共狀態數據
實例
mixins文件夾 => 自定義.js
// 創建
import {mapGetters} from 'vuex'
export default {
computed: {
...mapGetters('m_cart',['total'])
},
onShow() {
this.setBadge()
},
methods: {
setBadge() {
uni.setTabBarBadge({
index: 2,
text: this.total + ''
})
}
}
}
// 引用
import 自定義 from '@/mixins/自定義'
export default {
mixins: [tabBarMix]
}
