美文网首页
uni-app学习

uni-app学习

作者: 废弃的种子 | 来源:发表于2020-04-29 11:22 被阅读0次

    hcoder
    uview-ui——偏向webvie渲染的UI框架
    dnvue——只适用于nvue页面APP(android/ios)

    填坑之路

    • 弹性布局在uni-app的scroll-view中默认是垂直的; 改变flex-direction: row;
    • 单位最好用rpx,upx有时嵌入式的style不支持
    • 不支持 *选择器
    • 没有body元素选择器,改用page元素选择器。(编译到非H5时,编译器会自动处理。所以不改也行)
    • 没有在page.json注册的页面无法使用其生命周期
    • 样式绑定不支持方法

    学习之路

    • 新建一个项目时,当前登陆的邮箱账号即为当前项目所归属的账号。后期可以转以该项目的所有者。
    • uni-app项目中默认内置了Vuex,不用安装,直接使用即可


      image.png
    • 路由问题可以使用两种方式解决,看我的另外一篇。
    • 调用一些原生功能也可以直接使用plus(H5+),uni-app内可以直接使用 ,不用ready后
    • 使用了微信登陆或者一些三方的东西,需要打包成自定义基座,才可正常运行
    • vue项目也可以使用HubilderX 打包成app
    • 使用iconfont;参考
    • uni-app上线后热更新:使用plus查看当前的版本号,然后发送到后台查询最新版本,使用[uni.downloadFile(OBJECT)],获取从服务器拿到的最新版本路径,然后plus.runtime.install(路径)。
    • navigateTo快速点击两次,会打开两次。替代方案redirectTo(关闭当前页面,打开某一)。或者使用防抖
    • 微信支付需要自定义基座、以及在微信开放平台申请应用,配置包名、应用签名(随机密码生成器)、正确的订单参数
    • 生命周期执行循序(最早执行) onLoad>mouted>onReady
    • 小程序分包

    小程序端

    • 部分vue不兼容,例如/deep/和scoped 在小程序端不生效
    • 不支持window对象

    nvue学习

    1、在manifest.json>app-plus>设置"renderer":"native"启用原生渲染。
    在pages的首页index页面必须是nvue,vue页面不再识别,其他vue组件将会被原生渲染。报错如下:


    image.png

    原因未知
    2、只支持类选择器,不支持背景图片
    3、开启纯原生渲染后,pages.json的vue文件不识别。nvue和vue将在在手机端不可以跳转
    4、条件编译 APP-PLUS-NVUE
    5、纯原生渲染,app端不会热更新
    6、nvue页面中默认是弹性布局,且默认为垂直方向
    7、无法给view中的文字加字体大小或者颜色等,文字只能放在text组件内


    image.png

    使用nvue和vue混用,不开启原生渲染

    • APP端口优先使用nvue,H5优先使用vue
    • 推荐CSDN阅读
      2、在使用nvue页面布局时,文字要想在在图片的上方显示,除了加定位,还必须要文字在图片的下一行写;原因未知

    HbuildX 使用技巧

    1、HBuilder X 自定义注释模板 https://ask.dcloud.net.cn/question/87114

    {
        // 注意:本文档仅支持单行注释,并且'//'前不能有任何非空字符!!!
        //
        // HBuilderX使用json扩展代码块,兼容vscode的代码块格式
        // 本文档修改完毕,保存即可生效,无需重启。
        // 本文档用于用户自定义vue代码块。
        // 每个配置项的说明如下:
        // "key"    :代码块显示名称,显示在代码助手列表中的名字,以下例子中"console.log"就是一个key。
        // "prefix" :代码块的触发字符,就是敲什么字母匹配这个代码块。
        // "body"   :代码块的内容。内容中有如下特殊格式
        //          $1 表示代码块输入后光标的所在位置。如需要多光标,就在多个地方配置$1,如该位置有预置数据,则写法是${1:foo1}。多选项即下拉候选列表使用${1:foo1/foo2/foo3}
        //          $2 表示代码块输入后再次按tab后光标的切换位置tabstops(代码块展开后按tab可以跳到下一个tabstop)
        //          $0代表代码块输入后最终光标的所在位置(也可以按回车直接跳过去)。
        //          双引号使用\"转义
        //          换行使用多个数组表示,每个行一个数组,用双引号包围,并用逗号分隔
        //          缩进需要用\t表示,不能直接输入缩进!
        // "triggerAssist" :为true表示该代码块输入到文档后立即在第一个tabstop上触发代码提示,拉出代码助手,默认为false。
        // 每个代码块以key为主键,多个代码块需要逗号分隔。
        // 如果json语法不合法,底部会弹出错误信息,请注意修正。
        // 例子:
        "console.log": {
         "prefix": "c",
         "body": [
             "console.log('$1');"
            ],
            "triggerAssist": false,
            "description": "Log output to console twice"
        },
        "method-annotation": {
            "prefix": "cmd",
            "body": [
                "/*",
                " @author:sy",
                " @Description:$1",
                " @createTime: $DATE_TIME",
                " */"
            ],
            "triggerAssist": true,
            "description": "method annotation"
        }
    }
    
    

    相关文章

      网友评论

          本文标题:uni-app学习

          本文链接:https://www.haomeiwen.com/subject/vrrgwhtx.html