uni-app实现多端开发

多端开发,听名字就感觉不一样,一套代码。多端使用,适用于各个平台。市面上很多关于多端开发的框架,比较常用,流行的框架 uni-app,Chameleon(变色龙),taro这些,都可以支持多端,一套代码,8个平台支持,

语法差异上,uni-app和Chameleon(变色龙)都选择使用的是小程序和vue的语法结合,但是taro语法是react,熟悉react语法,比较熟悉这套框架,对于技术选项,框架的活跃度,这个框架的认知度,选择适合自己的框架.

根据公司的需求,选择框架,选择之前,也是研究了一下这个三个框架,最后还是选择用uni-app选择开发,个人比较熟悉vue,有做过小程序方面的,选择uni-app是最合适的,坑还是比较多,需要多踩坑。

一套代码,测试在6个平台,分别是H5页面,安卓,微信小程序,百度小程序,支付宝小程序,头条小程序这几个平台。

uni-app底层的语法还是用到了weex,而且对应是应用市场插件种类很多,几乎能满足项目的需求,Ul库。选择uni-app的好处

1.微信小程序

先去官网下载开发者工具https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

安装完之后,在编辑器找到安装的目录。

第一次编辑运行的时候,需要在微信编辑器找到设置,选择安全设置,一定要把这个服务端口开启才可以使用。

 2.百度小程序和支付宝小程序

百度小程序开发工具:https://smartprogram.baidu.com/docs/develop/devtools/show_sur/

支付宝小程序开发工具:https://docs.alipay.com/mini/ide/download

这个就不需要配置什么了。安装,配置好对应的目录就可以了,启动的时候,需要手动填写目录地址,uni-app不会自动打开百度小程序和支付宝小程序。需要手动,然后在保存的时候,就会自动刷新

 3.头条小程序

因为这个头条小程序出来没有多久,uni-app做的兼容性不是很好,坑比较多,这个编辑器默认安装C盘,没得选择,也是和百度和支付宝小程序一样,必须是手动打开才行。

头条小程序:https://developer.toutiao.com/docs/devtool/versionUpdate.html

说这个坑,确实坑太多,第一次编辑启动的时候,最重要的三个文件没有加载过来。这个需要手动引入这三个文件,才生效,如果发现运行不成功,报错,一定要看看app.js文件是否引入这个几个文件了

其他小程序都没有问题,只有头条不行。

4.安卓和H5页面

这个相比较就简单了很多,不需要配合什么东西。点击运行对应的就行。

最终效果,经过学习看视频敲写一个案例,运行在对应的平台展示效果

一切准备就绪,就开始慢慢的踩坑,熟悉小程序和vue并且写个项目,上手很快。

原文地址:https://www.cnblogs.com/zhoulifeng/p/11613165.html

时间: 2024-08-02 15:03:57

uni-app实现多端开发的相关文章

专业移动APP 手机APP后台服务端开发

专业移动APP 手机APP后台服务端开发优势:8年PHP 9年JAVA开发经验采用THINKPHP 和JFINAL ,SBadmin 2框架进行开发完善的开发文档免费一年BUG维护 可签协议,可先预付20%,也可分段付款, 亲 请带好需求文档! QQ 184377367 报价原则1:功能列表2:兼容性3:安全要求等级4:是否需要完善的开发文档5:后台UI是否有要求

微信APP支付服务端开发Java版(一)

一.准备工作 去微信开发者中心下载(扫码支付,里面的大部分代码是可以用的) https://pay.weixin.qq.com/wiki/doc/api/micropay.php?chapter=11_1 选择UTF-8的版本copy到你的项目里面 找到Configure.java的类修改成public static String PAY_API = "https://api.mch.weixin.qq.com/pay/unifiedorder"; 下面正式进入代码部分 1 //初始化

uni app video、视频播放开发

