uni-app 知识点

---【uni-app】:

  是一个使用vue。js开发所有前端应用的框架,开发者编写一套代码,可发布到ios,android,H5,以及各种小程序,

  (微信/支付宝/百度/头条/QQ/钉钉)等多个平台

---【环境搭建】:

  1,安装APP开发版HBuilderX

  2,安装微信开发者工具

---【使用HBuilderX初始化项目】:

  1,点击HBuilderX菜单栏文件》项目》新建》

  2,选择uni-app填写项目名称,项目创建的目录

---【项目的运行】 可以打包成H5网页,安卓/IOS应用,和各种小程序

  1,点击运行,选择运行在浏览器

  2,点击运行,运行在小程序》运行在微信开发者工具

    -第一次运行在微信开发者工具时需要注意两个问题,

    1,第一次运行会弹出一个框需要填写微信开发者工具的路径

    2,右键桌面的微信开着工具,打开文件夹所在位置,复制路径,然后把路径粘贴到弹出框里

    设置完路径打开微信小程序可能会报错,打不开,须在微信开发者工具里进行设置

    1,点击上方菜单的设置》安全设置》端口号,选择开启

  3,运行在安卓手机/ios手机,点击运行》运行在手机或者模拟器,前提是手机用数据线连接电脑

---【项目目录介绍以及开发规范简介】:

  1,page文件夹,存放页面的文件夹

  2,static文件夹,存放静态资源的文件夹 /图片/字体图标,等

  3,unpackage>dist     存放最终打包输出的文件

  4,App.vue 文件    是项目的根组件 是页面的入口文件,可调用应用的生命周期函数

  5,main.js 文件      是项目的入口文件 ,项目加载首先会加载main.js

  6,manifest.json 文件 用来配置应用的一些打包的东西

  7,pages.json  文件    用来设置整个项目的页面的存放路径,以及窗口的外观

  8,uni.scss  文件   常用的样式变量

开发规范:

  1,页面文件遵循vue中文件组件 ,后缀为vue

  2,组件标签靠近小程序规范  详见官方文档

  3,接口能力,靠近微信小程序规范,但需前缀wx替换为uni   详见官方文档

  4,数据绑定及事件处理同vue.js规范,同时补充了app及页面的生命周期

  5,为兼容多端运行,建议使用flex布局 进行开发

 

---【全局外观的样式,配置】:pages.json

  1,‘globalStyle":{

    "navigationBarBackgroundColor":"#F8F8F8"     //设置顶部导航栏的背景色  十六进制

    "navigationBarTextStyle":"black"                        //设置顶部导航栏标题的文字颜色 仅支持black/white     字符串

    "navigationBarTitleText":"xxxxxx"                       //自定义标题的文字

  

  }

 

uni-app 知识点

上一篇:汇编语言-使用BIOS进行键盘输入和磁盘读写


下一篇:Error parsing SQL Mapper Configuration. Cause: java.io.IOException: Could not find resource com/mapper/userMapper.xml