草庐IT

uni-calendar

全部标签

uni-app基础

前言:掌握HTML+CSS+JavaScript,了解Vue.js+原生微信程序更容易上手一、前言uni-app是基于通用的前端技术栈,采用vue语法+微信小程序api,无额外学习成本。一套代码,多端发布(开发者编写一套代码,可发布到ios、android、H5以及各种小程序等多个平台)。即使不跨端,uni-app也是更好的小程序开发框架好处:减少学习成本(个人),减少开发成本(公司)二、搭建开发环境1、前期准备:安装编辑器HbuilderX(HBuilderX是通用的前端开发工具,但为了uni-app做了特别强化)+微信开发者工具(开发微信小程序必备,建议下载稳定版)2、创建项目:安装完成后

uni-app开发指南

如果你平时用Vue写H5项目比较多,然后突然有一天公司要你用uni-app来同时开发H5和小程序(甚至App),而你却对uni-app不熟悉,那么这篇文章或许适合你。下面我将从以下几个维度出发,总结uni-app开发与Vue开发的不同之处。①项目搭建②配置文件③内置组件④数据请求⑤其他一、项目搭建uni-app项目搭建有两种方式,一种是通过vue-cli命令行方式,一种是通过HBuilderX可视化界面方式,新手推荐直接使用第二种方式,简单快捷,下载按照好HBuilderX开发工具后,点击顶部工具栏里的文件->新建->项目(快捷键Ctrl+N)后即可创建。HBuilderX下载链接:https

WKWebView 加载 Uni-App 导出的本地 H5

Uni-App打包发布的H5包直接放到APP中加载可以用于提升加载速度,一般有两种方式:直接把包放到iOS项目中加载(多用于开发阶段测试)从后台服务器预下载到文件沙盒内加载(可以减少APP包大小,同时也能实现热更新功能)加载步骤一、创建一个uni-app项目,并打包成H5在官方工具HBuilder中创建一个测试项目创建uni-app修改manifest.json文件中的h5配置的运行的基础路径为:./修改配置发行为H5H5发行二、iOS项目内直接加载包内Uni-App将整个Uni-App包以引用(蓝色文件夹)的方式加入项目引入Uni-App加载uni-app-(void)viewDidLoad

学会用命令行创建uni-app项目并用vscode开放项目

(创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹)目录创建uni-app项目命令行创建uni-app项目编译和运行uni-app项目:用VSCode开发uni-app项目创建uni-app项目命令行创建uni-app项目(不必依赖HBuilderX)vue3+ts版:npxdegitdcloudio/uni-preset-vue#vite-ts项目名称官网链接:https://uniapp.dcloud.net.cn/quickstart-cli.html#创建uni-app编译和运行uni-app项目:最后将文件导入微信开发者工具即可在终端下载过程中可

微信小程序:uni-app页面Page和组件Component生命周期执行的先后顺序

目录H5微信小程序测试代码文档页面生命周期https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle组件生命周期https://uniapp.dcloud.net.cn/tutorial/page.html#componentlifecycle经测试,得出结论:H5和微信小程序的生命周期函数调用顺序不一致H5pagebeforeCreatepageonLoadpageonShowpagecreatedpagebeforeMountcomponentbeforeCreatecomponentcreatedcomponentbeforeMou

uni-app开发应用时,如何进行页面布局和设计?【跨平台开发教程uniapp教程(米饭科技-app小程序h5源码)】

目录:uni-app开发应用时,如何进行页面布局和设计设计方法flex布局使用快速入门grid布局使用快速入门源码获取方法:会员学习群:【一对一答疑】uni-app开发应用时,如何进行页面布局和设计设计方法在uni-app中,可以使用Vue.js的语法进行页面布局和设计。以下是一些基本的布局和设计方法:使用flex布局:可以通过设置display:flex属性来实现,可以实现简单的自适应布局。使用grid布局:可以通过设置display:grid属性来实现,可以实现更复杂的自适应布局。使用CSS样式:可以使用CSS的各种属性,如position、float、margin、padding等来进行

uniapp微信小程序 页面跳转传参(uni.switchTab传参无法获取,uni.reLaunch传参可以获取)

 uni.switchTab跳转tab页面无法传递参数因为是tab页面,我首先想到的就是通过:uni.switchTab进行页面跳转。代码如下:然后在首页的onShow生命周期函数中进行监听路由参数。代码如下:结果uni.switchTab跳转的页面是不能够将路由参数传递到页面中的。 uni.reLaunch跳转tab页面可以实现传参这样就可以拿到路由中的参数了。 这样问题就解决了。

uni-app开发小程序中遇到的map地图的点聚合以及polygon划分区域问题

写一篇文章来记录以下我在开发小程序地图过程中遇到的两个小坑吧,一个是点聚合,用的是joinCluster这个指令,另一个是polygon在地图上划分多边形的问题:1.首先说一下点聚合问题,由于之前没有做过小程序地图问题,所以浏览了很多资料,最终发现看的多了反而杂乱,而且这次要完成的不是地图单点定位或者地图导航,而是地图撒点,在地图上要显示很多定位点,那么点数过多且覆盖就成了一个要解决的问题,我上网搜了大量的资料,要么自己手写,要么引入很多其它组件方式看起来比较复杂,直接说最简单的结论,在撒的markers点内部直接加一个joinCluster:true即可,藏在官方文档marker介绍下的最下

uni-app云打包(android)(自有证书、云端证书、公共测试证书)

一、进入云打包入口发行->原生App-云打包 二、证书选择1、使用自有证书①进入香蕉云编(这里采用的证书从香蕉云编进行生成)香蕉云编-app打包上架工具类平台②进入页面选择“生成签名证书”->"立即创建证书" ③选择“安卓证书生成”->“创建安卓证书”④填写相关信息完成创建 ⑤成功后,下载该文件⑥返回打包页面,将有关信息填入(按照图中进行对应填写) ⑦最后点击右下角的打包即可⑧打开apk文件位置在控制台出现打包完成的log,点击“打开所在目录”(unpackage->release->apk) 2、使用云端证书①进入开发者中心开发者中心②选择“我的应用”,选择应用进入详情页③选择“Androi

uni-app小程序 解决滚动穿透之page-meta

问题描述页面是可以滚动的,该页面的弹窗、组件也是可以滑动的。当我们滑动页面内弹出的弹窗、组件时,该页面也会跟着滚动,就会出现滚动弹窗内容时,页面内容也跟着滚动,这就是滚动穿透。在PC端我们常通过给弹出弹窗的页面的body添加overflow:hidden,隐藏未显示的内容,来阻止页面滚动。但是小程序里没有body,故此方法不可行。解决办法可以使用page-meta组件:页面属性配置节点,用于指定页面的一些属性、监听页面事件。当打开弹窗时,给page-mate添加overflow:hidden属性来组织页面滚动。page-meta:page-style="noSlide?'overflow:hi