uni-app基础知识

uni-app

uni-app是什么

uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

解释

uni-app是由dcloud公司开发的，多端融合框架，一次开发，多端运行，它的竞品：apiCloud，appCan，Codova，技术架构：vue的语法+小程序的api

端（Hybrid混合开发）

• App端：HTML+、nvue（原生view）、native.js（js原生沟通的桥梁）、weex、内置的ios/安卓的模块使用
• H5端：h5专用api
• 各种小程序（微信为主）

准备工具

• Hbuildx（开发与编译工具）
• 微信小程序开发者工具（微信小程序预览测试）
• 安卓模拟器/真机（运行app）

界面

• 页面框架介绍
  
• 项目目录文件介绍
  

使用uni-app

新建项目

文件—>新建项目---->输入项目名称----->新建

运行到多端

H5

运行------>运行到内置浏览器

小程序

• 设置小程序的端口：设置----->安全设置
  
• Hbuilderx配置微信开发者工具的地址
  
• 配置微信小程序的id
  
  
• 运行到微信小程序：
  

APP

配置模拟器的端口

常见的模拟器的端口

• 夜神模拟器端口号：62001
• 海马模拟器端口号：26944
• 逍遥模拟器端口号：21503
• MuMu模拟器端口号：7555
• 天天模拟器端口号：6555

打开运行到模拟器

注意项

• hbuilder可能需要下载对应的插件
• 运行到安卓模拟器，有视图差距
• 运行可能需要一定的时间

vue语法

uni-app的使用遵循vue的基本语法，这里简单回顾一下

文本渲染

• { {表达式}}
• v-text=“表达式”
• 表达式
  • 可以是简单的js运算：{ {2+3}}
  • js方法调用：{ {title.length}}、{ {title.split(“”).reverse().join(“”)}}
  • 三目运算符：{ {title.length>10?“是的”:“并不是”}}
• v-html富文本

		<view>
			<view class="title">文本渲染</view>
			<view>{
  {title}}</view>
			<view v-text="title"></view>
			<view>{
  {2+3}}</view>
			<view>{
  {title.length}}</view>
			<view>{
  {title.split("").reverse().join("")}}</view>
			<view>{
  {title.length>10?"是的":"并不是"}}</view>
			<view v-html="str"></view>
		</view>

条件渲染

• v-if
• v-else-if
• v-else
• v-show

		<view>
			<view class="title">条件渲染</view>
			<view v-if="isLog">欢迎您，亲爱的xxx</view>
			<view v-else>请先登录</view>
			
			<view v-show="isLog">欢迎欢迎</view>
			<view v-show="!isLog">请先登录</view>
			
			<view v-if="score>90">🚗奖励一辆小汽车</view>
			<view v-else-if="score>80">💻奖励一台电脑</view>
			<view v-else-if="score>70">🛵奖励一辆电瓶车