atu1111的博客

uni-app项目中主要文件的加载顺序1.先后顺序index.html > App.vue的export外的js代码 > main.js > App.vue的export里面的js代码 > Index.vue的export外的js代码2.测试的页面代码块2.1 App.vue<script> console.log('App.vue的export外的js代码') export default { onLaunch: function() { c

uni-app项目网络异常跳转到404页面1.跳转到404页面流程  1.某个A页面，发送某个请求，网络异常，拿不到响应    1.1 这个时候，我们记录当前页面地址url 存储到页面地址     1.2 进行页面跳转，有两种方法：      1.2.1 使用uni.redirectTo 跳转到404 页面,因为redirectTo方法不会把调用redirectTo方法的页面加入堆栈，所以跳转后堆栈 :[‘首页’,‘404’]，redirectTo方法表现形式：关闭当前页面，跳转到应用内的某个页面

uni-app text标签开头不显示占位符的bug以及解决方案  本文借鉴https://blog.csdn.net/weixin_44310456/article/details/119894918<template> <view> <view> <text space="emsp" decode="true">这是段落1</text> </view> <view> <text spa

创建uni-app项目1.2.

uni-app–微信小程序自定义tabbar  微信官方小程序自定义tabbar1.添加 tabBar 代码文件  1) 从官网下载案例，如下：  2) 接着把custom-tab-bar整个文件拷贝到你的项目下：  3) 修改custom-tab-bar/index.js的文件，路径都改为uni-app下的页面路径和图片路径Component({ data: { selected: 0, color: "#7A7E83", selectedColor: "#3cc51f

uni-app自定义tabbar  uni-app官方自定义custom-tab-bar  custom-tab-bar它仍然读取 pages.json 里配置的tabBar信息，但这个组件可以自定义摆放的位置，可以灵活的配置各种css。该组件支持 pages.json 中 tabBar 相关配置（兼容性和 H5 保持一致）， 其中不支持 borderStyle 配置。1. 修改pages.json 中 tabBar 相关配置  pages.json 中 tabBar 相关配置,基本不变，但是lis

uni-ui的使用  当uni-app提供的基础组件不够使用时，比如像日历组件是基础组件没有的，这个时候我们就可以从uni-ui中去找我们要的日历组件，uni-ui类似于elemnet，antd vue一样是个组件库。  uni-ui官方文档  1、进入日历宫格组件  2、使用HBuilderX导入该组件  3、导入该组件 import uniCalendar from '@/uni_modules/uni-calendar/components/uni-calendar/uni-cal

uni-app组件的通讯1.父组件给子组件传值  父组件传递数据( :text动态绑定并传递属性text)给子组件，代码如下：<template> <view class=""> 这是父组件页面，来自子组件的信息{{msg}} <son :text= "text" @update="receiveMsg"/> </view></template><script> import son from './son.v

uni-app中组件的创建  在uni-app中，可以通过创建一个后缀名为vue的文件，即创建一个组件成功，其他组件可以将该组件通过impot的方式导入，在通过components进行注册即可1.创建test组件，在项目中创建components目录，然后新建test.vue文件<template> <view id="myView"> 这是test组件 </view></template><script> export

uni-app中的导航跳转1.利用navigator进行跳转  该组件类似HTML中的<a> 组件，但只能跳转本地页面。目标页面必须在pages.json中注册。  navigator详细文档：文档地址  项目目录结构如下：1.1 跳转到普通页面  代码示例： <navigator url="../detail/detail">跳转至详情页面</navigator>  效果如下：  同时左上角出现返回箭头1.2 跳转到tabbar页面  代

uni-app条件注释实现跨段兼容  条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。  写法：以 #ifdef 加平台标识 开头，以 #endif 结尾。  平台标识值平台参考文档APP-PLUS5+AppHTML5+ 规范H5H5MP-WEIXIN微信小程序微信小程序MP-ALIPAY支付宝小程序支付宝小程序MP-BAIDU百度小程序百度小程序MP-TOUTIAO头条小程序头条

uni-app上传图片预览图片1.上传图片  uni.chooseImage方法从本地相册选择图片或使用相机拍照sourceType:[‘album’,‘camera’]。  详细属性见官方文档  代码如下：<template> <view> <button type="primary" @click="uploadPhoto">上传图片</button> <image v-for="(item,index) in imageArr"

uni-app数据缓存  同步缓存和异步缓存的区别:以Sync（同步，同时）结尾的都是都是同步缓存，二者的区别是，异步不会阻塞当前任务，同步缓存直到同步方法处理完才能继续往下执行。  官方文档1.异步缓存  异步存储，异步获取，移异步移除代码演示： clickButtonSave() { uni.setStorage({ key:'id', data: 80, success() { console.log('保存成功') }

uni-app运行到微信小程序发起请求异常 &emsp:1）本地开发，uni-app运行到微信小程序如果出现请求发不出，先到右上角详情，找到本地设置，勾选不校验合法域名。如果还发现请求发不出来，看第二步。  2）先看下本地uni-app请求代码：<template> <view> <button type="primary" size="mini" @click="clickButton">get请求</button> <vie

uniapp运行到微信开发者工具报错  是没有给uniapp配置小程序的ID，在项目的根目录下有一个manifest.json的文件（如图）  微信开发者工具里面，右上角详情里面有appId,我这里是申请的小程序测试账号appId,有一个默认的touristappid，我复制到manifest.json的文件还是会报Cannot read property ‘forceUpdate’ of undefined错误，用测试账号appId就不会。  申请的小程序测试账号appId的方法，找到微信开放文

uni-app分包  问题引入：为什么uni-app分包？  原因：小程序有体积和资源加载限制，各家小程序平台提供了分包方式，优化小程序的下载和启动速度。而uni-app是做跨端开发看，所以也就引入了分包机制。App默认为整包。从uni-app 2.7.12+ 开始，也兼容了小程序的分包配置。其目的不用于下载提速，而用于首页是vue时的启动提速。App下开启分包，除在pages.json中配置分包规则外，还需要在manifest中设置在app端开启分包设置，详见：https://uniapp.dclou

uni-app解决跨域问题1.在项目找到manifest.json文件，添加h5配置 "h5" : { "devServer" : { "port" : 8080, //浏览器运行端口 "disableHostCheck" : true, //设置跳过host检查 "proxy" : { "/api" : { "target" : "http://

uni-app上拉加载  1).通过在pages.json文件中找到当前页面的pages节点下style中配置onReachBottomDistance可以设置距离底部开启加载的距离，默认为50px。{ "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path" : "pages/pull-up/pull-up", "style" :

uni-app下拉刷新  在uni-app中有两种方式开启下拉刷新1.在配置文件pages.json开启enablePullDownRefresh  在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh{ "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path" : "pages/pul

uni-app的生命周期1.应用的生命周期  生命周期的概念：一个对象从创建、运行、销毁的整个过程被成为生命周期。  生命周期函数：在生命周期中每个阶段会伴随着每一个函数的触发，这些函数被称为生命周期函数  uni-app 支持如下应用生命周期函数：函数名说明onLaunch当uni-app 初始化完成时触发（全局只触发一次）onShow当 uni-app 启动，或从后台进入前台显示 ，多次触发onHide当 uni-app 从前台进入后台 ，多次触发o

uniapp中的事件1.事件绑定  在uni中事件绑定和vue中是一样的，通过v-on进行事件的绑定，也可以简写为@  代码示例：<template> <view> <button size='mini' type='primary' @click="clickButton">唐伯虎</button> </view></template><script> export default { da

uni-app中的数据绑定1.定义数据  在页面中需要定义数据，和我们之前的vue一摸一样，直接在data中定义数据即可<script> export default { data() { return { flag: true, msg:'你好，uni-app', imageUrl: '../../static/logo.png', text: '<view>你好，李丝丝</view>' } }, meth

uni-app中的样式1.uni-app屏幕宽度自适应的动态单位rpx  rpx 即响应式px，一种根据屏幕宽度自适应的动态单位  rpx 官方建议：开发微信小程序时，设计师可以用 iPhone6 375 667作为视觉稿的标准iphone5 320 568 320/750=0.42pxipone6 375 667 375/750 = 0.5pxipone6plus 414 736 414/750= 0.552px  实现等比例放大缩小的原理，就是划分750等分，每一份就是r

组件的基本使用  主要就讲解text文本组件，view视图容器组件，button按钮组件，image组件1.text文本组件1.1 text 组件的属性属性类型默认值必填说明selectablebooleanfalse否文本是否可选spacestring.否显示连续空格，可选参数：ensp、emsp、nbspdecodebooleanfalse否是否解码值说明ensp中文字符空格一半大小emsp中文字符

condition启动模式配置  问题引入：有如下图三个底部导航栏，现在新增加了一个详情页面但是没有添加到底部导航栏中，请问怎么访问到我的详情页面？  如果是H5页面，可以直接在浏览器加上详情页地址pages/detail/detail，如下http://localhost:8080/#/pages/detail/detail，即可实现访问。  但是如果是在微信小程序，怎么实现访问呢？这就需要借助到condition启动模式配置。但是启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序

配置tabbar  如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。1.属性说明  tabBar属性说明如下：属性类型必填默认值描述平台差异说明colorHexColor是tab 上的文字默认颜色selectedColorHexColor是tab 上的文字选中时的颜色backgroundColorHexColor是tab 的背景色borderStyle

全局配置和页面配置  微信小程序页面布局结构：1.全局配置  uni-app通过globalStyle进行全局配置，用于设置应用的状态栏、导航条、标题、窗口背景色等。详细文档属性类型默认值描述navigationBarBackgroundColorHexColor#F7F7F7导航栏背景颜色（同状态栏背景色）navigationBarTextStyleStringwhite导航栏标题颜色及状态栏前景颜色，仅支持 black/whitenavigati

un-app项目目录介绍1.项目目录  pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等  manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。  App.vue是我们的跟组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。  main.js是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件。  uni.scss文件的用途是