1,历史和哈希
路由的意义就在于——改变视图的同时不会向后端发出请求
就是为了单页面应用的,历史模式就是地址栏正常显示,hash模式就是根据地址栏的锚点#来进行操作
hash模式和history模式都是属于浏览器自身的特性,Vue-Router只是利用了这两个特性(通过调用浏览器提供的接口)来实现前端路由,前端路由就是单页面应用,视图改变但是不请求后端,只是跳了个页面,不是重新打开
2,hello-uniapp模板的自带功能
有空就应该多研究一下自带模板的功能,都是整好的,很有用
input加个focus就可以自动获得焦点
<input class="uni-input" focus placeholder="自动获得焦点" />
3,input的一些事件和属性
placeholder 占位符
placeholder-style 样式
disabled 禁用
maxlength 最大输入长度
confirm-type 设置键盘右下角按钮的文字,仅在 type="text" 时生效 反正我试的时候无事发生
@input 当键盘输入时,触发input事件,event.detail = {value}
@focus 输入框聚焦时触发,event.detail = { value, height },height 为键盘高度
@blur 失焦时触发
@confirm 点击完成按钮时触发
@keyboardheightchange 键盘高度发生变化的时候触发此事件 这个预感应该很有用 但是没用过
4,在H5端的兼容
条件编译调用 HTML5+
小程序及 H5 等平台是没有 HTML5+ 扩展规范的,因此在 uni-app 调用 HTML5+ 的扩展规范时,需要注意使用条件编译。否则运行到h5、小程序等平台会出现 plus is not defined错误。
// #ifdef APP-PLUS
var appid = plus.runtime.appid;
console.log('应用的 appid 为:' + appid);
// #endif
uni-app不需要 plus ready
在html中使用plus的api,需要等待plus ready。 而uni-app不需要等,可以直接使用。而且如果你调用plus ready,反而不会触发。
uni-app 中的事件监听
在普通的 H5+ 项目中,需要使用 document.addEventListener 监听原生扩展的事件。
uni-app 中,没有 document。可以使用 plus.globalEvent.addEventListener 来实现(注意manifest中需开启新编译器,即自定义组件模式"usingComponents":true)。
// #ifdef APP-PLUS
// 监听设备网络状态变化事件
plus.globalEvent.addEventListener('netchange', function(){});
// #endif
同理,在 uni-app 中使用 Native.js 时,一些 Native.js 中对于原生事件的监听同样需要按照上面的方法去实现。
注意:旧编译器(非自定义组件模式)不支持 plus.globalEvent 这个对象。
5,vue.js开关灯
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.box{
width: 100px;
height: 100px;
background-color: blue;
}
.box2{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<body>
<div id="app">
<p class="box" v-if="!flag">1</p>
<p class="box2" v-else>2</p>
<button @click="check">click</button>
</div>
<script>
const vm = new Vue({
el:'#app',
data() {
return {
flag:false
}
},
methods: {
check(){
this.flag = !this.flag
}
},
})
</script>
</body>
</html>
6,scss在uniapp中的使用
hbuilderX中直接安装插件
<style lang="scss">
用scss主要是为了用它的全局颜色变量
7,动态改变scss中的颜色变量
uni.scss文件
$wx:var(--testColor,#09BB07);
//改变样式颜色
changeColor(){
document.getElementsByTagName('body')[0].style.setProperty('--testColor', '#027aff');
},
用这样的方法可以改变页面的样式变量
8,stop修饰符
阻止冒泡事件发生