uni-app小程序uni.createAnimation动画效果快速上手教程
在实现某个功能的时候,因为基础不够只能拆分2个步骤来学习,第一个学习uni-app小程序uni.createAnimation动画效果,第二个在思考在这基础上实现某个功能,于是…..
写了3小时,出了3个bug
建立动画
建立动画有2个方式,为了学习就简单点:
1.直接在点击的行数中去建立(如果一个界面只有一个动画那就随意);
2.onShow函 ...
使用uni-app 地图组件
首先,官方文档:https://uniapp.dcloud.io/component/map.html
so,easy
但是没什么用~——~,太简单了
uni-app一般内置的使用的是腾讯地图,这个组件使用的地图也是一样的
很坑爹的是,我们看到的地图是
{功能:
带自动定位的
解析地址的
文字性质的
可以查找,筛选的
}
对你没有猜错,这些内容统统没有
但是,这些可以自 ...
Uni-app极速入门(二) - 登录demo
需求
背景
1、进入小程序,默认页面判断用户是否已经登录,已经登录则进入首页,没有登录则进入登录页面
2、首页为tabbar,包括首页和设置页,设置页可以退出登录,回到登录页面
页面流转
graph TD
A[Index Page] --> C{isLogin}
C -->|true| D[HomePage]
C -->|false| E[LoginPage]
D --> |logout| A
E --> |login| D
技术 ...
Android Studio运行、离线打包uni-app项目
首先需要下载Android Studio下载HBuilderX下载Android离线打包SDK(https://nativesupport.dcloud.net.cn/AppDocs/download/android)
创建android项目
2. 配置项目
&nbs ...
uni-app页面栈
uni-app框架用栈的形式管理页面,当发生路由切换的时候,页面栈的表现如下
路由初始化的时候(即uni-app打开的第一个页面),新页面入栈
打开新页面,调用 uni.navigateTo 使用组件<navigator open-type="navigate"/>,类似于vue的route.push()。路由后可以带参数,若跳转地址为tabBar则不可带参数
页面重定向:当前页面出 ...
uni-app app生成带二维码海报保存图片 + 分享到微信
html代码 <view style="padding-top: 100rpx;">
<!-- <view class="tips">
<image src="../static/fingerprint.png" mode=""></image>
<text></text>
</view> -->
<view class="posterImgBox">
<view id="poster">
...
uni-app实现select可输入下拉框
1、一般uni-app下拉框
<view class="uni-form-item uni-column">
<picker @change="examinationType" :range="examinationTypeArray">
<label class="">{{ examinationTypeArrayType }}</label>
</picker>
</view>
//下拉框初始数据
examinationTypeArray: ['请选择', '11111', '22222', '33333', '44444 ...
uni-app、Vue3 + ucharts 图表 H5 无法渲染
当学习成为了习惯,知识也就变成了常识。感谢各位的 点赞、收藏和评论。
新视频和文章会第一时间在微信公众号发送,欢迎关注:李永宁lyn
文章已收录到 github,欢迎 Watch 和 Star。
简介
从问题定位开始,到给框架(uni-app)提 issue、出解决方案(PR),再到最后的思考,详细记录了整个过程。
前序
当你在业务中不幸踩了开 ...
uni-app判断运行的平台
1,编译期判断(条件编译,代码块中的代码只会编译到对应的发行包里)
①例如:
// #ifdef H5
alert("只有h5平台才有alert方法")
// #endif
// #ifndef H5
alert("除了h5平台之外的其他平台才有的方法")
// #endif
②//#ifdef %PLATFORM% //#endif 可以使用的值
值
生效条件
VUE3
HBuilderX 3.2 ...
uni-app的介绍安装和运行
uniapp教程指南
uniapp介绍
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。
官网跨平台项目预览地址
uniapp特点
跨平台
一套代码可以运行在多个平台,打包生成 ...
UNI-APP之微信小程序转H5
开始
最近有个需求,需要将微信小程序中一些页面和功能改成h5,这次功能开发的时间有点紧,而且重新写一套有点来不及。考虑到微信小程序与uni-app有着一些共通之处,所以打算直接转成uni-app。uni-app官网上也有从微信小程序项目转uni-app的教程:https://github.com/zhangdaren/miniprogram-to-uniapp ,不过我这里 ...
uni-app + Cloudbase——uni-app 项目中如何使用腾讯云开发后端服务
1 基本介绍
uni-app 是一个基于 Vue.js 的跨端开发框架,一套代码可以发布到 App、小程序、Web 等不同平台
腾讯云开发平台 Cloudbase 提供的 @cloudbase/js-sdk 可以让开发者在 Web 端(例如 PC Web 页面、微信公众平台 H5 等)使用 JavaScript 访问 Cloudbase 服务和资源。
但是 @cloudbase/js-sdk 只支持 Web(浏览器环境 ...
uni-app的uni.request()请求封装
第一种:常见的直接发起uni.request()请求
onLoad() {//页面加载时调用
this.getSwipers()
},
methods: {
//获取轮播图数据
getSwipers(){
uni.request({
url:"https://api-hmugo-web.itheima.net/api/public/v1/home/sw ...
uni-app页面监听、传参、通信
问题1:uni-app页面返回上一页 界面不刷新
问题2:进入页面修改后上个页面参数无法发送改变
在父页面添加
let that = this;
uni.$on('relationInit',function(data){
that.getUserDeptCompany()
})
onUnload() { //销毁
uni.$off('relationInit')
},
子页面 执 ...
uni-app 引入第三方字体
uni-app 支持使用字体图标,使用方式与普通 web 项目相同,需要注意以下几点:
支持 base64 格式字体图标。
支持网络路径字体图标。
小程序不支持在css中使用本地文件,包括本地的背景图和字体文件。需以base64方式方可使用。
网络路径必须加协议头 https。
从 http://www.iconfont.cn 上拷贝的代码,默认是没加协议头的。 ...
Uni-app指令
1. 组件
2. API:网络请求
3.路由
4.生命周期
5.语法:数据绑定,事件
6.布局样式:样式引用,sass等
1.pages:存放页面
2.static:静态文件的目录
3.App.vue:应用生命周期文件
4.main.js:也是应用入口文件,注册Vue等
5.mainfest.json:应用及各端配置文件
6.pages.json:页面配置文件
7.uni.sass:全局变量文件 ...
uni-app renderjs通信
renderjs使用renderjs是一个运行在视图层的js。它只支持app-vue和h5。
renderjs 不能使用 uni.$on和 uni.$emit 通信。renderjs的主要作用有2个:
大幅降低逻辑层和视图层的通讯损耗,提供高性能视图交互能力在视图层操作dom,运行for web的js库使用时的注意事项目前仅支持内联使用。不要直接引用大型类库,推荐通过动态创建 ...
uni-app 横竖屏问题
前情
uni-app是我很喜欢的跨平台框架,它能开发小程序,H5,APP(安卓/iOS),对前端开发很友好,自带的IDE让开发体验也很棒,公司项目就是主推uni-app
坑位
最近有用户反馈闪屏页也叫启动页会出现横屏,收到反馈后自测发现确实是有横屏问题,而且横屏进入页面会乱,即使已切到竖屏。
Why?
因为页面内主要使用rpx单位布局,横屏 ...
uni-app 微信小程序全局分享
实际使用中,经常需要小程序分享到好友或者朋友圈,一般而言是一个个页面去设置。
官网分享介绍:https://uniapp.dcloud.io/api/plugins/share?id=onshareappmessage
项目地址:https://gitee.com/jielov/uni-app-tabbar
单页面每一个需要分享的页面多需要单独写上
export default {
//发送给朋友
onShareAppMessage(res ...
uni-app 地图全解析+事件监听
最近找到了一篇uni-app的地图解决方案精品文章,这里分享给大家,希望对大家有所帮助
转载地址:https://blog.csdn.net/cplvfx/article/details/111447466
前置条件:你需要阅读
https://uniapp.dcloud.io/component/map
先看图
事件监听-属性说明
这个表也是官方的
标红的是我用到的
使用
html
我这里用了 ...