uniapp

2021-12-25 12:42:12

跨度编译

h5

#ifdef

#ifend

#ifndef

css /**/

https://www.cnblogs.com/qisi007/

生命周期

onPageScroll 监听页面滚动（e.scrollTop），可以用uni.pageScrollTo()滚到指定位置

（ios端的微信浏览器软盘顶起后页面顶起，收起软盘后出现，可在失焦事件加uni.pageScrollTo(),滚动到0）

onReachBottom 页面上拉触底事件（可用于加载分页）、

onPullDownRefresh 监听用户下拉动作（可用于下拉刷新）

onShareAppMessage 分享小程序

0.获取节点（https://uniapp.dcloud.io/api/ui/nodes-info?id=nodesref）

SelectorQuery 和 NodesRef 对象

let SelectorQuery = uni.createSelectorQuery(); // 组件调用需要加 .in(component) => SelectorQuery.in(this)

let NodesRef = selectorQuery.select(‘.kkkkk‘); selectAll(‘.kkkk‘)/selectViewport()　　　　

NodesRef 子方法 fields / boundingClientRect / scrollOffset / content/node(canvas)　　　　　　

.exec(callback) 最后执行的

uniapp小程序支付app 支付

// 支付宝url地址汉字要转义汉字
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;
}

uniapp支持方法名传参

① <view @tap="goBack(11)"></view>

② <view @tap="goBack" data-id="11"></view>　　　　微信（2.7.0测试）不支持方法传参，只能通过data-*

①.屏幕高度=状态栏高度+原生导航栏高度+可使用窗口高度+原生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

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和小程序兼容

app.vue调用globalData（不能直接用this.globalData（小程序端，h5支持），用this.$scope.globalData）
0.不要在定义于 App() 内的函数中，或调用 App 前调用 getApp() ，可以通过 this.$scope 获取对应的app实例
1.通过 getApp() 获取实例之后，不要私自调用生命周期函数
2.如果需要把globalData的数据绑定到页面上，可在页面的onShow页面生命周期里进行变量重赋值。

h5手机键盘弹出收起的处理
https://segmentfault.com/a/1190000021622684

uni.pageScrollTo({scrollTop: 0}) （微信h5收不回键盘之前的占位）

支付宝不支持字符串富文本 (兼容：nodes只能用Array类型)

https://ask.dcloud.net.cn/article/35772

uniapp支付宝不支持v-show

10.分享只分享按钮

onLoad() {
  uni.hideShareMenu()
},
onShareAppMessage (e) {
	if (e.from === ‘button‘) {
		console.log(‘来自页面内分享按钮‘)
		
		return {
			title,
			path,
			imageUrl,
			success(res) {
				console.log(‘onShareAppMessage‘,res)
			}
		}
	}
},

11.uniapp用vuex(uniapp内置vuex)

1.在根目录创建目录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 const GETLOGIN = ‘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开发中的一些问题：https://ask.dcloud.net.cn/people/DCloud_UNI_FXY

1-5

1.data-addId 微信小程序识别是addid(不能区分大小写),支付宝小程序可以识别addId (区分大小写) 2.自定义组件(即引入的组件)不能用页面生命周期，只能用vue生命周期 3.static 目录下的 js 文件不会被编译，如果里面有 es6 的代码，不经过转换直接运行，在手机设备上会报错 4.若需要禁止蒙版下的页面滚动，可使用 @touchmove.stop.prevent="moveHandle"，moveHandle 可以用来处理 touchmove 的事件，也可以是一个空函数。 5.router同小程序，不支持vue router（新版有了），跳转api和wx小程序相同

6-10

6.判断环境开发和生产环境：process.env.NODE_ENV === ‘development‘|‘production‘ （快捷键：uEnvDev、uEnvProd）uni.getSystemInfoSync().platform判断平台 7.只支持px/rpx（早期提供upx，现在统一改为rpx）；rpx不支持动态横竖屏切换计算，使用rpx建议锁定屏幕方向；宽度: 750*元素宽度/设计稿总宽度（换算工具https://ask.dcloud.net.cn/article/35445） 8.在 uni-app 中不能使用 * 选择器 page 相当于 body 节点 9.uni-app编译器把es6语法自动转es5,其他平台不需要开启或转义... （但要找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也是转为array，string性能不好）（https://ask.dcloud.net.cn/article/35772），uniapp不支持v-show； 15.用@不要用tap,不兼容？

16-20

16.在H5平台使用 v-for 循环整数时和其他平台存在差异，如 v-for="(item, index) in 10" 中，在H5平台 item 从 1 开始，其他平台 item 从 0 开始，可使用第二个参数 index 来保持一致。在非H5平台循环对象时不支持第三个参数，如 v-for="(value, name, index) in object" 中，index 参数是不支持的 17.若需要禁止蒙版下的页面滚动，可使用 @touchmove.stop.prevent="moveHandle"，moveHandle 可以用来处理 touchmove 的事件，也可以是一个空函数。 18.使用Typescript需要再script加lang="ts"，且只能用ts 19.CSS变量： --status-bar-height 系统状态高度 --window-top 内容区域距离顶部的距离 --window-bottom 内容区域距离底部的距离 20. 当需要在 vue 组件中使用小程序组件时，注意在 pages.json 的 globalStyle 中配置 usingComponents，而不是页面级配置。

21-25

21.所有组件与属性名都是小写，单词之间以连字符-连接所有组件都有的属性hidden 22.应用生命周期即main.js, 有onLoaunch、onShow、onHideonUniViewMessage https://ask.dcloud.net.cn/question/71759 23.api: uni代替wx 24.static目录下js不会被编译，否则手机报错 25. 页面文件遵循 Vue 单文件组件 (SFC) 规范组件标签靠近小程序规范，详见uni-app 组件规范接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期为兼容多端运行，建议使用flex布局进行开发

#####

uniapp 笔记

1.条件判断 H5 MP-WEIXIN MP-ALIPAY MP-BAIDU #ifdef #endif #ifndef 2. Vue 单文件组件 (SFC) 规范https://vue-loader.vuejs.org/zh/spec.html vue通过设置lang引入scss<style lang=‘sass‘></style> 每个 .vue 文件包含三种类型的*语言块 <template>、<script> 和 <style>，还允许添加可选的自定义块每个 .vue 文件只有一个 <template> 块、只有一个<script>、可多个<style> 3. @import 引入样式 import 组件名 from 组件地址

bug

零、stop

子和父都加stop, 触发子元素只会触发父元素，子元素相当于不能触发即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。就是谁有该事件修饰符，就先触发谁

一、view用z-index覆盖不了image，可个image加块级block;

vue

一、vue中事件修饰符详解(stop, prevent, self, once, capture, passive)https://www.cnblogs.com/zheroXH/p/11578719.html

二、vuex

正确使用state(状态）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 关于this.setState()的那些事https://www.jianshu.com/p/a883552c67de state存状态调用方法this.$store.state/(不要直接修改 this.$store.sate,不会渲染)、this.$store.setState(对象)，setState异步的话用setState(函数) mutations更改状态，方法(推荐用同步) 调用mutations用commit同步 -> this.$store.commit(‘方法名‘,参数) getters 类似computed计算属性,监听值的变化 module 分模块 action（异步的mutations）调用action用dispatch异步

三、插槽

https://www.cnblogs.com/chinabin1993/p/9115396.html 用slot替换组件里面的内容具名插槽就是给插槽取名字，分开传

四、子传父组件方法：作用域插槽

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触发父组件引入的子组件的方法，并传值给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