美文网首页
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学习路线

    Uni-App学习路线 学习Uni-app用到的技术 Uni-app官网[https://uniapp.dclou...

  • uni-app 之登录页面

    学习了一周多uni-app,上一周主要是开发原生插件给uni-app调用。本周开始学习怎么使用uni-app写页面...

  • uni-app入门详解

    1 uni-app学习 1.1 什么是uni-app uni-app是一个使用Vue.js语法来开发所有前端应用的...

  • uni-app写一个阅读类app

    这个程序主要是学习uni-app和egg.js,介绍:前端开发使用uni-app,后端使用egg.js,数据库使用...

  • uni-app开发小说阅读器

    uni-app官网介绍 uni-app插件地址 项目地址 首先上做的产品效果图,仅供学习。 项目已接入实际api数...

  • 在uni-app框架中使用rem(h5和微信小程序)

    将在学习uni-app过程中遇到的问题记录一下: 1.rem根元素字号适配 问题uni-app中可以使用rem。r...

  • uni-app 介绍

    uni-app 介绍 1、什么是uni-app? uni-app是一个使用 Vue.js 开发所有前端应用的框架,...

  • uni-app学习

    hcoder[http://www.hcoder.net/tutorials/info_1335.html]uvi...

  • uni-app学习

    1、pages.json单独设置样式: 2、启动模式设置:(微信小程序中的编译模式) 3、APP生命周期: 4、页...

  • 学习uni-app

    新公司用的框架是uni-app,所以开始学习起来 官方给出的文档十分友好,多看看应该没什么问题 不得不说,uni-...

网友评论

      本文标题:uni-app学习

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