uni-app学习笔记

1.夜神模拟器调试连接

工具-选项-第三方android模拟器端口：填入你夜神模拟器的端口号，一般是62001或者打开夜神模拟器的安装文件夹，找到D:\YS\Nox\bin文件夹打开（D:\YS是夜神模拟器安装的路径根目录），找到【debugReport.bat】文件，双击启动该批处理文件。
一、下载“夜神模拟器”，https://www.yeshen.com，安装比较简单，默认安装即可。
二、安装完成后，模拟器默认会以平板模式开启，如果需更改为手机模式，点击“设置”图标，选择“高级设置”，分辨率设置为“手机版”。点击“保存设置”，模拟器重启后即可。
三、HBuilder和模拟器端口连接设置，看附件图
1.win + r （Windows）输入cmd进入dos窗口，cd 到夜神模拟器的安装目录bin下， 如：cd D:\Program Files (x86)\Nox\bin
2.然后输入命令：nox_adb connect 127.0.0.1:62001 进行连接 ,接下来使用命令：nox_adb devices 查看连接信息。
3.切换目录到HBuilder的tools目录下:cd D:\HBuilder.7.5.0.windows\HBuilder\tools
4.输入命令：adb connect 127.0.0.1:62001
5.输入命令：adb devices 查看连接信息。
四、接下来，端口设置好后，再HBuilder中就可以直接运行了，点击运行已经创建好的移动APP吧！

d:
cd D:\Program Files\Nox\bin
nox_adb connect 127.0.0.1:62001 
nox_adb devices

2.Uni-App

• 开发环境搭建

工具：Hbuilder-x
插件安装：emmet、NPM、内置浏览器、APP真机运行、uni-app编译、uni-app APP调试、js-beautify、htmlhint、stylelint、eslint-plugin-vue、eslint-js、es6编译
编辑设置：自动换行
运行配置：

• 真机和微信小程序调试
• 引入css官方库、自定义图标库、css动画库

1.下载uni.css\animate.css\iconfont.css到common文件中(animation百度)
2.写入App.vue

     
     引入css官方库
	 @import './common/uni.css';
	 引入css动画库
	 @import url("./common/animate.css");
	 引入自定义图标库
	 @import "./common/icon.css";

3.调用例子

uni-list就是调用了官方css库

			
				
					例子
				
			

4.注意：有些多余路径在使用中不需要时要删除，否则会引发错误。

遇到的问题：

• 调用uni.css - 通用组件、模板样式库时：
  Uncaught Error: Cannot find module ‘@/static/uni.ttf’ at app-view.js:1016
  调用uni.css模板样式库时要带样式库需要的图标素材
• 引入iconfont图标(自定义图标库)
  
  解决方法：删除这些URL路径链接
• 引入iconfont图标无法显示
  一定要将iconfont.css改成icon.css
• 调用组件没有内容显示(部分解决，部分未解决)

• 设置全局属性(globalStyle)

1.在pages.json中配置

例：
"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "仿糗事百科",
		"navigationBarBackgroundColor": "#FFFFFF",
		"backgroundColor": "#FFFFFF"
	}

• 底部导航栏

建四个页面(即为四个按钮)，在pages.json中配置。

• 动画使用
• 选择器(同css3)

---

封装大全

• 自定义封装

1.创建自定义组件并封装

1、新建 组件.vue 文件
2、组件文档结构

2.使用封装组件

1、引用组件
import 组件名称 from "../../components/组件名.vue";
2、注册组件
export default{
	components:{
		组件名称
	},
}
3、在试图模板中使用组件
<组件名称 组件属性="对应的值">

• 封装组件大全
• 全局异常类封装
• 全局验证层封装
• 基层控制器封装
• auth中间件基础用法、auth中间件封装
• 异常类助手函数封装

---

flex布局

• flex布局
  http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

---

• 数据、条件、列表渲染

1.数据渲染

2.条件渲染（https://cn.vuejs.org/v2/guide/conditional.html）

• v-if 、v-else 、 v-else-if (在 元素上使用 v-if 条件渲染分组)

  A


  B


  C


  Not A/B/C

/*三目运算*/
// v-if=" 问句？： 'A' ，'B'  "

• v-show
  注意，v-show 不支持 元素，也不支持 v-else。
  < view v-show=“ok”>Hello!

