uni-app基本使用（一）

关注了下最近uni-app使用率在提高，毕竟是多端公用代码，用户体验更接近原生效果，还是值得一看的，今天抽时间进行下总结，如果不对的地方，欢迎指出，及时修改

1.根据官网补充下介绍

1.uni-app是一个使用vue开发跨平台前端应用框架，所以开发者编写vue.js代码即可
2.uni-app通过编译ios android 微信小程序等多个平台，并也达到了比较好的用户体验
3.uni-app因为是跨平台进行编译的，所以原本的html标签是不能使用的，自身定义了一套自己的标签

2.开发环境搭建-及项目创建-及运行

uni-app的开发用HbuilderX  下载app开发版--内置了uni-app编译器及其模板
如果开发小程序的话。需要结合微信开发者工具
 
打开HbuilderX  ---》新建----》项目 ---》uni-app项目    
    一般项目开发是建立空项目模板
    官方直接有一套项目成型模板，也可以创建供参考用
项目运行比较简单-可以用模拟器-也可以用真机-自行百科

3.项目目录结构

components文件夹：组件存放目录
unPackage:编译的临时文件目录
pages.json-->配置页面路由，导航条，选项卡等页面信息
    文件里边几个配置属性：
        globalStyle-->全局配置.如果单个页面不单独进行配置的话，会走全局配置选项
        tabBar-->配置导航页面
        condition-->进行模式配置，仅用作开发阶段生效
        pages-->数组里边每一个元素相当于每一个组件route,默认第一个是首页
main.js--项目入口文件
mainfest.json-->配置应用名称appid, logo,版本等打包信息
page文件夹是是每个页面的组件
static文件夹是存放引用的静态资源
app.vue-->主要包含三个事件监听 
    onLaunch:程序启动执行事件
    onShow:程序开始启动执行事件
    onHide：程序后台隐藏执行事件

4.组件内参数获取

onLoad(options){
    console.log(options) // 这就是url上传递的参数
}

5.常用的标签示例---官网ui直接拉过来就可以用

<view> --相当于div
<text> --相当于p
<navigator> --调转标签 相当于a
    示例:<navigator url="urltwo?id=100">
            <text class="name">{{name}}</text>
        </navigator>

uni-app像素单位是upx
    

今天到这吧  看看有时间继续补上，这个官网还是比较详细的，用法基本结合小程序和vue,其实也真没什么，看一下基本就会了