当前端uniapp写的项目开发完成的时候,需要将页面打包出来,生成H5的静态文件,部署在服务器上,通过服务器链接地址,就可以直接在手机上点开访问 了. 在网上看了一圈,好像没有找到十分详细的教程,这里稍微详细的记录了一下,uniapp打包成H5部署到服务器教程. 步骤如下: 1:点击菜单栏发行,点击选择网站-H5手机版,     2:在网站域名这一栏填写,网站域名,例如www.xxx.com或者你的服务器的IP地址47.103.XX.XX,(这个地址是你将项目打包之后存放放静态文件的地址). 我

1. nginx部署h5项目 此为windows部署,liunx也类似的 1.1. 前言 部署h5项目还是很简单的,不过对小白来讲一开始可能也是一脸懵逼,这个简单教程针对的是从未部署过前后端分离前端项目的小白 1.2. 步骤 1.2.1. 下载nginx 如下图目录 1.2.2. 放入经过编译的h5项目 把经过编译的h5项目放入html文件夹下,可以在html里面创建一个单独文件夹,把内容放进去 如下图 1.2.3. 修改conf 进入conf目录,打开nginx.conf文件 1.2.4. 启

因为工作需要,需要进一步了解移动端的开发,遂返回复习移动端的知识点,在开始学习之前,产生了疑惑WEB APP .Native APP .Hybrid APP.React Native.Uniapp.H5这些东西到底是什么?感觉是那么熟悉,单词拆分开每一个都认识,但是合在一起就完全不知道什么意思了,遂自行百度查询,自己解自己的惑吧. 个人博客,理解不具权威性. 一.WEB APP 通俗的理解,WEB APP 即为使用HTML.CSS.JS三大前端基础进行开发的WEB APP,是基于浏览器进行运行使

在我们基于UniApp的H5项目中,需要生成一些二维码进行展示,另外也需要让用户可以扫码进行一定的快捷操作,本篇随笔介绍一下二维码的生成处理和基于H5的扫码进行操作.二维码的生成,使用了JS文件weapp-qrcode.js进行处理,而二维码扫码则是基于一个第三方组件的方式进行支持的,最后通过统一入口来支持不同平台的扫码操作. 1.二维码的生成处理 二维码的生成,使用了JS文件weapp-qrcode.js进行处理的.因此我们在页面或者组件使用它的时候,需要引入JS文件才能调用. import

使用方式 打开uni-app项目下的vue文件 点击菜单 运行->运行到浏览器->Chrome 在Chrome內打开调试模式(右键->检查)开启设备模拟,模拟移动设备(如果UI变形刷新即可) HBuilderX修改代码后会自动刷新chrome的页面 审查元素 在chrome控制台安装vue devtools后可查看节点关系.安装方式自行搜索.每个页面都在page节点下,pageHead是微信和app下的原生导航栏,即pages.json里配的导航栏.pageBody是导航栏下的页面内容.

