多端开发,听名字就感觉不一样,一套代码。多端使用,适用于各个平台。市面上很多关于多端开发的框架,比较常用,流行的框架 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并且写个项目,上手很快。

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

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

    一.准备工作 去微信开发者中心下载(扫码支付,里面的大部分代码是可以用的) https://pay.weixin.qq.com/wiki/doc/api/micropay.php?chapter=11 ...

  2. 微信支付(APP支付)-服务端开发(一)

    微信支付,首先需要注册一个商户平台公众账号,(网址:https://pay.weixin.qq.com/index.php/home/d_login) 目前微信支付的接入方式有四种方式:公众号支付,A ...

  3. 跨端开发技术 | 拼团商城项目同时开发app和小程序的要点

    此项目为拼团商城类型,主要功能包括商品分类.商品详情.商品搜索.拼团.订单管理等. 项目源码在 https://github.com/apicloudcom/group-ec 仓库的 widget 目 ...

  4. APP移动端开发html模板

    移动端开发模板: 750的稿子除以75: <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...

  5. 基于UniApp社区论坛多端开发实战

    什么是移动端WebApp 移动端WebApp: 泛指手持设备移动端的web 特点: - 类App 应用,运行环境是浏览器 - 可以包一层壳,成为App - 常见的混合应用: ionic, Cordov ...

  6. 移动端开发概览【webview和touch事件】

    作为一个前端,而且作为一个做移动端开发的前端,那意味着你要有三头六臂,跟iOS开发哥哥一起打酱油,跟Android开发哥哥一起修bug... Android vs Ios 我在webkit内核的chr ...

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

    上次在<在线教学.视频会议软件 Webus Fox(1)文本.语音.视频聊天及电子白板基本用法>里介绍了软件的基本用法.本文主要介绍服务器端如何配置.开发. 1. 配置 1.1 IIS配置 ...

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

    前言 晚上逛论坛看到一篇对从事HTML5前端开发的文章写的非常不错,和目前的市场形势差不多,然后我在其基础上给大家进行加工总结一下分享给大家.今天我们谈论的话题是<<为什么从事HTML5前 ...

  9. 【译】使用 Flutter 实现跨平台移动端开发

    作者: Mike Bluestein   | 原文地址:[https://www.smashingmagazine.com/2018/06/google-flutter-mobile-developm ...

  10. APP的三种开发模式

    转载于http://pleasureswx123.github.io/2014/09/15/APP%E7%9A%84%E4%B8%89%E7%A7%8D%E5%BC%80%E5%8F%91%E6%A8 ...

随机推荐

  1. JavaScript笔记六

    1.对象(Object) - 对象是JS中的引用数据类型 - 对象是一种复合数据类型,在对象中可以保存多个不同数据类型的属性 - 使用typeof检查一个对象时,会返回object - 创建对象 - ...

  2. 通俗化讲解JWT鉴权的使用场景及结构安全

    一.基于Session的应用开发的缺陷 在我们传统的B\S应用开发方式中,都是使用session进行状态管理的,比如说:保存登录.用户.权限等状态信息.这种方式的原理大致如下: 用户登陆之后,将状态信 ...

  3. firebug和HTML查看源代码的区别

    1.审查元素或者开发者工具或firebug看到的html是现在实时性的内容,经过js修改的: 2.而网页查看源代码看到的是最开始浏览器收到的HTTP响应,静态的html.

  4. Xftp工具连接 报错: 无法与 “ 目标IP ” 连接

    这里是OpenSSH升级导致 查看sshd_config [root@sdw1 glibc]# vim /etc/ssh/sshd_config 查找后进行修改 [root@sdw1 glibc]# ...

  5. 关于jsp中jstl报错Can not find the tag library descriptor for "http://java.sun.com/jsp/jstl/core

    有的时候在开发jsp时,需要使用jstl时,在jsp上面引用jstl却出现错误:Can not find the tag library descriptor for "http://jav ...

  6. Thinkphp5——数据库表名的大小写问题

    ThinkPHP5中数据库的表名如果是驼峰命名法,会被转换成小写加下划线,解决方法如下: 1.表名全部小写,因为数据库的表名区分大小写的. 2.使用Db::table("表名"), ...

  7. 【玩转MLS系列】基础教程

    1.申请华为机器学习服务MLS标准版服务: 1.如果还未注册华为云,请先进入华为云官网https://www.huaweicloud.com/进行注册:如果已注册,请登录,转第2步. 2.在华为云官网 ...

  8. TC297B - 外设头文件解析(以IO为例)

    打开例程,目录树下的Includes中包含了各个片上资源对应的头文件,这些头文件定义了相应外设的寄存器地址(寄存器是内置于各个 IP 外设中,是一种用于配置外设功能的存储器,就是一种内存,并且有相对应 ...

  9. 利用 FC + OSS 快速搭建 Serverless 实时按需图像处理服务

    作者:泽尘 简介 随着具有不同屏幕尺寸和分辨率设备的爆炸式增长,开发人员经常需要提供各种尺寸的图像,从而确保良好的用户体验.目前比较常见的做法是预先为一份图像存放多份具有不同尺寸的副本,在前端根据用户 ...

  10. [TimLinux] myblog 创建第一个app

    1. 项目结构 项目地址:https://github.com/timscm/myblog.git 2. 启动项目 通过pycharm启动项目,进入调试模式: "D:\Program Fil ...