uni-app学习

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"
    }
}