uniapp开发笔记，持续记录-迪思分享

本站所有内容来自互联网收集，仅供学习和交流，请勿用于商业用途。如有侵权、不妥之处，请第一时间联系我们删除！Q群：

[h1]新手上路，记录一下一些细节[/h1]

1. 字体图标引入：https://uniapp.dcloud.io/frame?id=%e5%ad%97%e4%bd%93%e5%9b%be%e6%a0%87

2. 条件编译：https://uniapp.dcloud.io/platform

3. NPM的使用：https://uniapp.dcloud.io/frame?id=npm%e6%94%af%e6%8c%81

4. 各种小程序端的类wxs：https://uniapp.dcloud.io/frame?id=wxs

5. 在HBuilderX新建uni-app项目的模板中，选择uni-ui模板，由于uni-app独特的easycom技术，可以免引用、注册，直接使用各种符合规则的vue组件。在代码区键入u，拉出各种内置或uni-ui的组件列表，选择其中一个，即可使用该组件。

6. uniapp演示：https://hellouniapp.dcloud.net.cn/pages/component/view/view

7. uniapp程序的生命周期：https://uniapp.dcloud.io/collocation/frame/lifecycle

8. uniapp组件：https://uniapp.dcloud.io/vue-components

9. uniapp目录结构：https://uniapp.dcloud.io/frame?id=%e7%9b%ae%e5%bd%95%e7%bb%93%e6%9e%84

10. uniapp 安卓应用开发记录：https://nicen.cn/webapp.html

11.uniapp Vue2.x转Vue3.x：https://uniapp.dcloud.io/tutorial/migration-to-vue3.html

[h1]生命周期[/h1]

应用生命周期：https://uniapp.dcloud.io/collocation/frame/lifecycle
页面生命周期：https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle
组件生命周期：https://uniapp.dcloud.net.cn/tutorial/page.html#componentlifecycle

App_onLauch -> App_onShow -> Vue_setup -> Page_onLoad -> Page_onReady -> Vue_onMouted ->Page_onShow

[h1]工作记录[/h1]

uni-ui模板在HBuilderX新建uni-app项目的模板中，选择uni-ui模板，由于uni-app独特的easycom技术，可以免引用、注册，直接使用各种符合规则的vue组件。在代码区键入u，拉出各种内置或uni-ui的组件列表，选择其中一个，即可使用该组件。
web-view官方文档：https://uniapp.dcloud.net.cn/component/web-view?id=web-view，web-view 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面

自定义vite配置文件：https://uniapp.dcloud.io/collocation/vue-config.html

 import { defineConfig} from 'vite'
 import uni from '@dcloudio/vite-plugin-uni'

 export default defineConfig({
     base: 'https://static-xxxx.bspapp.com/', 
     plugins: [
         uni(),
     ],
	 build:{
	    assetsDir:"public/static/app"
	}
 })

自定义导航栏：https://uniapp.dcloud.io/collocation/pages.html#style
uniapp使用plus：https://uniapp.dcloud.io/use-html5plus
Native.js技术，简称NJS，是一种将手机操作系统的原生对象转义，映射为JS对象，在JS里编写原生代码的技术：https://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/88
uniapp在data内使用plus存在偶发undefined的问题，可以放到onload内。

[h1]问题集锦[/h1]

如果要跳转的路径在pages.json里面的tabBar里面跳转需要使用uni.switchTab进行跳转，使用navigateTo将会无反应。
Uniapp中的App组件中的globalData是普通的全局变量，不是响应式的。
uni-app 除了支持Vue实例的生命周期，还支持应用生命周期 (opens new window)以及页面生命周期 (opens new window)。
@开头的绝对路径以及相对路径会经过base64转换规则校验
css、less/scss 等资源不要放在 static 目录下，建议这些公用的资源放在自建的 common 目录下。
uniapp中可以直接使用npm导入Js包。
uniapp中使用vue的mixin可以在static文件夹中单独定义Js，用于引入需要混入的对象。
export导出一个对象（必须是声明的变量，如const声明，或者直接默认default的对象）
图片闪烁的问题：image使用mode=”widthFix”模式后，只要设置图片宽度，就会根据宽高比例自动换算设置图片高度，以及image有个默认属性值height为225px，当系统自动计算出图片高度前，如果不设置image高，图片会先被设置为默认高度，然后在快速设置为计算出来的高度，也即图片会被快速拉伸，当两个高度差距比较大时，以及一个页面多处图片使用该模式时候页面加载就会出现闪屏效果。
```
Image{
    height: auto;
}
```
在style有scoped属性时，要改变element-ui某个深层元素（eg:.el-input__inner）或其他深层样式时，需要使用/deep/，如
```
.conBox /deep/ .el-input__inner{
    padding:0 10px;
}
```
如果/deep/报错，可采用::v-deep（/depp/ 、>>>功能是一致的，在scss和less中需要使用/deep/）
```
.conBox ::v-deep .el-input__inner{
    padding:0 10px;
}
```
uniapp使用Vue3.x时不支持suspense标签，setup无法使用async修饰。

[h1]Uniapp开发遇到的登录的问题[/h1]

