uni-app学习笔记

最新推荐文章于 2024-03-15 16:21:35 发布

沐小流

最新推荐文章于 2024-03-15 16:21:35 发布

阅读量1.3k

点赞数 3

本文链接：https://blog.csdn.net/weixin_45487120/article/details/103948062

版权

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库
<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-navigate uni-navigate-right">
					例子
				</view>
			</view>
</view>

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、组件文档结构
<template name="组件名称">
	<view>
	    ......
	</view>
</template>
<script>
export default {
	name: "组件名称",
	//属性
	props: {
		属性名称: {
			type: String,//属性类型
			value: "值"
		},
		......
	},
	//组件生命周期
	created:function(e){
	
	},
	methods: {
		函数名称:function(obj){
		
		},
	}
}
</script>
<style>
组件样式
</style>

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 条件渲染分组)

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>
/*三目运算*/
// v-if=" 问句？： 'A' ，'B'  "

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

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

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

class和style绑定

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

事件处理器

监听、计算属性

监听属性：
1.watch

计算属性：

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

   /* html*/
  <div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
  </div>`

/*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
以下为示例：

<!-- #ifdef APP-PLUS -->  
<view class="status_bar">  
    <view class="top_view"></view>  
</view>  
<!-- #endif -->

.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

沐小流

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
uni-app学习笔记

1.夜神模拟器调试连接工具-选项-第三方android模拟器端口：填入你夜神模拟器的端口号，一般是62001或者打开夜神模拟器的安装文件夹，找到D:\YS\Nox\bin文件夹打开（D:\YS是夜神模拟器安装的路径根目录），找到【debugReport.bat】文件，双击启动该批处理文件。一、下载“夜神模拟器”，https://www.yeshen.com，安装比较简单，默认安装即可。二、...
复制链接

扫一扫