uniapp
視圖層： wx小程序轉(zhuǎn)uniapp
:style="`{transform: translate(${topMove}px,0)}`" //小程序不支持這個(gè)寫法
:style="{transform: `translate(${topMove}px,0)`} // 兼容
屬性綁定：
attr="{{ msg }}"
:attr="msg"
title="復(fù)選框{{ index}}"
:title="'復(fù)選框' + index"
事件綁定：
bindtap="eventFn" data-id
@tap="eventFn(id)" （uni也支持data）
catchtap="eventFn"
@tap.stop="eventFn" (阻止事件冒泡)
邏輯判斷wx:if 改為 v-if
wx:for="{{ list }}" wx:key="{{ index }}"
v-for="(item,index) in list"
原事件命名以短橫線分隔的需要手動(dòng)修改小程序組件源碼為駝峰命名，比如：this.emit(′left−click′)修改為this.emit(′left−click′)修改為this.emit('leftClick')
用index做兼容h5和小程序端
在H5平臺(tái) 使用 v-for 循環(huán)整數(shù)時(shí)和其他平臺(tái)存在差異，如 v-for="(item, index) in 10" 中，在H5平臺(tái) item 從 1 開始，其他平臺(tái) item 從 0 開始，可使用第二個(gè)參數(shù) index 來保持一致。
在非H5平臺(tái) 循環(huán)對(duì)象時(shí)不支持第三個(gè)參數(shù)，如 v-for="(value, name, index) in object" 中，index 參數(shù)是不支持的。
跨度編譯
h5： <!-- --> JS: (n => not) #ifdef #ifend
#ifndef #ifend
css: /**/
https://www.cnblogs.com/qisi007/
生命周期
onPageScroll 監(jiān)聽頁面滾動(dòng)（e.scrollTop），可以用uni.pageScrollTo()滾到指定位置
（ios端的微信瀏覽器軟盤頂起后頁面頂起，收起軟盤后出現(xiàn)，可在失焦事件加uni.pageScrollTo(),滾動(dòng)到0）
onReachBottom頁面上拉觸底事件（可用于加載分頁）、
onPullDownRefresh 監(jiān)聽用戶下拉動(dòng)作（可用于下拉刷新）
onShareAppMessage 分享小程序
0.獲取節(jié)點(diǎn)（https://uniapp.dcloud.io/api/ui/nodes-info?id=nodesref）
SelectorQuery 和NodesRef 對(duì)象
letSelectorQuery =uni.createSelectorQuery(); // 組件調(diào)用需要加.in(component) => SelectorQuery.in(this)
letNodesRef =selectorQuery.select('.kkkkk'); selectAll('.kkkk')/selectViewport()
NodesRef 子方法 fields / boundingClientRect / scrollOffset / content/node(canvas)
.exec(callback) 最后執(zhí)行的
uniapp小程序支付app 支付
1.
// 支付寶url地址漢字要轉(zhuǎn)義漢字
function encodeURIForChinese(url) {
let chineseArray = url.match(/[^x00-xff]+/ig);
for (let i = chineseArray.length - 1; i >= 0; i--) {
url = url.replace(chineseArray[i], encodeURIComponent(chineseArray[i]));
}
return url;
}
2.
uniapp支持方法名傳參
① <view @tap="goBack(11)"></view>
② <view @tap="goBack" data-id="11"></view> 微信（2.7.0測(cè)試）不支持方法傳參，只能通過data-*
3.
①.屏幕高度=狀態(tài)欄高度+原生導(dǎo)航欄高度+可使用窗口高度+原生tabbar高度(screenHeight > windowHeight)
screenHeight =statusBarHeight +navigationBarHeight +windowHeight +原生tabbar高度
②.H5端，windowHeight不包含NavigationBar和TabBar的高度，windowTop等于NavigationBar高度，windowBottom等于TabBar高度，statusBarHeight為0
4.globalData
h5 app.vu用this.globalData
小程序用 this.$scope.globalData
5
let route = getCurrentPages()[getCurrentPages().length - 1].route;
let options = getCurrentPages()[getCurrentPages().length - 1]['option'] ? getCurrentPages()[getCurrentPages().length - 1]['option'] : getCurrentPages()[getCurrentPages().length - 1]['options']; // h5和小程序兼容
6
app.vue調(diào)用globalData（不能直接用this.globalData（小程序端，h5支持），用this.$scope.globalData）
0.不要在定義于 App() 內(nèi)的函數(shù)中，或調(diào)用 App 前調(diào)用 getApp() ，可以通過 this.$scope 獲取對(duì)應(yīng)的app實(shí)例
1.通過 getApp() 獲取實(shí)例之后，不要私自調(diào)用生命周期函數(shù)
2.如果需要把globalData的數(shù)據(jù)綁定到頁面上，可在頁面的onShow頁面生命周期里進(jìn)行變量重賦值。
7
h5手機(jī)鍵盤彈出收起的處理
https://segmentfault.com/a/1190000021622684
uni.pageScrollTo({scrollTop: 0}) （微信h5收不回鍵盤之前的占位）
8.
支付寶不支持字符串富文本 (兼容：nodes只能用Array類型)
https://ask.dcloud.net.cn/article/35772
9.
uniapp支付寶不支持v-show
10.分享只分享按鈕
onLoad() {
uni.hideShareMenu()
},
onShareAppMessage (e) {
if (e.from === 'button') {
console.log('來自頁面內(nèi)分享按鈕')
return {
title,
path,
imageUrl,
success(res) {
console.log('onShareAppMessage',res)
}
}
}
},
11.uniapp用vuex(uniapp內(nèi)置vuex)
1.在根目錄創(chuàng)建目錄store,里面建個(gè)index.js文件和mutation-type.js文件
import Vue from 'vue' import Vuex from 'vuex'
import * as TYPE from '@/store/mutation-type.js'
Vue.use(Vuex) const store = new Vuex.Store({ state: {}, mutations: {[TYPE.GETLOGIN](state, data){}}, actions: {} }) export default store // index.js
// mutation-types.js 這里寫mutation的方法名，避免沖突，報(bào)錯(cuò)可尋，方便查找 全部大寫并使用下劃線連接單詞。 export constGETLOGIN = 'GETLOGIN'
2.main.js掛載vuex
import Vue from 'vue'
import App from './App'
//引入vuex
import store from './store'
//把vuex定義成全局組件
Vue.prototype.$store = store
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App,
//掛載
store
})
app.$mount()
3.在單頁面里使用vuex
<script>
import {mapState, mapMutations} from 'vuex'
export default {
created () {
console.log(this.$store)
}
}
</script>
注意事項(xiàng)
使用 Vue.js 注意事項(xiàng)：https://uniapp.dcloud.io/use uniapp 使用vue.js注意事項(xiàng)：https://blog.csdn.net/qq_37939251/article/details/93423195 uniapp開發(fā)中的一些問題：https://ask.dcloud.net.cn/people/DCloud_UNI_FXY
1-5
1.data-addId 微信小程序識(shí)別是addid(不能區(qū)分大小寫),支付寶小程序可以識(shí)別addId (區(qū)分大小寫) 2.自定義組件(即引入的組件)不能用頁面生命周期，只能用vue生命周期 3.static 目錄下的 js 文件不會(huì)被編譯，如果里面有 es6 的代碼，不經(jīng)過轉(zhuǎn)換直接運(yùn)行，在手機(jī)設(shè)備上會(huì)報(bào)錯(cuò) 4.若需要禁止蒙版下的頁面滾動(dòng)，可使用 @touchmove.stop.prevent="moveHandle"，moveHandle 可以用來處理 touchmove 的事件，也可以是一個(gè)空函數(shù)。 5.router同小程序，不支持vue router（新版有了），跳轉(zhuǎn)api和wx小程序相同
6-10
6.判斷環(huán)境開發(fā)和生產(chǎn)環(huán)境：process.env.NODE_ENV === 'development'|'production' （快捷鍵：uEnvDev、uEnvProd）uni.getSystemInfoSync().platform判斷平臺(tái) 7.只支持px/rpx（早期提供upx，現(xiàn)在統(tǒng)一改為rpx）；rpx不支持動(dòng)態(tài)橫豎屏切換計(jì)算，使用rpx建議鎖定屏幕方向；寬度: 750*元素寬度/設(shè)計(jì)稿總寬度（換算工具h(yuǎn)ttps://ask.dcloud.net.cn/article/35445） 8.在 uni-app 中不能使用 * 選擇器 page 相當(dāng)于 body 節(jié)點(diǎn) 9.uni-app編譯器把es6語法自動(dòng)轉(zhuǎn)es5,其他平臺(tái)不需要開啟或轉(zhuǎn)義... （但要找xbuilder安裝插件） 10.請(qǐng)勿使用小程序端的bind 和 catch 進(jìn)行事件綁定，用tap等
11-15
11.全局變量：vue.protytyep、vuex、globalData、公用模板：https://ask.dcloud.net.cn/article/35021 12。非H5端不支持 Vue官方文檔：Class 與 Style 綁定 中的 classObject 和 styleObject 語法（activeClass: { 'active': true, 'text-danger': false }）；非H5端暫不支持在自定義組件上使用 Class 與 Style 綁定 13.H5 的select 標(biāo)簽用 picker 組件進(jìn)行代替 14.非h5不支持v-html，用rich-text且支付寶不支持nodes為字符串格式（string也是轉(zhuǎn)為array，string性能不好）（https://ask.dcloud.net.cn/article/35772），uniapp不支持v-show； 15.用@不要用tap,不兼容？
16-20
16.在H5平臺(tái) 使用 v-for 循環(huán)整數(shù)時(shí)和其他平臺(tái)存在差異，如 v-for="(item, index) in 10" 中，在H5平臺(tái) item 從 1 開始，其他平臺(tái) item 從 0 開始，可使用第二個(gè)參數(shù) index 來保持一致。 在非H5平臺(tái) 循環(huán)對(duì)象時(shí)不支持第三個(gè)參數(shù)，如 v-for="(value, name, index) in object" 中，index 參數(shù)是不支持的 17.若需要禁止蒙版下的頁面滾動(dòng)，可使用 @touchmove.stop.prevent="moveHandle"，moveHandle 可以用來處理 touchmove 的事件，也可以是一個(gè)空函數(shù)。 18.使用Typescript需要再script加lang="ts"，且只能用ts 19.CSS變量： --status-bar-height 系統(tǒng)狀態(tài)高度 --window-top 內(nèi)容區(qū)域距離頂部的距離 --window-bottom 內(nèi)容區(qū)域距離底部的距離 20. 當(dāng)需要在 vue 組件中使用小程序組件時(shí)，注意在 pages.json 的 globalStyle 中配置 usingComponents，而不是頁面級(jí)配置。
21-25
21.所有組件與屬性名都是小寫，單詞之間以連字符-連接 所有組件都有的屬性hidden 22.應(yīng)用生命周期即main.js, 有onLoaunch、onShow、onHideonUniViewMessage https://ask.dcloud.net.cn/question/71759 23.api: uni代替wx 24.static目錄下js不會(huì)被編譯，否則手機(jī)報(bào)錯(cuò) 25. 頁面文件遵循 Vue 單文件組件 (SFC) 規(guī)范 組件標(biāo)簽靠近小程序規(guī)范，詳見uni-app 組件規(guī)范 接口能力（JS API）靠近微信小程序規(guī)范，但需將前綴 wx 替換為 uni，詳見uni-app接口規(guī)范 數(shù)據(jù)綁定及事件處理同 Vue.js 規(guī)范，同時(shí)補(bǔ)充了App及頁面的生命周期 為兼容多端運(yùn)行，建議使用flex布局進(jìn)行開發(fā)
#####
uniapp 筆記
1.條件判斷 H5 MP-WEIXIN MP-ALIPAY MP-BAIDU #ifdef #endif #ifndef 2. Vue 單文件組件 (SFC) 規(guī)范https://vue-loader.vuejs.org/zh/spec.html vue通過設(shè)置lang引入scss<style lang='sass'></style> 每個(gè) .vue 文件包含三種類型的頂級(jí)語言塊 <template>、<script> 和 <style>，還允許添加可選的自定義塊 每個(gè) .vue 文件只有一個(gè) <template> 塊、只有一個(gè)<script>、可多個(gè)<style> 3. @import 引入樣式 import 組件名 from 組件地址
bug
零、stop
子和父都加stop, 觸發(fā)子元素只會(huì)觸發(fā)父元素，子元素相當(dāng)于不能觸發(fā) 即是給元素添加一個(gè)監(jiān)聽器，當(dāng)元素發(fā)生冒泡時(shí)，先觸發(fā)帶有該修飾符的元素。若有多個(gè)該修飾符，則由外而內(nèi)觸發(fā)。就是誰有該事件修飾符，就先觸發(fā)誰
一、view用z-index覆蓋不了image，可個(gè)image加塊級(jí)block;
vue
一、vue中事件修飾符詳解(stop, prevent, self, once, capture, passive)https://www.cnblogs.com/zheroXH/p/11578719.html
二、vuex
正確使用state(狀態(tài)）https://blog.csdn.net/zsy_snake/article/details/80860167 vuex中mutations為什么要寫成同步方法？https://www.jianshu.com/p/392cb1d0a301 state,getters,mutaitons,actions,module state相當(dāng)于data,getters相當(dāng)于computed,mutations和action相當(dāng)于methods 關(guān)于this.setState()的那些事https://www.jianshu.com/p/a883552c67de state存狀態(tài) 調(diào)用方法this.$store.state/(不要直接修改 this.$store.sate,不會(huì)渲染)、this.$store.setState(對(duì)象)，setState異步的話用setState(函數(shù)) mutations更改狀態(tài)，方法(推薦用同步) 調(diào)用mutations用commit同步 -> this.$store.commit('方法名',參數(shù)) getters 類似computed計(jì)算屬性,監(jiān)聽值的變化 module 分模塊 action（異步的mutations） 調(diào)用action用dispatch異步
三、插槽
https://www.cnblogs.com/chinabin1993/p/9115396.html 用slot替換組件里面的內(nèi)容 具名插槽就是給插槽取名字，分開傳
四、子傳父組件方法：作用域插槽
https://www.cnblogs.com/chinabin1993/p/9115396.html 父<template slot-scoped='a'></template> 打印a > {say: 'efe'}
子<slot say='efe'>
五
this.$emit("changeVisibleState",false); this.$emit觸發(fā)父組件引入的子組件的方法，并傳值給changeVisible <son @changeVisibleState="changeVisible" :visible="childShow"/> 父組件接受changeVisible里cahngVisible傳的值
.sync Update 父： <son :visible.sync="childShow"/> 子：this.$emit("update:visible",false); https://www.jianshu.com/p/b149f9fd8178
六、插件
Rate 評(píng)分4.5分的星星（https://ext.dcloud.net.cn/plugin?id=33）
colorui（https://github.com/weilanwl/ColorUI）
登錄鑒權(quán)-項(xiàng)目模板（https://ext.dcloud.net.cn/plugin?id=334）
uniapp插件市場(chǎng)（https://ext.dcloud.net.cn/）
總結(jié)
- 上一篇： serlvet中的过滤器filter
- 下一篇： 华三实现vlan通过