网络请求都是异步的，但是某些页面必须登录加载数据之后才能显示。

过程大概是这样：登录 -> 通过cookie请求数据 -> 初始化 -> 显示页面

因为所有页面都需要登录状态，所以登录的逻辑放在App.vue的onLauch生命周期中（初始化一些系统配置、用户数据之类的，保存在Vuex中）。

页面数据往往是这个页面独有，请求逻辑在这个页面的生命周期里（onShow、onLoad、onReady）

在异步的逻辑下，页面请求往往在登录状态还未完成时就开始了，可以用过watch监视登录的状态，从而进行下一步请求。

[h1]uniapp Vue2.x 到Vue3.x迁移[/h1]

[h2]1.组合式API[/h2]

Vue组件生命周期的组合式API钩子：

<script setup>
  import {onLoad,onShow } from "@dcloudio/uni-app";

  // onLoad 接受 A 页面传递的参数
  onLoad((option) => {
    console.log("B 页面 onLoad:", option); //B 页面 onLoad: {id: '1', name: 'uniapp'}
  });

  onShow(() => {
    console.log("B 页面 onShow");
  });
</script>

组件的生命周期钩子：与Vue3语法相同

[h2]2.小程序调试开启sourcemap[/h2]

import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";

/**
 * @type {import('vite').UserConfig}
 */

export default defineConfig({
  build: {
    sourcemap: true,
  },

  plugins: [uni()],
});

[h2]3.uniapp使用pinia[/h2]

官方文档：https://uniapp.dcloud.net.cn/tutorial/vue3-pinia.html#%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86-pinia

[success title=”提示”]使用 HBuilder X 不需要手动安装，直接使用即可。使用 CLI 需要手动安装，执行 yarn add pinia 或 npm install pinia。[/success]

[h2]4.页面通讯[/h2]

页面通讯：https://uniapp.dcloud.net.cn/tutorial/page.html#%E9%A1%B5%E9%9D%A2%E9%80%9A%E8%AE%AF

[h2]5.请求拦截器[/h2]

拦截器：https://uniapp.dcloud.net.cn/api/interceptor.html

[h2]6.应用级事件[/h2]

应用级事件：https://uniapp.dcloud.net.cn/api/application.html

[h1]字节小程序[/h1]

[h2]1. ttml[/h2]

createSelectorQuery方法返回一个 SelectorQuery 的实例，该实例上有 select、 selectViewport 等方法用于选择页面节点或显示区域。该 API 需要在 DOM 加载成功后使用，使用场景：进入页面时获取节点对象实例，在 Page.onReady 中使用、通过 setData 切换组件状态后获取节点实例，在 setData 回调中使用；

var image = new Image();
image.src="/images/head.jpeg";
image.onload=function(){
	ctx.drawImage(this,0,0,60,60,0,0,120,120);
}

[h2]2. getUserInfo[/h2]

需要在触发事件的节点上加上data-sync；才能成功触发API

[h2]3.使用Vant[/h2]

官方说明：https://ext.dcloud.net.cn/plugin?id=100

[h2]4.provide和inject[/h2]

目前字节跳动小程序的组件父子关系初始化较晚，在setup阶段，还没有初始化父子关系，导致无法正常使用provide/inject，
临时解决方案，可以使用 options 方式定义 inject 或延迟获取。

/* 生命周期 */
onMounted(() => {
	app.data = inject("app"); //引入舞台
});

const app = shallowReactive({
		data: null
            }); //应用

[h2]5.其他配置[/h2]

虚拟化组件节点：默认情况下，自定义组件本身的那个节点是一个“普通”的节点，使用时可以在这个节点上设置 class style 、动画、 flex 布局等，就如同普通的 view 组件节点一样。

<script>
export default {
  options: {
    virtualHost: true
  }
}
</script>

迪思分享版权声明 ① 本网站名称：❤迪思分享❤ 本站永久网址：▶https://www.dsary.com◀
② 如果您喜欢本站，点击这儿

开通VIP，同时按Ctrl+D保存网页
③ 在浏览网站中可能会帮助到您：

④ 本站接受投稿，同时也开启了创作分成，投稿用户只需自行设置收费即可！点击查看如果需要投稿，请点击投稿发布文章！
⑤ 本站一律禁止以任何方式发布或转载任何违法的相关信息，如果发现请点击上方联系方式进行举报！情况如实，可获得本站一个月的VIP
⑥ 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。如遇压缩包需解压密码，一般为：www.dsary.com 丨 www.syymw.com请知悉！
⑦ 修改版本安卓及电脑软件，加群提示为修改者自留，非本站信息，注意鉴别！资源来源于网络，仅供大家学习与参考，请于下载后24小时内删除；
⑧ 若作商业用途，请联系原作者授权，若本站侵犯了您的权益请联系站长进行删除处理；可联系上方QQ或进入QQ群进行反馈！
⑨互联网的本质是自由与分享，我们真诚的希望，每一份有价值的正能量能够在互联网中自由传播。

THE END

免费资源（注册即可下载）★★★

uniapp开发笔记，持续记录

请登录后发表评论