uniapp -- (1)

一、环境部署

1、HBuilderX
hbuilderX官网

2、模拟器
夜神模拟器官网
夜神模拟器 安卓模拟器 比较占用资源 需要显卡、内存、CPU配置较高。

二、uniapp介绍

uni-app

• 适合中小公司 能够编译称为多家小程序和APP的一套解决方案
• 多家小程序 ：百度、字节、快应用。。。。
• 都要开发一遍，成本很高(开发、维护)。
• 优势：Dcloud公司 uni-app 一套代码生成多家小程 序和app软件。
• 小缺点：文档有时候不太完善 组件有一些微小的bug

三、安装HBuilderX

1. 安装。

内置浏览器；安装插件–scss、代码美化工具： prettier

2. 运行

1. 使用浏览器运行

2. 使用微信小程序运行
   需要配置。
   ① 根据微信开发者工具的路径进行设置即可。（需要在微信小程序中开启服务端口。顶部设置==>安全=>服务端口 开）

3. 手机模拟器
   ① 安装模拟器安装。自行选择安装路径
   ② 把夜神模拟器和HbuilderX进行关联。

Settings.json ⇒ 运行配置 ⇒ 手机/模拟器运行配置： adb路径选择模拟器的路径，选择adb.exe
③ 重启。HubilderX中运行==》运行手机或模拟器

4. 真机演示
   安卓手机
   数据线连接

• 打开手机开发者模式 不同型号 打开方式不同 借助搜索引擎或者官方网站查看打开方式
• 设置开发者模式中心，开启USB调试和允许USB安装软件
• USB调试和安装软件提示 看具体提示，基本上一路确认

IOS不支持

四、框架学习

1. 目录结构

common  通用的文件
uni_module    uni-ui库组件 
components   基于vue的组件
hybrid  混合调用文件
pages  页面 wxml wxss json…  vue组件 vue文件
platforms  平台相关配置文件
static  静态资源文件（一般用于放小图片）
 
manifest.json   app的相关配置 图标、名称、相关介绍…
pages.json   应用页面的配置 底部导航 开启页面下拉的刷新

2.组件介绍

组件组成部分，零件。

正常的组件使用需要，注册，导入，使用。在uni-app使用组件，无需进行多操作，可以直接声明，然后使用。但是需要遵循它的规则。easycom

components/组件名称/组件名称.vue

① 快捷键 vbs
② 在项目根目录下创建文件components
③ 创建组件。 必须遵循目录规则 components/组件名/组件名称.vue

组件传参

• 父组件传参给子组件

// 父组件中：
  <子组件 name=”值”></子组件>

// 子组件中：接收
// props 有数组写法，对象写法		// 规范 推荐对象写法，限制类型
props: { name: { type: String,  default:"" } }, // 和data同级
页面中使用： {{name}}

3. 路由系统

• 采用小程序的路由跳转。

路由跳转方式： 栈式跳转、标签式跳转

1. 栈式跳转

• 进入新页面，可以进行返回（建立新页面： 右键pages新建页面 输入名称、勾选在pages.json中注册）
  跳转方式： 组件标签跳转、编程方式跳转
  ① 组件标签跳转：navigator

// 组件标签跳转
<navigator url="../detail/detail">去详情页</navigator>

② 编程式跳转：uni.navigateTo

<button type="primary" size="large" @click="gotoDetail">去详情页</button>
// methods中:
gotoDetail(){
uni.navigateTo({
url: '../detail/detail',
success: res => {},
fail: () => {}, 
complete: () => {}
}); },

路由跳转传参

url="../detail/detail?name=abc&age=18"
// 接收页面：
//onLoad生命周期中的一个  当页面首次加载，接收传入参数的
onLoad(option) {
  //option {  "name": "abc", "age": "18"}
}

2. 标签式导航

底部导航 tarBar
page.json中: “tarBar” 按F1可以跳转到注释

4. 生命周期

• 生命周期： 从开始==>结束

uni-app生命周期：uni-app是小程序和vue的结合。同时包含了小程序和vue的生命周期。

种类

uniapp的生命周期：应用生命周期、页面生命周期、组件生命周期

1. 应用生命周期

• onLaunch 当uni-app 初始化完成时触发（全局只触发一次）
• onShow 当 uni-app 启动，或从后台进入前台显示
• onHide 当 uni-app 从前台进入后台
• ………

2. 页面生命周期

• onInit
• onLoad
• onShow
• onReady
• ……
• ………
• onPullDownRefresh 监听用户下拉动作，一般用于下拉刷新
• onReachBottom 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项

3. 组件生命周期

Vue组件 创建 ==> 挂载 ==>更新 ==> 销毁

5. 组件库

6. uniapp打包

1. 微信小程序

运行到微信开发者工具，按照小程序的方式打包

2. 手机打包

IOS打包

需要申请苹果开发者账号和购买证书

Android打包

① 选择项目右侧manifest.json
② 基础配置： 重新获取uni-app应用标识(AppID); 填写应用名称：(安装显示后的名称)
③ App图标配置。 浏览选择一张png图片。自动生成所有图标并替换(生成其他格式的图标)
④ 顶部 发行： 原生App-云打包。打包-安装-继续打包。
⑤ 生成apk安装包

3. H5打包

① 发行。==》 网站-PC Web或手机H5(仅适用于uni-app)
② 网站标题。网站域名（不写也可以）。发行。注意路径
③ 打包好的H5页面后，需要放到web服务器的网站目录，进行访问使用。

创建服务器

引入express。创建服务器
配置静态资源服务器。访问。 运行服务器