uni-app小程序(二)---了解框架与标签的变化
官网:uni-app官网
前提:需熟悉html、css、js、es6、vue等基础内容。
uni-app
使用vue的语法+小程序的标签和API。
开发规范
页面-----vue单文件组件(SFC)规范
组件标签-----小程序规范
接口能力(JS API)-----微信小程序,注:前缀wx-----uni
数据绑定及事件处理-----vue.js
为兼容多端开发-----建议 使用flex布局
目录框架介绍
┌─uniCloud 云空间目录,阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb│─components 符合vue组件规范的uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─hybrid App端存放本地html文件的目录
├─platforms 存放各平台专用页面的目录
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用的本地静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此├─uni_modules 存放[uni_module](/uni_modules)规范的插件。
├─wxcomponents 存放小程序组件的目录
├─main.js Vue初始化入口文件
├─App.vue 应用配置,用来配置App全局样式以及监听 应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息
├─pages.json 配置页面路由、导航条、选项卡等页面类信息
└─uni.scss 这里是uni-app内置的常用样式变量
注:
1.编译到任意平台,static目录下的文件均会被完整打包进去,且不会编译。
2.非 static
目录下的文件(vue、js、css 等)只有被引用到才会被打包编译进去。
3.static
目录下的 js
文件不会被编译,
如果里面有 es6
的代码,不经过转换直接运行,在手机设备上会报错。
4.
css
、less/scss
等资源不要放在static
目录下,
建议这些公用的资源放在自建的common
目录下。
新建页面及文件夹
新建页面
选中文件夹-----新建页面-----弹出弹出框-----如下图:
新建文件夹/新建目录
选中文件夹----(右键)新建----目录即可,其他文件同理。
html标签变化
div ----- view
font、span ----- text
a ----- navigator
img ----- image
select ----- picker
iframe ----- web-view
ui、li ----- view (列表-----uList组件)
audio ----- api方式使用
input ----- input(只有text的功能)
其他功能uni-app有单独的组件或API:radio组件、checkbox组件、时间选择、日期选择、图片选择、视频选择、多媒体文件选择(含图片视频)、通用文件选择。
- form、button、label、textarea、canvas、video 这些还在。
uni-app小程序(二)---了解框架与标签的变化相关推荐
- uni.app小程序的ajax封装详细讲解
我懒得说了 //放url相同的片段 const rootUrl = ""// 示例: ajax({ url:'/api/login', param: param, method: ...
- uni.app小程序登录页持久化存储和退出后清除本地缓存
持久化存储 在store里面的user.js(自己创建的)中 export default {state: {status: false, //登录的状态,获取数据中status是1,登录成功时状态为 ...
- uni.app小程序失焦聚焦,表单验证
<input type="text" placeholder="请输入手机号/邮箱/账号" v-model="username" @f ...
- uni.app小程序实现跳转获取数据
式例如上图所示 (前提是点击索引获得的id与获得数据的id是一样的) 首先是获取文档的数据 我用的async await来获取数据,也可以用.then方法获取数据 async onLoad() {le ...
- App识别微信小程序二维码、太阳码调研
需求:App跳转到微信小程序 在App内部,除了直接链接外,通过长按识别小程序码跳转到小程序指定页面 问题: 1,小程序二维码,链接数据经过特殊加密,无法直接通过链接打开小程序指定页面. 2,小程序太 ...
- uniapp使用uni.createInnerAudioContext()实现在app 小程序 h5有声书的倍速功能
uni.createInnerAudioContext()实现在app 小程序 h5有声书的倍速功能 官网提供的api进行的开发,自我感觉没啥问题,但是在不同的端上好像有的好使有的不好使,暂时不知道啥 ...
- 微信小程序(WeUI框架)
因为小程序的api描述都比较简单,并没有wxml及wxss的描述,有的人可能会想小程序有没有一个UI库.类似于前端中的常见的UI库例如Bootstrap.MDUI(简称MD).Semantic UI( ...
- 省钱兄校园跑腿源码(公众号+APP+小程序+Android+IOS)校园跑腿社区跑腿同城跑腿任务兼职小程序uniapp前端模版
开源代码是用户端uniapp部分源码,使用hbuilder导入即可运行 只提供参考学习使用!已经获得软著!不可商业使用!感谢支持 h5体验地址 h5:https://paotui.xianmxkj.c ...
- 小程序跨端框架(taro/uni-app/kbone)横评之2020版
文章转自:https://www.cnblogs.com/hupingzui/p/12692509.html 微信竟然推出了跨端的kbone,说明跨端的开发已经深入人心:又是新的一年过去了,小程序开发 ...
- 26.微信小程序(WeUI框架)
微信小程序(WeUI框架) 前言 前言: 因为小程序的api描述都比较简单,并没有wxml及wxss的描述,有的人可能会想小程序有没有一个UI库.类似于前端中的常见的UI库例如Bootstrap.MD ...
最新文章
- 《CCNA无线640-722认证考试指南》——导读
- 利用 BASE64Encoder 对字符串进行加密 BASE64Decoder进行解密
- 通过joystick遥感和按键控制机器人--11
- inetd的工作流程
- java 日期 解析_Java日期解析(Java DATE Parsing)
- Spring的@Configuration使用cglib代理的效果和我自己写的简单实现
- Flowable 数据库表结构 ACT_RE_DEPLOYMENT
- 微软这次开源的是 Windows 计算器
- 我的大数据之路(一)-数据仓库也需要大数据
- ​我国首个5G消息平台标准发布;华为拿下支付牌照;工业富联、酷派发布2020年业绩报告...
- matlab语法 axis on,matlabaxis
- w10系统 计算机快捷键大全,Win10电脑快捷键汇总_Win10系统快捷键大全_玩游戏网...
- 客户管理系统之数据库设计
- c语言水仙花数算法流程图,C语言经典算法例题求100-999之间的“水仙花数
- 渗透测试 | IP信息收集
- 通过官网怎么查找联盟申请链接
- UDS-RequestDownload(0x34) service
- 多目标粒子群算法求解帕累托前沿Pareto,Pareto的原理,测试函数100种求解之21
- 微信小程序上传EXCE/CSV/JSON文件到数据库
- 早教幼儿相关的微信公众号图文应该怎样排版?
热门文章
- 解决VisualVm的Profiler一直转圈:正在连接到目标 VM...
- 计算机毕业论文java毕业设计论文题目ssm项目源码水果商城系统电商购物项目[包运行成功]
- 利用curl命令访问Kubernetes API server
- PS中“曲线”【ctrl+M】的作用【加强对曲线的使用】
- 【ChatGPT】AI 大模型的幕后英雄 GPU King NVIDIA : 英伟达公司为什么会成功?—— 人工智能领域的领导者
- 【智能系统学报】投稿记录
- Early Stopping
- Teamcity NuGet Installer
- android 万能混淆文件,Android ProGuard 代码压缩混淆与打包优化
- 【2020暑假牛客多校(一)】