多端开发框架uni-app入坑指南,一套代码适用微信、头条等小程序

前言

hello 小伙伴们,现在我已经正式入坑 uni-app 了。uni-app 已经发布好几个月了,期间也是踩坑无数,但是官方秉承着不抛弃不放弃的精神,积极解决开发者的各种简单的、复杂的问题,在此表示感谢。我想还有小伙伴正在持观望状态,还没想好要不要使用 uni-app,而且近些日子以来,许多跨端框架也纷纷出现在了大家的视线当中,让迷茫的我们更加不知道如何对比选择了。 uni-app 入坑指南,方便大家更好的了解 uni-app 本篇只讲述 uni-app,不与其他类似框架进行对比

一、什么是 uni-app

  1. uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOSAndroidH5、小程序等多个平台。详情点击 uni-app 官方文档
  2. uni-app在跨端数量、扩展能力、性能体验、周边生态、学习成本、开发成本等6大关键指标上拥有极强的竞争优势 。
  • 跨端数量更多
  • 平台能力不受限
  • 性能体验更优秀
  • 周边生态丰富
  • 学习成本低
  • 开发成本低

二、使用 uni-app 的前置条件

好多小伙伴可能要问了:哇,一套代码可以编译到那么多平台,那是不是我学习起来很麻烦啊,我只会vue啊,不会小程序,也不会原生开发,能不能学会uni-app呢。

这个问题问的就很棒,那么如果要学会uni-app需要会那些技能呢?答:你如果会vue,基本上就可以解决大多数问题了。多读几遍文档,你会发现开发起来很顺畅 。

但是为了更好的跨端开发,我们肯定是要统一规范的:

  • 页面组件我们要遵循Vue 单文件组件 (SFC) 规范
  • 组件标签靠近微信小程序规范
  • 接口能力(JS API)靠近微信小程序规范
  • 数据绑定及事件处理靠近 Vue.js 规范,同时补充了App及页面的生命周期
  • 为兼容多端运行,建议使用flex布局进行开发

三、开发工具

使用官方推出的 HBuilderX 编辑器

可视化的方式比较简单,HBuilderX 内置相关环境,开箱即用,无需配置node 。

四、使用Vue.js

几乎全支持 Vue官方文档:模板语法

当然,说的是几乎,那肯定有不支持的情况下啊, 下面给大家罗列一下不支持的情况 :

  • 不支持纯HTML
  • 不支持部分复杂的 JavaScript 渲染表达式
  • 不支持过滤器

五、小程序(微信、支付宝、百度、头条)

当然如果要开发小程序,不可避免的,我们肯定是要知道不同平台下的小程序规范的 。当然知道了这些规范之后,我们开发起来就比较简单了。uni-app 给我们把不同平台的小程序 API几乎都封装了 ,只需要将前缀替换为 uni 即可 举例说明:

我们调用微信小程序的 request 请求

多端开发框架uni-app入坑指南,一套代码适用微信、头条等小程序

 

多端开发框架uni-app入坑指南,一套代码适用微信、头条等小程序

 

我们使用 uni-apprequest 请求

有没有发现什么不一样的?对了,除了前缀 wx替换为uni之外,其他的地方一摸一样,是不是这样开发起来就很一贼了呢 。

六、App(ios、安卓)

uni-app 不仅可以使用绝大多数的小程序相关的 API,同时也可以使用 5 API 很好的补足了小程序上一些还没有实现的功能,是不是很美好?而且开发方式还是跟上述一样,没有变化,是不是更美好了呢。

七、H5

h5 就不多说了,基本上跟常规 vue 开发没有什么区别, 唯一需要注意的是,有些 API 是不能在 h5 中使用,主要看文档,看文档,看文档 。

八、如何实现跨端

当然虽说是跨端,但是肯定是有情况是不支持的,比如遇到有些平台特有的 API 怎么办 ?

不用担心,这些问题 uni-app 都为你想到了 那就是使用条件编译

九、条件编译

详细看文档)在 C 语言中,通过 #ifdef#ifndef 的方式,为 windowsmac 等不同 os编译不同的代码 uni-app 参考这个思路,为 uni-app 提供了条件编译手段,在一个工程里优雅的完成了平台个性化实现 。

条件编译是利用注释实现的,在不同语法里注释写法不一样,js使用 // 注释css 使用 / 注释 /vue/nvue 模板里使用 **

举个例子:

多端开发框架uni-app入坑指南,一套代码适用微信、头条等小程序

 

多端开发框架uni-app入坑指南,一套代码适用微信、头条等小程序

多端开发框架uni-app入坑指南,一套代码适用微信、头条等小程序

 

多端开发框架uni-app入坑指南,一套代码适用微信、头条等小程序

 