视频播放有3种解决方案,使用HTML5的自带video.从HBuilder9.1.3起新增的plus.video的原生视频播放,以及使用Native.js. HTML5自带video标签,可以播放符合HTML5规范的视频格式.注意不含flv.ra等三方商业公司的规范格式.HTML5的video在Android上有较多浏览器兼容性问题,这里有篇网友分享的经典文章讲述了HTML5 video的使用注意,强烈推荐观看.http://ask.dcloud.net.cn/article/569注意事项,A

uni.app实践---微信公众号h5开发记实-----第一篇

介绍:==uni-app== 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可编译到iOS.Android.H5.以及各种小程序(微信/阿里/百度/头条/QQ)等多个平台. uni-app官网:传送门 uni-app插件市场:传送门 前一段时间因为个人了解到这个比较nb的多端开发框架,所以有兴趣自己去尝试了一下,从开始的搭建项目到微信公众号h5的登录-->微信支付都尝试了一遍.第一次尝试也踩了很多的坑.相信有很多小伙伴也遇到过这样的疑惑和问题.(大神略过),所以在这里写下

APP移动端开发html模板

移动端开发模板: 750的稿子除以75: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="renderer" content="webkit&qu

移动端开发备忘

这是一些移动端开发的备忘记录. <meta> 元素 <meta name=“viewport” content=“width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no”/> width:宽度(数值 / device-width)(范围从200 到10,000,默认为980 像素) height:高度(数值 / device-height)(范围从223 到10,000) initial-s

如何进行SuperMap iServer服务端开发

有时候在进行地图应用开发时,可能单纯的客户端无法满足要求(如功能和性能等因素),这时就需要进行iServer的服务端开发.SuperMap iServer 6R/7c的服务端开发步骤如下: 一.在Eclipse中新建一个Dynamic Web Project 此过程截图略去 二.引用iServer所需的各类jar包 经测试后发现,必须引用iServer/WEB-INF/lib下的所有jar包,否则运行时会出现一些奇怪的错误.这些jar包所在的位置为[iServer安装目录]\webapps\is

HTML5-前端开发很火且工资很高?

一 前言 晚上逛论坛看到一篇对从事HTML5前端开发的文章写的非常不错,和目前的市场形势差不多,然后我在其基础上给大家进行加工总结一下分享给大家.今天我们谈论的话题是<<为什么从事HTML5前端开发越来越火,工资高,并且还涨的快>>,针对这个问题进行分析分析. 俗话说的好:"没有调查,就没有发言权",同样在市场浪潮中,同样如果没有实际调查,不要轻易发表言论,误导他人. 现在主要从下面几个方面给大家进行总结和分析呢? 二 目录 HTML5前端开发的薪资 市场的供求

在线教学、视频会议软件 Webus Fox(2) 服务端开发手册

上次在<在线教学.视频会议软件 Webus Fox(1)文本.语音.视频聊天及电子白板基本用法>里介绍了软件的基本用法.本文主要介绍服务器端如何配置.开发. 1配置 1.1 IIS配置 Fox支持最基本的.net Framework4.0和IIS6/IIS7. 在IIS7中,对应应用程序池,需要配置为经典模式,支持.net4.0 1.2 web.config配置 Fox服务器端是暂时是host在IIS上,将来将Host在Windows Service上.对于IIS的配置,web.config是

微信支付服务端开发

前言 最近应公司业务需求,把微信支付完成了,当然已经顺利上线.但是开发的过程是也是踩了很多坑,下面我就先说说开发流程,以及在开发中遇到的大大小小的坑. 开发流程 首先,看一下微信开方平台关于支付的一个时序图,如下: 微信支付时序图https://pay.weixin.qq.com/wiki/doc/api/app/app.php 商户系统和微信支付系统主要交互说明: 步骤1:用户在商户APP中选择商品,提交订单,选择微信支付. 步骤2:商户后台收到用户支付单,调用微信支付统一下单接口.参见[统一