3.列表渲染(https://cn.vuejs.org/v2/guide/list.html)

• v-for
  < block v-for="(item,index) in list" :key=“index”> //:key不可少
  

• class和style绑定

< div v-bind:class="[‘bor’, ‘fs’]">
< div v-bind:class="[activeClass, errorClass]">
< div v-bind:class="[‘bor’:isActive, ‘fs’:isfs]">
< div v-bind:class="[isActive ? activeClass : ‘’, errorClass]">
< div v-bind:style="{ color: activeColor, fontSize: fontSize + ‘px’ }">
data: {
isActive:true
isfs:false
activeClass: ‘active’,
errorClass: ‘text-danger’
}

• 事件处理器

• 监听、计算属性

监听属性：
1.watch

计算属性：

1. 在模板中放入太多的逻辑会让模板过重且难以维护，对于任何复杂逻辑，你都应当使用计算属性。

   /* html*/
  

  
Original message: "{{ message }}"
  
Computed reversed message: "{{ reversedMessage }}"
  
`

/*js*/
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

结果：
Original message: “Hello”
Computed reversed message: “olleH”
这里我们声明了一个计算属性 reversedMessage。我们提供的函数将用作属性 vm.reversedMessage 的 getter 函数：

console.log(vm.reversedMessage) // => 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // => 'eybdooG'

3.相对于方法，计算属性不需要每次调用方法都运行一次函数，只有在改变计算属性参数时才会运行。
两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。有这种缓存可以提高运行效率
4.Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性，计算属性可以解决命令式的 watch 回调的滥用。
例子：

5.计算属性默认有setter和getter属性
https://cn.vuejs.org/v2/guide/computed.html

• 配置page.json

page.json中写主页顶部栏的签到、搜索框、写动态

• 图片、视频列表样式（布局+css属性）

---

组件

• view、text组件

• 滚动tab导航组件

• 下拉加载组件
• 优化图文列表组件
• textarea组件
• 上传多图功组件
• 修复自定义组件
• 封装公共列表组件
• 轮播组件
• 热门分类组件
• 话题列表组件
• 话题介绍组件
• 公共列表组件
• 小纸条列表组件
• 操作菜单组件
• tab导航组件优化
• 好友列表组件
• 聊天输入框组件
• 聊天列表组件
• 开发文章详情页信息组件
• 评论列表组件
• 评论输入框组件
• 分享功能组件

---

开发

• 搜索页开发
• 自定义导航栏开发

遇到的问题：App去除导航栏后改变状态栏样式

App因为默认为沉浸式，去除导航栏后，页面顶部会直通到状态栏的区域，可能出现如下需求：
改变状态栏文字颜色：设置该页面的 navigationBarTextStyle 属性，可取值为 black/white。如果想单独设置颜色，App端可使用plus.navigator.setStatusBarStyle设置。部分低端Android手机（4.4）自身不支持设置状态栏前景色。
改变状态栏背景颜色：通过绘制一个占位的view固定放在状态栏位置，设置此view的背景颜色，即可达到想要的效果，uni-app提供了一个状态栏高度的css变量，具体参考：http://uniapp.dcloud.io/frame?id=css%E5%8F%98%E9%87%8F
以下为示例：

.status_bar {   
    width: 100%;  
    background-color: #F8F8F8;  
}  
.top_view {  
    height: var(--status-bar-height);  
    width: 100%;  
    position: fixed;  
    background-color: #F8F8F8;  
    top: 0;  
    z-index: 999;  
}

• 上传多图功能开发
• 弹出提示框开发
• 保存草稿功能开发
• 导航栏tab导航开发
• 公共列表样式开发
• 搜索功能开发
• 话题分类页开发
• 操作菜单开发
• 个人空间头部组件开发

---

功能实现

• tab导航栏功能实现
• 上拉加载功能实现
• 上拉加载实现
• 下拉刷新实现
• 下拉刷新功能实现
• 聊天页功能完善
• 搜索列表功能完善
• 表单验证功能实现
• 修改头像功能实现
• 登录类型切换效果实现
• 表单基础功能实现
• 第三方登录组件功能实现
• 清除缓存功能

---

UI构建

• 个人中心UI构建
• 设置页UI构建
• 修改密码UI界面
• 编辑资料UI界面
• 帮助反馈UI界面
• 关于页面UI界面
• 登录页UI界面构建
• 个人空间UI界面

---

其它

• showActionSheet接口使用

---

• 接口开发常见问题

---

• 三级联动城市选择器使用

---

• 个人空间操作菜单

---

• 全局方法和配置文件封装

---

• 监听网络状态

---

• 热更新

---

• 动画效果优化

---

• 后端线上环境部署流程

---

• 数据库创建、基本配置、数据表设计

---

API

• API开发准备
• 获取手机验证码API开发
• 对接阿里大于短信SDK
• 路由分组和API版本控制
• 手机号登录API开发
• 账号密码登录API开发
• 第三方登录API开发
• 文章分类API
• 话题分类API开发
• 退出登录API
  内容到视频151p