uniapp
視圖層： wx小程序轉(zhuǎn)uniapp
:style="`{transform: translate(${topMove}px,0)}`" //小程序不支持這個寫法
:style="{transform: `translate(${topMove}px,0)`} // 兼容
屬性綁定：
attr="{{ msg }}"
:attr="msg"
title="復選框{{ index}}"
:title="'復選框' + 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"
原事件命名以短橫線分隔的需要手動修改小程序組件源碼為駝峰命名，比如：this.emit(′left−click′)修改為this.emit(′left−click′)修改為this.emit('leftClick')
用index做兼容h5和小程序端
在H5平臺 使用 v-for 循環(huán)整數(shù)時和其他平臺存在差異，如 v-for="(item, index) in 10" 中，在H5平臺 item 從 1 開始，其他平臺 item 從 0 開始，可使用第二個參數(shù) index 來保持一致。
在非H5平臺 循環(huán)對象時不支持第三個參數(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)聽頁面滾動（e.scrollTop），可以用uni.pageScrollTo()滾到指定位置
（ios端的微信瀏覽器軟盤頂起后頁面頂起，收起軟盤后出現(xiàn)，可在失焦事件加uni.pageScrollTo(),滾動到0）
onReachBottom頁面上拉觸底事件（可用于加載分頁）、
onPullDownRefresh 監(jiān)聽用戶下拉動作（可用于下拉刷新）
onShareAppMessage 分享小程序
0.獲取節(jié)點（https://uniapp.dcloud.io/api/ui/nodes-info?id=nodesref）
SelectorQuery 和NodesRef 對象
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測試）不支持方法傳參，只能通過data-*
3.
①.屏幕高度=狀態(tài)欄高度+原生導航欄高度+可使用窗口高度+原生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 獲取對應(yīng)的app實例
1.通過 getApp() 獲取實例之后，不要私自調(diào)用生命周期函數(shù)
2.如果需要把globalData的數(shù)據(jù)綁定到頁面上，可在頁面的onShow頁面生命周期里進行變量重賦值。
7
h5手機鍵盤彈出收起的處理
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,里面建個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的方法名，避免沖突，報錯可尋，方便查找 全部大寫并使用下劃線連接單詞。 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>
注意事項
使用 Vue.js 注意事項：https://uniapp.dcloud.io/use uniapp 使用vue.js注意事項：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 微信小程序識別是addid(不能區(qū)分大小寫),支付寶小程序可以識別addId (區(qū)分大小寫) 2.自定義組件(即引入的組件)不能用頁面生命周期，只能用vue生命周期 3.static 目錄下的 js 文件不會被編譯，如果里面有 es6 的代碼，不經(jīng)過轉(zhuǎn)換直接運行，在手機設(shè)備上會報錯 4.若需要禁止蒙版下的頁面滾動，可使用 @touchmove.stop.prevent="moveHandle"，moveHandle 可以用來處理 touchmove 的事件，也可以是一個空函數(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判斷平臺 7.只支持px/rpx（早期提供upx，現(xiàn)在統(tǒng)一改為rpx）；rpx不支持動態(tài)橫豎屏切換計算，使用rpx建議鎖定屏幕方向；寬度: 750*元素寬度/設(shè)計稿總寬度（換算工具https://ask.dcloud.net.cn/article/35445） 8.在 uni-app 中不能使用 * 選擇器 page 相當于 body 節(jié)點 9.uni-app編譯器把es6語法自動轉(zhuǎn)es5,其他平臺不需要開啟或轉(zhuǎn)義... （但要找xbuilder安裝插件） 10.請勿使用小程序端的bind 和 catch 進行事件綁定，用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 標簽用 picker 組件進行代替 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平臺 使用 v-for 循環(huán)整數(shù)時和其他平臺存在差異，如 v-for="(item, index) in 10" 中，在H5平臺 item 從 1 開始，其他平臺 item 從 0 開始，可使用第二個參數(shù) index 來保持一致。 在非H5平臺 循環(huán)對象時不支持第三個參數(shù)，如 v-for="(value, name, index) in object" 中，index 參數(shù)是不支持的 17.若需要禁止蒙版下的頁面滾動，可使用 @touchmove.stop.prevent="moveHandle"，moveHandle 可以用來處理 touchmove 的事件，也可以是一個空函數(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. 當需要在 vue 組件中使用小程序組件時，注意在 pages.json 的 globalStyle 中配置 usingComponents，而不是頁面級配置。
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不會被編譯，否則手機報錯 25. 頁面文件遵循 Vue 單文件組件 (SFC) 規(guī)范 組件標簽靠近小程序規(guī)范，詳見uni-app 組件規(guī)范 接口能力（JS API）靠近微信小程序規(guī)范，但需將前綴 wx 替換為 uni，詳見uni-app接口規(guī)范 數(shù)據(jù)綁定及事件處理同 Vue.js 規(guī)范，同時補充了App及頁面的生命周期 為兼容多端運行，建議使用flex布局進行開發(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> 每個 .vue 文件包含三種類型的頂級語言塊 <template>、<script> 和 <style>，還允許添加可選的自定義塊 每個 .vue 文件只有一個 <template> 塊、只有一個<script>、可多個<style> 3. @import 引入樣式 import 組件名 from 組件地址
bug
零、stop
子和父都加stop, 觸發(fā)子元素只會觸發(fā)父元素，子元素相當于不能觸發(fā) 即是給元素添加一個監(jiān)聽器，當元素發(fā)生冒泡時，先觸發(fā)帶有該修飾符的元素。若有多個該修飾符，則由外而內(nèi)觸發(fā)。就是誰有該事件修飾符，就先觸發(fā)誰
一、view用z-index覆蓋不了image，可個image加塊級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相當于data,getters相當于computed,mutations和action相當于methods 關(guān)于this.setState()的那些事https://www.jianshu.com/p/a883552c67de state存狀態(tài) 調(diào)用方法this.$store.state/(不要直接修改 this.$store.sate,不會渲染)、this.$store.setState(對象)，setState異步的話用setState(函數(shù)) mutations更改狀態(tài)，方法(推薦用同步) 調(diào)用mutations用commit同步 -> this.$store.commit('方法名',參數(shù)) getters 類似computed計算屬性,監(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 評分4.5分的星星（https://ext.dcloud.net.cn/plugin?id=33）
colorui（https://github.com/weilanwl/ColorUI）
登錄鑒權(quán)-項目模板（https://ext.dcloud.net.cn/plugin?id=334）
uniapp插件市場（https://ext.dcloud.net.cn/）
總結(jié)
- 上一篇： serlvet中的过滤器filter
- 下一篇： IDEA里设置蓝色加大加粗超拉风注释字体