uni-app开发_uni-app混合开发 - CSDN
精华内容
参与话题
  • uni-app跨平台APP开发

    千次阅读 2019-01-05 10:27:27
    uni-app跨平台APP开发uni-app 介绍开发开发工具HBuilderX模拟器连接框架介绍目录结构生命周期路由页面样式与布局配置pages.jsonmanifest.json组件、接口 uni-app 介绍 uni-app 是一个使用 Vue.js 开发跨平台应用的...

    uni-app 介绍

    uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。
    适用平台:Android、iOS、微信小程序。实现了一套代码,同时发布到Android、iOS、微信小程序。
    官方:https://uniapp.dcloud.io/

    开发

    开发工具

    (1)HBuilderX
    下载地址:http://www.dcloud.io/hbuilderx.html
    (2)微信开发者工具
    下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

    HBuilderX模拟器连接

    夜神模拟器 下载地址:https://www.yeshen.com/
    (1)打开夜神模拟器
    (2)找到模拟器安装目录,执行以下命令

    nox_adb connect 127.0.0.1:62001
    nox_adb devices
    

    在这里插入图片描述
    (3)找到hbuilder的adb.exe路径
    在这里插入图片描述
    (3)设置端口号
    在这里插入图片描述
    (4)选择项目运行-模拟器
    在这里插入图片描述

    框架介绍

    官方:https://uniapp.dcloud.io/frame

    目录结构

    ┌─components            uni-app组件目录
    │  └─comp-a.vue         可复用的a组件
    ├─hybrid                存放本地网页的目录,详见
    ├─platforms             存放各平台专用页面的目录,详见
    ├─pages                 业务页面文件存放的目录
    │  ├─index
    │  │  └─index.vue       index页面
    │  └─list
    │     └─list.vue        list页面
    ├─static                存放应用引用静态资源(如图片、视频等)的地方,注意:静态资源只能存放于此
    ├─main.js               Vue初始化入口文件
    ├─App.vue               应用配置,用来配置App全局样式以及监听 应用生命周期
    ├─manifest.json         配置应用名称、appid、logo、版本等打包信息,详见
    └─pages.json            配置页面路由、导航条、选项卡等页面类信息,详见
    

    生命周期

    参考官方:https://uniapp.dcloud.io/frame?id=应用生命周期

    路由

    参考官方:https://uniapp.dcloud.io/frame?id=路由

    页面样式与布局

    参考官方:https://uniapp.dcloud.io/frame?id=页面样式与布局

    配置

    pages.json

    参考官方:https://uniapp.dcloud.io/collocation/pages

    manifest.json

    参考官方:https://uniapp.dcloud.io/collocation/manifest

    组件、接口

    参考官方:
    https://uniapp.dcloud.io/component/README
    https://uniapp.dcloud.io/api/README
    参考官方提供示例模板
    在这里插入图片描述

    全局变量、方法

    (1)定义
    在App.vue的script标签中定义,如:

    global.root = '全局的值';
    global.isAuth = function(){
    	return false;
    }
    

    (2)使用

    在需要使用的页面中使用
    变量:root
    方法:isAuth()
    
    展开全文
  • uni-app开发流程一(项目搭建)

    万次阅读 2019-07-01 15:29:14
    uni-app其实是DCloud推出的众多产品之一,当然我只研究目前能...uni-app是一个使用Vue.js开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台。 1.开始阶段: 公司想要将...

    uni-app其实是DCloud推出的众多产品之一,当然我只研究目前能用到的

    DCloud的官网:https://www.dcloud.io/

    uni-app的官网:https://uniapp.dcloud.io/

    uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台。

    1.开始阶段:

    公司想要将现有的几个前端项目合二为一,又想兼顾h5和小程序(目前),以后可能有app,容我调研一番,简而言之,一套代码,兼容多端,在网上调研发现了个这个比较,非常详细:

    来源地址:https://juejin.im/post/5c4ec383f265da613e229a67,有兴趣可以看一下

    经过我在官网和加入官方QQ群之后,感觉还不错,其实vue的多端兼容平台也就那么几个。。。

    2.选用uni-app

    选用之后,先写demo,看一下难易程度,发现会vue的开发人员能很容易上手,而同时写过小程序的就更容易了,它的api和生命周期是和小程序一模一样的,在自定义组件和编程上遵循vue2.0的规范。

    3.项目搭建

    (1)下载官方推荐编辑器:hbuilderx下载地址

    页面点击右上角下载APP开发版

    在编辑器上直接新建项目,也是非常方便的。

    (2)在HBuilderX界面中点击 工具 - 插件安装,依次安装
    NPM,内置浏览器,UniApp编译,js-beautify,js压缩,css压缩,less编译,scss/sass编译,es6编译等等

    (3)点击工具 - 设置 - 运行配置,
    设置浏览器运行配置里的Chrome安装路径为本机的真实Chrome安装路径
    如:C:/Users/yeyiqing/AppData/Local/Google/Chrome/Application/chrome.exe
    设置小程序运行配置里的微信开发者安装路径为本机的真实微信开发者安装路径
    如:E:/warespace/微信web开发者工具
    设置node运行配置里的node路径为本机的真实node安装路径
    如:C:/Program Files/nodejs/node.exe

    (4)在项目里的manifest.json里找到微信小程序配置,更改小程序AppID

    (5)先打开微信开发者工具,点击设置-代理设置,选择不适用任何代理...
    如需运行:
    先在BuilderX里打开pages下的login.vue页面
    选择HBuilderX界面: 运行-运行到浏览器-Chrome
    运行-运行到小程序-微信开发者工具
    如需打包:
    点击;发行 - H5手机版发行 - 发行
    发行 - 小程序微信 - 发行
    信息会打印到下方控制台里...

    最后,多看官方文档。。。

    展开全文
  • uni-app开发攻略(一) 底部导航栏

    万次阅读 2018-11-14 09:54:09
    HBuilderX:内置uni-app编译器及项目模板,最新版本下载地址 微信开发者工具:编译调试小程序所用,最新版本下载地址 ├─ components ··················· uni-app组件目录 └──comp-a....

    搭建环境

    开发者需分别安装如下工具:

    • HBuilderX:内置uni-app编译器及项目模板,最新版本下载地址

    • 微信开发者工具:编译调试小程序所用,最新版本下载地址

    • ├─ components ··················· uni-app组件目录

    • └──comp-a.vue ··················· 可复用的a组件

    • ├── pages ······················· 业务页面文件存放目录

    • ├─ index ······················ 使用到的字体文件

    • └── index.vue ····················· index页面

    • ├─ list ······················· 使用到的图片文件

    • └── list.vue ····················· list页面

    • ├─ static ··· 存放应用引用静态资源(如图片、视频等)的地方,注意:静态资源只能存放于此

    • ├─ main.js ······················· Vue初始化入口文件

    • ├─ App.vue ··· 应用配置,用来配置App全局样式以及监听

    • ├─ manifest.json ················ 配置应用名称、appid、logo、版本等打包信息 └─ pages.json····· 配置页面路由、导航条、选项卡等页面类信息

    创建项目目录:(自定义项目名称)

    默认选择unapp 默认模版即可

    在这里插入图片描述

    配置pages.json文件

    {
        "pages": [ //pages数组中第一项表示应用启动页
            {
                "path": "pages/index/index",
                "style": {
                    "navigationBarTitleText": "首页",
                    "navigationBarBackgroundColor": "#eee"
                }
            },
            {
                "path": "pages/find/find",
                "style": {
                    "navigationBarTitleText": "发现",
                    "navigationBarBackgroundColor": "#eee"
                }
            },
            {
                "path": "pages/nav/nav",
                "style": {
                    "navigationBarTitleText": "导航",
                    "navigationBarBackgroundColor": "#eee"
                }
            },
            {
                "path": "pages/person/person",
                "style": {
                    "navigationBarTitleText": "我的",
                    "navigationBarBackgroundColor": "#eee"
                }
            }
        ],
    
        "globalStyle": {
            "navigationBarTextStyle": "black",
            "navigationBarTitleText": "uni-app",
            "navigationBarBackgroundColor": "#FF0000",
            "backgroundColor": "#F8F8F8"
        },
    
        "tabBar": {
            "color": "#cdcdcd",
            "selectedColor": "#39cffc",
            "borderStyle": "black",
            "backgroundColor": "#ffffff",
            "list": [{
                    "pagePath": "pages/index/index",
                    "iconPath": "static/icon/index.png",
                    "selectedIconPath": "static/icon/indexsl.png",
                    "text": "首页"
                }, {
                    "pagePath": "pages/find/find",
                    "iconPath": "static/icon/find.png",
                    "selectedIconPath": "static/icon/findsl.png",
                    "text": "发现"
                },
                {
                    "pagePath": "pages/nav/nav",
                    "iconPath": "static/icon/nav.png",
                    "selectedIconPath": "static/icon/navsl.png",
                    "text": "导航"
                }, {
                    "pagePath": "pages/person/person",
                    "iconPath": "static/icon/person.png",
                    "selectedIconPath": "static/icon/personsl.png",
                    "text": "我的"
                }
            ]
        },
    
        "condition": { //模式配置,仅开发期间生效
            "current": 1, //当前激活的模式(list 的索引项)
            "list": [{
                    "name": "首页", //模式名称
                    "path": "pages/index/index", //启动页面,必选
                    "query": "" //启动参数,在页面的onLoad函数里面得到。uid=100&t=1535987051
                },
                {
                    "name": "发现", //模式名称
                    "path": "pages/find/find", //启动页面,必选
                    "query": "" //启动参数,在页面的onLoad函数里面得到。
                },
                {
                    "name": "导航", //模式名称
                    "path": "pages/nav/nav", //启动页面,必选
                    "query": "" //启动参数,在页面的onLoad函数里面得到。uid=100&t=1535987051
                },
                {
                    "name": "我的", //模式名称
                    "path": "pages/person/person", //启动页面,必选
                    "query": "" //启动参数,在页面的onLoad函数里面得到。
                }
            ]
        }
    }
    

    微信开发者工具

    展开全文
  • uni-app开发初体验

    千次阅读 2019-09-22 18:33:58
    uni-app开发初体验1.开发工具下载2.开发文档3.项目源码4.体验5.uni-app组件式开发: 1.开发工具下载 地址: https://www.dcloud.io/hbuilderx.html 2.开发文档 uni-app 是一个使用 Vue.js 开发所有前端应用的框架...

    1.开发工具下载

    地址: https://www.dcloud.io/hbuilderx.html

    2.开发文档

    uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。
    uni-app开发文档: https://uniapp.dcloud.io/
    vue开发文档:https://cn.vuejs.org/v2/guide/
    注意:

    • 由于 JavaScript 的限制,Vue 不能检测以下数组的变动:
    1. 当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue
    2. 当你修改数组的长度时,例如:vm.items.length = newLength
    3. Vue 不能检测对象属性的添加或删除
    4. 解决方案:Vue.set(object, propertyName, value)
    • Class/Style绑定的时候对象的属性带有 - 必须用引号包起来
      比如:v-bind:class="{ active: isActive, ‘text-danger’: hasError }“是可以的
      v-bind:class=”{ active: isActive, text-danger: hasError }"则没有效果

    3.项目源码

    gitee: https://gitee.com/zouchengxin/uni-app-vultr1

    4.体验

    h5版: https://singletondog.top/uni-app-vultr1/unpackage/dist/build/h5/#/
    app下载: https://gitee.com/zouchengxin/uni-app-vultr1/blob/master/unpackage/release/ 或 https://singletondog.top/uni-app-vultr1/unpackage/release/
    android下载: https://gitee.com/zouchengxin/uni-app-vultr1/blob/master/unpackage/release/__UNI__C2730D1_0916212626.apk
    ios下载: https://gitee.com/zouchengxin/uni-app-vultr1/blob/master/unpackage/release/__UNI__C2730D1_0916211213.ipa

    5.uni-app组件式开发:

    1. 组件值/事件传递
      (/components/component-demo/component-demo.vue)组件添加props属性
    <template>
    	<text @click='say'>{{text}}</text>
    </template>
    <script>
    export default {
    		props:{
    			text:{
    				type:String,
    				default:'hello'
    			}
    		},
    		data() {
    			return {
    				
    			};
    		},
    		methods:{
    			say(){
    				console.log(this.text);
    				this.$emit('onClick',this.text);
    			}
    		}
    	}
    </script>
    <style>
    
    </style>
    

    使用组件的地方在组件上添加对应属性

    <template>
    	<view>
    		<uniCom text='hello...' @onClick="onSay('are you ok?')"></uniCom>
    	</view>
    </template>
    
    <script>
    	import uniCom from "@/components/component-demo/component-demo.vue";
    	export default {
    		components:{
    			uniCom
    		},
    		data() {
    			return {
    				
    			};
    	},
    		
    		onLoad(options){
    			
    		},
    		methods:{
    			onSay(str){
    				console.log(str);
    			}
    		}
    	}
    </script>
    <style>
    
    </style>
    
    1. 结果:
      在这里插入图片描述
    展开全文
  • uni-app开发记录一

    2019-04-25 18:51:58
    2、uni-app开发 中 text 标签嵌套image标签问题 text标签嵌套image,浏览器上图片正常,手机上是不能正在显示的。 3、设置背景颜色渐变,高度自适应,最小高度全屏解决方案 min-height: 100vh; display: flex; ...
  • uni-app开发流程二(项目开发)

    千次阅读 2019-07-01 16:41:21
    用了一个礼拜,将之前的一个小...这个小程序当时为了追求页面效果,用了colorUI样式ui,在这里我并不想舍弃,但好在,colorUI团队为uni-app开发了一套可用的,兼容多端的样式ui,在ColorUI-UniApp下载地址可以下载...
  • UNI-APP开发工具与环境

    千次阅读 2019-05-14 11:22:14
    开发工具与环境 IDE: HBuilderX、微信开发者工具 HBuilderX:http://www.dcloud.io/hbuilderx.html 微信开发者工具:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 真机运行 PC端...
  • uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。 开发者通过编写 Vue.js 代码,uni-app 将其编译到iOS、Android、微信小程序等多个平台,保证其正确运行并达到优秀体验。 uni-app 继承自 Vue.js,提供了完整...
  • 有熟悉uni-app的一定知道,uni-app本来就可以编译打包成为app,为什么还要用原生app套壳,不是增加负担么,其实,这是由于项目中也属需求,暂时uni-app没有办法达到目标,于是使用uni-app开发H5端,再使用原生...
  • 刚开始知道这5+ mui、uni-app这些名词的时候,只知道是中国自己的产品,并且是关于用html5等开发类似原生app的框架。 刚好最近接手一个app开发任务,他们又不想面对andriod和ios开发两套,于是我就想到了可以用...
  • uni-app是一个使用 Vue.js 开发跨平台应用的前端框架,使用hbuilder X可以快速将一套代码打包至最多7个平台。对于个人开发者,或者创业公司来说就是开发神器,省去了很多开发成本。下面就给大家介绍一下怎么快速上手...
  • uni-app开发之模拟器使用

    万次阅读 热门讨论 2018-12-05 14:09:04
    uni-app开发选择雷电模拟器,不需要安装什么东西,也不用配置啥,直接安装,简单粗暴 安装完之后打开模拟器 在设置里面打开开发者模式,和手机上面一样选择开发者模式 打开USB调试: OK,现在准备好了,可以...
  • uni-app开发微信小程序的简要流程

    万次阅读 多人点赞 2020-08-17 13:56:04
    uni-app开发微信小程序 1. 开发工具调试 然后打开微信开发工具—>设置—>安全—>开启服务端口(微信开发者工具最新版) 进入XHbuilder,点击工具—>设置,找到微信开发者工具安装目录,设置启动地址, ...
  • 在打算使用uni-app之前,我仔细研读了官方文档大概有4、5遍,这么做的目的也是为了在开发的时候尽量少一些坑,因为时间不多,只想一次写好。 官方文档:uni-app官方文档 首先介绍一下我们开发的产品,要求跨平台的,...
  • uni-app开发中使用uni.navigateBac后想将数据传到上个页面,微信中使用setData可以做到,在uni-app开发中是无效的,解决办法如下: 1.在main.js文件中加入 Vue.prototype.$eventHub = new Vue(); 2.在监听页面...
  • uni-app入门

    万次阅读 多人点赞 2019-09-10 15:59:27
    uni-app 是使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台。 uni-app的优点 跨平台发行,运行体验更好 与小程序的组件、API一致; 兼容weex原生渲染,...
  • uni-app收费吗? uni-app 是免费产品,DCloud公司不会向开发者收取任何费用,大家可以放心使用。 DCloud提供的所有开发工具都是免费的,也不会有什么陷阱。 DCloud的盈利点在帮助开发者进行推广和流量变现上,而...
  • 最近利用业余时间 和朋友在一起做了一个项目, 一个移动端的app,需要开发一下,可以编译到微信小程序,H5,支付宝小程序,百度小程序,头条小程序,安卓,iOS. 项目刚开始的时候,调研了很多资料.找到了几个比较合适的框架,...
  • 使用uni-app框架创建一个app项目

    千次阅读 2019-03-19 12:51:16
    一个客户端,一个服务端,前面我们安装的WP以及开发一个简易的WP主题就是完成了服务端的准备工作(开发一个简单的WordPress主题),现在我们开始客户端的准备工作——使用uni-app框架创建一个app项目。 需要说明的是...
  • 最重要的需求就是能够随时调整APP的绝大部分内容,所以,打算使用webapp的方式开发。在这个大前提下,开始了前期技术选型的工作。 看了uni-app,wex5,AppCan,Apicloud,下面就对边看下这几个项目的优劣,帮助大家可以...
1 2 3 4 5 ... 20
收藏数 6,764
精华内容 2,705
关键字:

uni-app开发