仿h5+fire自定义事件触发监听 uni-app调用 event.js 源码记录(点击查看) 1.js下载地址 [event.js](https://ext.dcloud.net.cn/plugin?id=333) [源码记录](https://github.com/wojiaoxiaomayun/jsUtil/tree/master/event) 2.js文件直接拖入 3.import event from 'common/event.js' 4.Vue.prototype.event =

在自学游戏开发的路上,最有成就感的时刻就是将自己的小游戏做出来分享给朋友试玩,原生的游戏开可以打包分享,小游戏上线流程又长,那 H5 小游戏该怎么分享呢?本文就带大家通过 nginx 将构建好的 H5 游戏托管的阿里云上. 内容大纲: 下载.配置 nginx 上传游戏构建文件到云服务器 nginx 通过端口设置多个虚拟主机 开发环境: 阿里云服务器:Ubuntu 14.04.5 LTS (GNU/Linux 4.4.0-93-generic x86_64) nginx:nginx/1.4.6 (

第一次使用博客园写博客 1.我写博客的原因,梳理知识,整理思路,好记性不如烂笔头做个记录吧!记录生活! 1.了解 大概在我使用hbuilder的时候,在官网浏览下载的hbuilder时候无意中发现了uni-app,官网建议学习了vue.js之后就容易上手,当时还没学过vue.js,就简单了解了一下.(一年前),后来学习了vue.js也没有去学习uni-app,现在uni-app推广做的很好了,我在mpvue,vue.js的官网上面发现了uni-app的友情链接,大肆推广,搞活动鼓励大家写插件.然

情景: uni-app使用vue框架开发混合APP,虽然APP或者小程序没有跨域,但希望就是写完这个既有H5,又有APP,小程序等,所以能通过后端解决跨域最好.但是不知道是vue的原因还是什么,在PHP接口基类中添加了header头完全不起作用.官方给出的方法也有,具体可以看https://uniapp.dcloud.io/api/request/request. 分析: 1. 以前的做法是在接口添加以下部分就可以解决ajax的跨域(虽然也用过jsonp). // 指定允许其他域名访问 // h

开发文档 https://lbs.amap.com/api 错误状态 https://lbs.amap.com/api/webservice/guide/tools/info/ 虽然用的高德但是你还需要申请一个腾讯地图的key来使用getLocation API https://uniapp.dcloud.io/collocation/manifest?id=h5sdkconfig import amap from '@/static/lib/amap-wx.js'; // 只能用于小程序 co

封装copyText函数,具体如下: copyText(val){ let result // #ifndef H5 uni.setClipboardData({ data: val, success() { result = true }, fail() { result = false } }); // #endif // #ifdef H5 let textarea = document.createElement("textarea") textarea.value = val

找到项目的根目录下的pages.json文件,添加一下内容,可以去掉对应页面的导航栏 附上代码 "app-plus":{ "titleNView": false }

在网上搜索了许多关于uniapp引入腾讯地图的方法都以失败告终,我开发的应用主要使用于H5,小程序与H5是不同的sdk,就不在这说了,况且小程序有手把手教学,可参考腾讯地图官网https://lbs.qq.com/ 想看怎么导入,直接跳到第三点 开发过程中主要遇到的问题为: 1.SDK问题 网上关于sdk的申请已经有很多教程了,此处便不多说,uniapp内置了map组件,但是使用过的人都知道,uniapp内部的组件,只支持了标点marker等一些简单api,如果想使用搜索附近商店.搜索附近医院.

什么是 uni-app 1 uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS.Android.H5.小程序等多个平台. 官方的体验例子: 2 uni-app在跨端数量.扩展能力.性能体验.周边生态.学习成本.开发成本等6大关键指标上拥有极强的竞争优势 . 跨端数量更多 平台能力不受限 性能体验更优秀 周边生态丰富 学习成本低 开发成本低 3 功能框架 使用 uni-app 的前置条件 2.1 规范     为了更好的跨端开发,我们最好还是制定

 前端跨平台框架 之uniapp入门浅析 技术的发展总日新月异,处在风口,前端技术的发展尤为迅速,跨平台的概念也在前端流行起来.从最早期PhoneGap.lonic.Cordova,到近年来的ReactNative.weex.flutter,前端开发者在跨平台方面的探索从未停止过.趋势使然,类似uniapp框架出现在前端技术圈是技术发展潮流下的必然产物.作者自己也对uniapp框架进行了探索和实践,下面从几个方面介绍这一框架及其用法,欢迎大家踊跃讨论 一.什么是 uni-app? uni-app

框架列表. https://www.cnblogs.com/xiaxiaxia/articles/5705557.html 前言 近期,要开一个新的项目,APP类型.最重要的需求就是能够随时调整APP的绝大部分内容,所以,打算使用webapp的方式开发.在这个大前提下,开始了前期技术选型的工作.看了uni-app,wex5,AppCan,Apicloud,下面就对边看下这几个项目的优劣,帮助大家可以参考. 生态社区特点对比如下: 其技术架构特点对比如下: 整理比较中,中间找资料发现了APIclo

前言 每当我们评估新技术时要问的第一个问题就是“它会给我们的业务和客户带来哪些价值?”,工程师们很容易对闪闪发光的新事物着迷,却经常会忽略这些新事物其实可能对我们的客户没有任何好处,反而只会让现有的工作流程更加复杂. flutter最近比较热闹,毕竟是Google出品. 但我们不是炒作热点的媒体,也不是忽悠你交学费的培训机构,我们作为实际的跨平台开发者,冷静的分析下这个东东. flutter是Google为Fuchsia操作系统设计的应用开发方式. Fuchsia OS要兼容廉价物联网设备,要求

开发工具HbuilderX开发框架 uni-app.h5+1.生成 App 资源升级包1.1.修改版本号1.2.首先,更新 manifest.json 中的版本号.比如之前是 1.0.0,那么新版本应该是 1.0.1 或 1.1.0 这样. 2.发行2.1.然后,在 HBuilderX 中生成升级包(wgt).2.2.菜单->发行->原生App-制作移动App资源升级包 2.3.生成结束会在控制台告知升级包的输出位置. 3.安装资源升级包 3.1.应用的升级需要服务端与客户端配合完成,下面以本

原文可查看此处 ,搜索 uni-app 使用个推推送系统消息 https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=Mzg3NTAzMzAxNA==&scene=124#wechat_redirect 如果此链接在浏览器中无法打开,可将此链接发送给微信好友或者发送到微信文件传输助手.在点击打开 前置条件: 1.1 开发环境:windows 1.2 开发框架 : uni-app .H5+ 1.3 编辑器 :  hbuilderx

最近在给f做一些工具app,学习了不少关于uniapp编写android应用的知识. 首先,App应用的创建的时候要选择项目类型为uniapp类型.最开始我选择的是h5+项目,这种项目就比较容易写成纯js的项目,利用一些html5plus能力,或者使用mui来编写手机app. 我调研了一下,uniapp和h5+(mui为代表)的差异和优缺点如下所示. 技术类型 优点 缺点 uniapp 可以使用unipp封装的组件和api,有海量的插件可以从插件市场中找到.兼容多端,也可以用html5plus的

又是一个周五,又一周要过去了...很开心,这周遇到了vue中的一个比较常见的坑,网上随便一搜就有了很多解决方案...“幸运”的是,我选了一个带坑的方案...所以我觉得有必要记录一下这个“坑中坑”... 事情是这样的: <img :src="item.img ? item.img : '../images/default.png'" alt=""> 接口字段有图片则用接口中的,没有则用本地默认图片...这种写法看似可以,结果很失望——默认图片显示不出来..