是不是感觉很方便 ?这样就可以很巧妙的去区分不同的平台了,具体的请详细看文档,看文档,看文档 。

十、注意事项

  • H5 端,不能使用浏览器自带对象,比如 documentwindowlocalstoragecookie 等,更不能使用 jquery 等依赖这些浏览器对象的框架。因为各家小程序快应用都不支持这些对象。没有这些浏览器自带对象并不影响业务开发,uni 提供的 api 足够完成业务。
  • uni-apptag 同小程序的 tag,和 HTMLtag 不一样,比如 div 要改成 viewspan 要改成 texta 要改成 navigator

以上,所有内容(除了我自己说的话以外)都来自 uni-app官方文档,请注意多看文档,多看文档,多看文档。

 


推荐:来客推多商户系统,基于uni-app跨域开发的平台,友好适配

结语

ok,到这里入坑基本完毕。接下会讲述如何使用 uni-app 从零开始开发一个完整的音乐应用,尽情期待!

希望本文能帮助到您!

点赞 转发,让更多的人也能看到这篇内容(不收藏不点赞,都是耍流氓-_-)

转载来源:https://www.src1024.com/tech/talk/28200.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/38471.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于uniapp开发 微信小程序登陆页面一

此微信登陆页面是参考uniapp开发文档 uniapp一键登录和button组件中的getphonenumber方法 代码展示 <template><view class"login-container"><buttonclass"btn-login"open-type"getPhoneNumber"getphonenumber"handleLog…

uniapp之微信小程序开发——目前遇到的坑

文章目录 微信小程序开发教程目录写在开头所谓的坑1. main.js你最好别瞎改2. uniapp中创建云函数3. 云函数安装其他npm依赖包4. 小程序端API和服务端API有何异同5. 去除button默认样式6. 组件中使用v-if不能用7. websocket使用 总结 微信小程序开发教程目录 正篇 1 【约球onli…

Uniapp小程序登录和登录验证

小程序的登录验证流程图&#xff1a; 第一步&#xff1a;获取微信用户的基本信息&#xff1a; 调用getUserProfile方法&#xff0c;获取用户基本信息 methods:{getUserProfile(){desc:"完善用户信息"&#xff0c;success:(res)>{this.saveUserInfo(res.userInfo) …

采用uni-app开发的多端圈子社区论坛系统

采用uni-app开发的多端圈子社区论坛系统 系统基于TP6 Uni-app框架开发&#xff1b;客户移动端采用uni-app开发&#xff0c;管理后台TH6开发。 系统支持微信公众号端、微信小程序端、H5端、PC端多端账号同步&#xff0c;可快速打包生成APP。 拥有完善的后台管理&#xff0c;不…

uniapp之uni-starter小程序多端研发框架搭建与项目实践

随着移动互联网的飞速发展&#xff0c;无数移动APP琳琅满目&#xff1b;在移动App的发展的基础上&#xff0c;衍生了小程序、轻应用技术&#xff0c;它随时可用&#xff0c;但又无需安装卸载。 小程序是一种不需要下载安装即可使用的应用&#xff0c;它实现了应用“触手可及”…

【记录】基于uni-app开发的微信小程序商城项目

一、项目基本结构 &#xff08;一&#xff09;tabbar页面 首页 分类 购物车 我的(用户中心) &#xff08;二&#xff09;非tabbar页面 搜索 商品列表 商品详情 微信支付 结构解析&#xff1a; 1. 构建一个小程序&#xff0c…

【uni-app项目】瑞幸咖啡小程序

