小程序使用uni-app搭建小程序环境---css变化

smile轉角      2022-02-14     391

关键词:

css的变化

标准的css基本都是支持的。

选择器有2个变化:*选择器不支持;元素选择器里没有body,改为了page。微信小程序即是如此。

复制代码page{  

}

单位方面,px无法动态适应不同宽度的屏幕,rem只能用于h5。如果想使用根据屏幕宽度自适应的单位,推荐使用rpx,全端支持。 尺寸单位文档

uni-app推荐使用flex布局,并默认就是flex布局,这个布局思路和传统流式布局有点区别。但flex的有趣在于,不管是什么技术都支持这种排版,web、小程序/快应用、weex/rn、原生的iOS、Android开发,全都支持flex。它是通吃所有端的新一代布局方案。相关教程请自行百度学习。

uni-app的vue文件里支持所有web排版方式,不管是流式还是flex。但nvue里,只支持flex,因为它在app端是使用原生排版引擎渲染的。

注意背景图和字体文件尽量不要大于40k。会影响性能。如果非要大于40k,需放到服务器侧远程引用或base64后引入,不能放到本地作为独立文件引用。在小程序里,其实小于40k的文件在css里也无法引用,uni-app编译器在编译时自动做了处理,把小于40k的文件编译为base64方式了。

uni-app简介条件编译app端nvue开发html5+开发环境搭建自定义组件配置平台环境unicloud云开发平台(代码片段)

uni-app简介:概述:uni-app是一个前端跨平台框架:会uni-app就可以用一套代码(类似vue语法)打包出安卓、ios、及各种小程序(微信、qq、支付宝等)端跨平台发布。生态:完整的生态,很多第三... 查看详情

uni-app使用微信小程序消息推送

参考技术Auni-app开发小程序时会用到推送前端基于基础用法做一个封装 查看详情

uni-app技术分享|uni-app转小程序-实时消息(代码片段)

微信小程序实现实时消息与uniapp转码成微信小程序实现实时消息两者是一样的,区别仅仅是一个是原生小程序一个是uniapp转码成小程序。本文主要简单实现点对点消息与呼叫邀请等相关功能实现。uniapp转码成小程序逻辑与小... 查看详情

uni-app开发微信小程序使用微信小程序的插件(代码片段)

假如使用uni-app开发微信小程序需要用到官方插件----OCR插件,插件地址如下:OCR插件申请方式见插件地址介绍。本文主要记录调用方式1.在manifest.json的“mp-weixin”里添加"plugins":"ocr-plugin":"version":"3.0.1",... 查看详情

finclip小程序+rust:环境搭建

...置xcode的项目配合,集成FinClipSDK,准备好实现从FinClip小程序到Rust算法逻辑的端到端融合。搭建一个FinClip社区版docker运行环境,安装设置Rust开发编译iOS代码的环境,设置xcode的项目配合,集成FinClipSDK,准备好实现从FinClip小程序... 查看详情

小程序开发工具与基础之环境搭建与工具

小程序开发准备1、申请小程序账号(appid)2、下载并安装微信开发者工具 进入微信公众平台 https://mp.weixin.qq.com/立即注册小程序  按照信息填写之后完成注册具体操作可查看小程序官方开发文档 使用注册的小... 查看详情

使用uni-app开发小程序,关于小程序更新后与用户本地不会及时更新解决办法(代码片段)

1.原因分析在小程序更新开发版本之后,用户本地并没有对之前版本的小程序进行删除,那么再进入小程序的时候的版本是不会发生变化的,这是由于发版是异步执行,因此新版本将会覆盖的比较慢,本质是小程序的启动方式分... 查看详情

如何判断小程序是原生开发还是uniapp开发?

小程序是否是使用uni-app开发的,可以通过以下方式来判断:查看项目的文件结构。uni-app项目的文件结构与传统的小程序项目不同,它有一个独特的/src目录。查看项目中是否有uni.js文件。uni-app会在小程序项目中自动生成一个uni.j... 查看详情

微信小程序-枯木学习笔记1-环境搭建(代码片段)

介绍传统开发一个软件或者手机app程序,都需要在电脑或者手机中安装。而小程序不同,它是借助现有程序或者app,通过它开放的接口,我们按其规范编写软件,就可以直接由这些程序做成一个程序的入口ÿ... 查看详情

在uni-app框架中使用rem(h5和微信小程序)

参考技术A将在学习uni-app过程中遇到的问题记录一下:注意:<page-meta>需要放在页面的第一个标签。1.在uni-app框架中使用rem(h5和微信小程序)2.index.html的设置 查看详情

图像转换工具,可用于如下环境:uni-app微信小程序5+app浏览器(需允许跨域)

      原文地址:https://www.npmjs.com/package/image-tools 查看详情

微信小程序使用uni-app——开发首页搜索框导航栏(可同时兼容apph5小程序)(代码片段)

目录前言App、H5效果小程序效果一、兼容APP、H5的方式二、兼容小程序三、实现同时兼容前言首页都会提供一个搜索框给到客户,让客户自己去搜索自己想要的内容,这里就需要导航栏,来实现搜索页面的跳转,效... 查看详情

uni-app开发支付宝小程序

参考技术A1、UNI-APP运行项目到支付宝小程序开发工具2、UNIAPP修改支付宝小程序导航标题颜色修改成白底黑字: 查看详情

小程序项目开发--京东商城uni-app之商品列表页面(下)(代码片段)

...栏✨2022微信小程序京东商城实战✨专栏内容✨京东商城uni-app项目搭建✨✨京东商城uni-app配置tabBar&窗口样式✨✨京东商城uni-app开发之分包配置✨✨京东商城uni-app开发之轮播图✨✨京东商城uni 查看详情

小程序项目开发--京东商城uni-app之商品列表页面(上)(代码片段)

...栏✨2022微信小程序京东商城实战✨专栏内容✨京东商城uni-app项目搭建✨✨京东商城uni-app配置tabBar&窗口样式✨✨京东商城uni-app开发之分包配置✨✨京东商城uni-app开发之轮播图✨✨京东商城uni 查看详情

使用mpvue和uni-app开发小程序分别有啥优点跟缺点

参考技术Ampvue基于vue,优化了vue的runtime和compiler实现,以前常用来开发小程序,后来停止维护了。uniapp生态更广,也有云开发,但由于多端兼容,所以有时针对个别平台处理的配置项较多 查看详情

微信小程序与uni-app的区别(代码片段)

...者的基础用法除了语法外基本一致,在此不讨论使用uni-app制作H5、App的特殊情况,只说最通俗易懂的语法区别。触摸事件名称:①微信小程序:bindtap②uni-app:@click函数传参方式:①微信小程序:<... 查看详情

uniapp开发的微信小程序,没有appid可以打开吗

...打开微信小程序的。参考技术A没有appid是无法打开和使用uni-app开发的微信小程序的,因为appid是小程序的唯一标识,是每一个小程序的唯一标识,没有appid的话,就无法在微信小程序中打开和使用uni-app开发的小程序,所以,在使... 查看详情