不积跬步无以至千里006

最新推荐文章于 2023-03-06 10:50:32 发布

寒冰射手杨百亿

最新推荐文章于 2023-03-06 10:50:32 发布

阅读量142

点赞数

分类专栏：笔记文章标签： js vue uni-app

本文链接：https://blog.csdn.net/ybyshezhang/article/details/109829091

版权

笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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修饰符

阻止冒泡事件发生

9，添加了图片文件，git提交的时候记得一定要勾选上

寒冰射手杨百亿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
不积跬步无以至千里006

1，历史和哈希路由的意义就在于——改变视图的同时不会向后端发出请求就是为了单页面应用的，历史模式就是地址栏正常显示，hash模式就是根据地址栏的锚点#来进行操作hash模式和history模式都是属于浏览器自身的特性，Vue-Router只是利用了这两个特性（通过调用浏览器提供的接口）来实现前端路由,前端路由就是单页面应用，视图改变但是不请求后端，只是跳了个页面，不是重新打开2，hello-uniapp模板的自带功能有空就应该多研究一下自带模板的功能，都是整好的，很有用input加个focus就
复制链接

扫一扫