技术栈 框架:uni-appui库:uview-ui编辑器:HBuilderXapi文档 api目前只有商品信息,之前完整版api文档不知道被我丢哪里去了,需要的话请订阅后私聊邮箱 功能描述 使用uni-app框架,仿照瑞幸小程序前端,与后端api对接(使用网上的接口),动态处理数据 功能如下 (注意!…

不同平台使用不同技术实现微信好友、朋友圈分享汇总(H5、taro、uni-app)

人生路漫漫&#xff0c;坑&#xff0c;是活久了见。程序猿世界里各种奇葩的需求都有&#xff0c;随之而来的各种坑也是层出不穷。 应前IBM同事邀请特来做分享的专题总结。一般人我不告诉他&#xff0c;刷到的朋友们就赚到了&#xff0c;你懂的~~~~~~收藏吧&#xff01; 事情前…

关于我在uni-app练手中遇到的坑

目录 页面层级结构的加载和回退 filePath编码 对象的深度克隆 弹幕的加载 ​编辑 uni-app内置浏览器加载视频失败 后台报错 java.io.IOException: 你的主机中的软件中止了一个已建立的连接 安卓里遍历uni-list-item错误 手机自带浏览器无法加载视频 乱码问题 video中…

【哈士奇赠书活动 - 17期】-〖uni-app跨平台开发与应用从入门到实践〗

文章目录 ❤️‍&#x1f525; 赠书活动 - 《uni-app跨平台开发与应用从入门到实践》❤️‍&#x1f525; 编辑推荐❤️‍&#x1f525; 抽奖方式与截止时间❤️‍&#x1f525; 赠书活动 → 获奖名单 ❤️‍&#x1f525; 赠书活动 - 《uni-app跨平台开发与应用从入门到实践》…

1个月uni-app微信小程序开发上线实战专栏介绍

一、专栏介绍&#xff1a; 《uni-app开发微信小程序1个月上线实战》&#xff0c;目标带领1000位同学成功开发上线一个自己的个人小程序&#xff01; 作者介绍&#xff1a;国服第二切图仔——资深前端开发工程师&#xff0c;具有六年以上的前端开发经验&#xff0c;曾在多家知…

深入浅析,一步步用GPT打造你的聊天机器人

使用GPT基于你自己的文档构建聊天机器人的分步指南。 微信搜索关注《Python学研大本营》&#xff0c;加入读者群&#xff0c;分享更多精彩 与ChatGPT聊天很有趣&#xff0c;而且信息量很大 —— 与它闲聊可以探索一些新的想法。但这些都是比较随意的用例&#xff0c;新奇感很快…

深入理解Python中的依赖注入

一文带你深入了解Python依赖注入。 微信搜索关注《Python学研大本营》&#xff0c;加入读者群&#xff0c;分享更多精彩 简介 依赖注入是软件工程中使用的一种设计模式&#xff0c;它允许在创建对象时由外部提供其依赖关系&#xff0c;而不是自己创建这些依赖关系。换句话说&a…

独立开发变现周刊(第84期):一个地理位置API服务,月收入1.5万美元

分享独立开发、产品变现相关内容&#xff0c;每周五发布。 (合集&#xff1a;https://ezindie.com/weekly ) 目录 1、tiny.host: 简单部署你的web项目2、Verif Tools: 一个在线虚拟身份信息生成器3、screen.studio: 一个桌面端的录屏编辑工具4、一个地理位置API服务&#xff0c…

李彦宏:十年后不会写提示词或被淘汰;GitHub发布Copilot X,动动嘴就能生成代码;Vite 4.2 发布|极客头条...

「极客头条」—— 技术人员的新闻圈&#xff01; CSDN 的读者朋友们早上好哇&#xff0c;「极客头条」来啦&#xff0c;快来看今天都有哪些值得我们技术人关注的重要新闻吧。 整理 | 梦依丹 出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09; 一分钟速览新闻点&#…

22个提升生产力的工具推荐,稳了

子曰&#xff1a;工欲善其事&#xff0c;必先利其器。 本文给大家推荐22个提高生产力的工具&#xff0c;总有一款符合你的需求。&#x1f604;&#x1f604;&#x1f604; 提高生产效率工具推荐 滴答清单/Todoist文件检索利器&#xff1a;Everything文件管理软件-Allen Explor…

百度抢先发布中国版ChatGPT——文心一言,现已开通测试申请

3月16日&#xff0c;百度抢先其他国内科技巨头一步&#xff0c;率先发布被誉为中国版ChatGPT的“文心一言”。 即日起&#xff0c;百度也通过“百度智能云”官网正式开发“文心一言”的预约&#xff0c;申请云服务测试。 但是&#xff0c;目前百度智能云只面向企业级客户开放文…

chatgpt赋能python:Python录制屏幕:如何用Python录制屏幕

Python录制屏幕&#xff1a;如何用Python录制屏幕 如果你曾经想过如何在电脑上录制自己的屏幕以制作教学视频或演示产品&#xff0c;那么你需要了解一些关于Python录制屏幕的知识。Python是一门强大的动态编程语言&#xff0c;因其易于学习、连接数据库和编写简洁的代码&#…

chatgpt赋能python:Python中常见的Module报错及解决方法

Python中常见的Module报错及解决方法 在Python编程过程中&#xff0c;经常会使用各种第三方库和模块&#xff0c;以提高代码的效率和可读性。然而&#xff0c;在使用这些模块时&#xff0c;我们有时会遭遇各种各样的错误和异常。本文将介绍Python中常见的Module报错现象及其解…

chatgpt赋能Python-pythonimport报错

Python中Import报错的处理方法 Python是一款非常流行的编程语言&#xff0c;也是众多开发者选择的首选。在代码中&#xff0c;我们通常会使用import语句来引入其他模块&#xff0c;但在实际开发过程中&#xff0c;我们有时会遇到ImportError&#xff1a;No module named XXX等…