uniapp备赛
模块使用
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"usingComponents": {
"uni-group": "/uni_modules/uni-group/components/uni-group/uni-group"
}
},
- 导入模块 在需要使用模块的页面或组件中，通过
import语句导入模块，例如：plaintextCopy codeimport { showToast } from '@/utils/util'@符号表示src目录，utils表示src目录下的utils文件夹，util表示utils文件夹中的util.js文件，showToast表示util.js中导出的showToast函数。 - 导入组件 在需要使用组件的页面或组件中，通过
import语句导入组件，例如：plaintextCopy codeimport uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'uniNavBar表示导入的组件名称，@符号表示src目录，components表示src目录下的components文件夹，uni-nav-bar表示components文件夹中的uni-nav-bar文件夹，uni-nav-bar.vue表示uni-nav-bar组件的vue文件。 - 使用模块 导入模块后，可以在页面或组件的方法中直接调用该模块中导出的函数或变量，例如：
plaintextCopy codeexport default { methods: { showToast() { showToast('提示信息') } } }showToast方法调用了前面导入的showToast函数。 - 使用组件 导入组件后，可以在页面或组件的模板中使用该组件，例如：
plaintextCopy codeuni-nav-bar标签调用了前面导入的uniNavBar组件，并设置了title属性。在components中注册了uniNavBar组件后，才能在模板中使用该组件。
以上是导入模块和组件，并使用它们的基本步骤。具体使用方法还需要根据不同的模块和组件进行调整。
打包成可发布的apk
uview是1.0
比赛可能会出现的问题：
比赛时候uni_modules自己导入的话，可能需要自己导入相应的图标样式，因为联网时它会默认自动导入（本地测试不联网不导入也可以使用-仅复制模块）
-
如果出现图标不能变大，尝试内联样式
-
在组件中加上@click.native="method"需要多加个native才能在组件上使用原生事件
规范
-
在Vue中，类名、方法名应该使用小写字母，并用短横线分隔单词（Java中，方法名通常使用小驼峰命名法，即第一个单词的首字母小写，后续单词的首字母大写）
-
data通常使用小驼峰命名法
-
在组件的JavaScript代码中，组件名应该使用大驼峰命名法，即
MyComponent。
移动备赛
用uniapp写代码：1.显示引导页面 2.5个引导页面可以左右滑动切换，少一个引导页面扣0.1分 3.引导页面显示5个小圆圈标识 4.标识当前引导页面位置 5.最后引导页，显示【网络设置】和【进入主页】按钮 6.点击【进入主页】按钮，跳转至主页面 7.点击【网络设置】弹出对话框，并可输入IP和端口信息项 8.【网络设置】对话框，输入IP和端口信息，点击保存，数据可保存 9.【网络设置】对话框，输入IP和端口数据合法 10.二次进入页面不显示导航页 并进行详细注释解释说明
模块分:
| 显示引导页面 | |
|---|---|
| 5个引导页面可以左右滑动切换，少一个引导页面扣0.1分 | |
| 引导页面显示5个小圆圈标识 | |
| 标识当前引导页面位置 | |
| 最后引导页，显示【网络设置】和【进入主页】按钮 | |
| 点击【进入主页】按钮，跳转至主页面 | |
| 点击【网络设置】弹出对话框，并可输入IP和端口信息项 | |
| 【网络设置】对话框，输入IP和端口信息，点击保存，数据可保存 | |
| 【网络设置】对话框，输入IP和端口数据合法 | |
| 二次进入页面不显示导航页 | |
| UI界面美观度 | |
:key作用
详解v-for中:key属性的作用-CSDN博客
在中间插入一条数据
const list = [
{
id: 1,
name: 'test1',
},
{
id: 4,
name: '我是插队的那条数据',
}
{
id: 2,
name: 'test2',
},
{
id: 3,
name: 'test3',
},
]
123456789101112131415161718
此时更新渲染数据,通过index定义的key去进行前后数据的对比,发现
之前的数据 之后的数据 key: 0 index: 0 name: test1 key: 0 index: 0 name: test1 key: 1 index: 1 name: test2 key: 1 index: 1 name: 我是插队的那条数据 key: 2 index: 2 name: test3 key: 2 index: 2 name: test2 key: 3 index: 3 name: test3 123456
通过上面清晰的对比,发现除了第一个数据可以复用之前的之外,另外三条数据都需要重新渲染;
最好的办法是使用数组中不会变化的那一项作为key值,对应到项目中,即每条数据都有一个唯一的id,来标识这条数据的唯一性;使用id作为key值,我们再来对比一下向中间插入一条数据,此时会怎么去渲染
之前的数据 之后的数据 key: 1 id: 1 index: 0 name: test1 key: 1 id: 1 index: 0 name: test1 key: 2 id: 2 index: 1 name: test2 key: 4 id: 4 index: 1 name: 我是插队的那条数据 key: 3 id: 3 index: 2 name: test3 key: 2 id: 2 index: 2 name: test2 key: 3 id: 3 index: 3 name: test3 123456
现在对比发现只有一条数据变化了,就是id为4的那条数据,因此只要新渲染这一条数据就可以了,其他都是就复用之前的;
-
简单通俗地讲，没有key时，状态默认绑定的是位置，有key时，状态根据key的属性值绑定到了响应的数组元素。
-
key是为了更高效的更新虚拟DOM
-
推荐使用数组内的字段（保证唯一性）作为key的唯一标识，不建议直接使用index
@change
@change在输入框发生变化且失去焦点后触发；
模块
滑动+指示
-
pages/index/com.vue 主页
// 自己补齐swiper-item，官方文档没有，这个是一个滑动一个屏幕
scroll-view
111 111 111 111 111
样式中white-space: nowrap;是不换行-给父元素添加
网络模块-network Site
记事本功能
// autocomplete="off"代表浏览器不自动填充，
- {{ item }}
{{list}}
javaScript中数组的方法
JavaScript Array（数组）对象 | 菜鸟教程
navigator
-
跳转不要加后缀，下面代码如果写成com.vue就会出错
-
open-type写成relaunch才能跳转到tarBar页面
跳转
-
navigator里面也可以嵌套图片等内容
用方法跳转
uni.navigateTo(){
url:"",
success:res=>{
}
}
交互反馈
默认显示成功的icon
@click="clickImg"
methods:{
clickImg(){
uni.showToast(){
title:"发布失败",
icon:'error'
}
}
}
显示消息提示框。
OBJECT参数说明
| 参数 | 类型 | 必填 | 说明 | 平台差异说明 |
|---|---|---|---|---|
| title | String | 是 | 提示的内容，长度与 icon 取值有关。 | |
| icon | String | 否 | 图标，有效值详见下方说明，默认：success。 | |
| image | String | 否 | 自定义图标的本地路径（app端暂不支持gif） | App、H5、微信小程序、百度小程序 |
| mask | Boolean | 否 | 是否显示透明蒙层，防止触摸穿透，默认：false | App、微信小程序 |
| duration | Number | 否 | 提示的延迟时间，单位毫秒，默认：1500 | |
| position | String | 否 | 纯文本轻提示显示位置，填写有效值后只有 title 属性生效，且不支持通过 uni.hideToast 隐藏。有效值详见下方说明。 |
App |
| success | Function | 否 | 接口调用成功的回调函数 | |
| fail | Function | 否 | 接口调用失败的回调函数 | |
| complete | Function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
icon 值说明
| 值 | 说明 | 平台差异说明 |
|---|---|---|
| success | 显示成功图标，此时 title 文本在小程序平台最多显示 7 个汉字长度，App仅支持单行显示。 |
支付宝小程序无长度无限制 |
| error | 显示错误图标，此时 title 文本在小程序平台最多显示 7 个汉字长度，App仅支持单行显示。 |
支付宝小程序、快手小程序、字节小程序、百度小程序、京东小程序、QQ小程序不支持 |
| fail | 显示错误图标，此时 title 文本无长度显示。 | 支付宝小程序、字节小程序 |
| exception | 显示异常图标。此时 title 文本无长度显示。 | 支付宝小程序 |
| loading | 显示加载图标，此时 title 文本在小程序平台最多显示 7 个汉字长度。 |
支付宝小程序不支持 |
| none | 不显示图标，此时 title 文本在小程序最多可显示两行。 |
示例
uni.showToast({
title: '标题',
duration: 2000
});
复制代码
position 值说明（仅App生效）
| 值 | 说明 |
|---|---|
| top | 居上显示 |
| center | 居中显示 |
| bottom | 居底显示 |
绑定
:value="message"
双向绑定 v-model
下面弹出
a(){
uni.showActionSheet({
// 也可在data中定义arr，在这里写arr，itemList是必须项
itemList: ['A', 'B', 'C'],
success: function (res) {
console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
},
fail: function (res) {
console.log(res.errMsg);
}
});
}
冷笑话接口案例
{{data[index]}}
:value
:value是Vue.js框架中的一个指令，用于将数据绑定到表单元素上。在Vue.js中，表单元素的值通常是通过v-model指令来绑定的，而:value指令则是v-model指令的一种简写形式。 :value指令的作用是将Vue实例中的数据绑定到表单元素的value属性上，以实现数据的双向绑定。例如，可以使用:value指令将Vue实例中的message数据绑定到文本输入框的value属性上，当用户在输入框中输入内容时，Vue实例中的message数据也会实时更新。同时，当Vue实例中的message数据发生变化时，文本输入框的value属性也会自动更新为最新的数据。 下面是一个使用:value指令的示例代码：
{{ message }}
slide
设置step // 记不住用这一个 显示当前value 设置最小/最大值 不同颜色和大小的滑块
radio
checkbox
uni-easyinput
普通input加强版，拥有input的一切功能
uView
view官网：uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架
插件市场：DCloud 插件市场
导入注册
uni_modules作用.怎么在uniapp使用，移动开发大赛没有网络，只给了一个uni-modules文件，如何使用，如何导入，用导航栏举例，如何写用户登录页
header-icon
uni_modules 是 uni-app 的扩展插件机制，可以方便地引入第三方插件或者自己开发的插件，提高开发效率。使用 uni_modules 可以将一些常用的功能封装成插件，以便在多个项目中复用。
在 uni-app 中使用 uni_modules，需要先在 pages.json 中配置 uni_modules 的路径，然后在需要使用的页面中引入对应的模块即可。
例如，在导航栏中使用 uni_modules，可以按照以下步骤操作：
首先，在 pages.json 中配置 uni_modules 的路径，例如：
json
Copy code
{
"globalStyle": {
"navigationBarBackgroundColor": "#fff",
"navigationBarTextStyle": "black"
},
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/login/login",
"style": {
"navigationBarTitleText": "登录"
}
}
],
"subPackages": [
{
"root": "uni_modules",
"pages": [
{
"path": "example/pages/demo/demo",
"style": {
"navigationBarTitleText": "示例"
}
}
]
}
]
}
在上面的配置中，我们将 uni_modules 放在了根目录下，同时在 subPackages 中配置了一个示例页面 demo。
2. 然后，在需要使用导航栏的页面中引入 uni_modules 的导航栏模块，例如：
html
Copy code
在上面的代码中，我们首先将 uni_modules 的导航栏模块引入到当前页面中，然后在页面中使用 nav-bar 标签来显示导航栏，并设置对应的标题。
最后，以用户登录页为例，可以按照以下步骤编写：
创建一个 login 页面，例如：
html
Copy code
在上面的代码中，我们使用了 uni_modules 的导航栏模块来显示页面标题，并编写了一个简单的用户登录表单。
2. 在 pages.json 中配置 login 页面，例如：
json
Copy code
{
"globalStyle": {
"navigationBarBackgroundColor": "#fff",
"navigationBarTextStyle": "black"
},
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/login/login",
"style": {
"navigationBarTitleText": "登录"
}
}
],
"subPackages": [
{
"root": "uni_modules",
"pages": [
{
"path": "example/pages/demo/demo",
"style": {
"navigationBarTitleText": "示例"
}
}
]
}
]
}
在上面的代码中，我们将 login 页面添加到了 pages 中，并配置了对应的导航栏标题。
3. 最后，在 main.js 中注册 uni_modules，例如：
javascript
Copy code
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
// 注册 uni_modules
import '@/uni_modules/uni-app-plus/global'
Vue.use(global)
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
在上面的代码中，我们使用 Vue.use(global) 来注册 uni_modules，并在 App 中使用 global，以便在全局范围内使用 uni_modules 提供的功能。
tabBar
uni-easyinput
请输入密码
@keydown
-
uniapp中尝试@keyup.enter不能用。用@keydown.enter可以
keydown.enter 和 keyup.enter 的区别在于事件触发的时机不同。keydown.enter 会在用户按下回车键的瞬间触发，而 keyup.enter 会在用户松开回车键的时候触发。
测试与交付
测试记录模板
| 测试项 | 测试步骤 | 预期结果 | 实际结果 | 是否通过 | 备注 |
|---|---|---|---|---|---|
| 登录功能 | 1. 输入用户名和密码 2. 点击登录按钮 | 跳转到主页面 | 跳转到主页面 | 通过 | 无 |
| 注册功能 | 1. 输入用户名、密码和确认密码 2. 点击注册按钮 | 注册成功并跳转到登录页面 | 注册成功并跳转到登录页面 | 通过 | 无 |
| 搜索功能 | 1. 输入搜索关键字 2. 点击搜索按钮 | 显示搜索结果 | 显示搜索结果 | 通过 | 无 |
测试问题解决模板
| 问题描述 | 问题原因 | 解决方案 | 测试通过 |
|---|---|---|---|
| 登录页面无法显示 | 页面路径错误 | 修改页面路径 | 通过 |
| 注册页面输入框无法输入 | 输入框被禁用 | 解除输入框禁用 | 通过 |
| 搜索结果不准确 | 搜索算法有误 | 优化搜索算法 | 通过 |
测试报告模板
测试概述
本次测试主要针对移动应用的登录、注册和搜索功能进行测试，共测试了3个功能点，测试用例共计9条。
测试结果
测试结果如下：
-
登录功能：全部通过。
-
注册功能：全部通过。
-
搜索功能：全部通过。
测试问题
在测试过程中，发现了以下问题：
-
登录页面无法显示。
-
注册页面输入框无法输入。
-
搜索结果不准确。
解决方案
针对上述问题，我们采取了以下解决方案：
-
登录页面无法显示：修改页面路径。
-
注册页面输入框无法输入：解除输入框禁用。
-
搜索结果不准确：优化搜索算法。
测试总结
本次测试对移动应用的功能进行了全面测试，测试结果良好，所有功能均通过测试。测试过程中发现的问题已经得到了解决。我们将继续完善移动应用的功能，并进行进一步的测试。
案例
-
缺陷描述：系统登录时，输入正确的用户名和密码后，系统提示“用户名或密码错误”。 分析：此类问题通常是由于系统登录模块的代码逻辑错误或数据存储异常导致的。为了准确定位原因，测试人员可以从以下几个方面进行分析：查看系统登录模块的代码逻辑，检查数据存储是否正确，验证是否存在特殊字符等输入错误导致的问题。
-
缺陷描述：系统在某些情况下会出现数据丢失或错误。 分析：此类问题通常是由于系统数据处理模块的代码逻辑错误或数据存储异常导致的。为了准确定位原因，测试人员可以从以下几个方面进行分析：检查数据处理模块的代码逻辑，验证数据存储是否正确，排查系统运行过程中是否出现异常情况等。
-
缺陷描述：系统在某些情况下会出现卡死或崩溃的情况。 分析：此类问题通常是由于系统的稳定性存在问题导致的。为了准确定位原因，测试人员可以从以下几个方面进行分析：检查系统的稳定性测试结果，排查系统运行过程中是否存在内存泄漏等问题，验证系统是否存在资源竞争等情况。 总之，软件测试缺陷分析是一个复杂的工作，需要测试人员具备扎实的测试技术和分析能力，才能准确找出缺陷的根本原因，并提出有效的解决方案，为软件质量的提升提供有力支持。
-
缺陷描述：某个Web页面在特定浏览器中无法正常显示。 分析：此类问题通常是由于页面的兼容性存在问题导致的。测试人员可以从以下几个方面进行分析：检查页面的HTML和CSS代码是否符合标准，验证浏览器兼容性是否完善，排查页面是否存在特殊的JavaScript代码等。
-
缺陷描述：某个移动App在特定设备上无法正常安装或启动。 分析：此类问题通常是由于App的兼容性存在问题导致的。测试人员可以从以下几个方面进行分析：验证App的兼容性是否完善，排查App的运行环境是否满足要求，检查App的代码逻辑是否正确等。
-
缺陷描述：某个系统的性能存在问题，响应时间太长或者并发能力不足。 分析：此类问题通常是由于系统的性能存在问题导致的。测试人员可以从以下几个方面进行分析：检查系统的性能测试结果，验证系统是否有优化的空间，排查系统的代码逻辑是否有问题等。 在实际工作中，测试人员需要根据具体的项目和问题，灵活运用各种测试方法和技术，找出问题的根本原因，并提出有效的解决方案，以确保软件质量的稳步提升。
-
缺陷描述：一个uniapp页面中的某些组件无法正常响应用户的操作。 分析：此类问题通常是由于uniapp页面的代码逻辑存在问题导致的。测试人员可以从以下几个方面进行分析：检查uniapp页面的代码逻辑是否正确，验证组件的事件绑定是否正确，排查页面是否存在冲突的JavaScript代码等。
-
缺陷描述：一个uniapp应用在某些Android设备上无法正常运行。 分析：此类问题通常是由于uniapp应用的兼容性存在问题导致的。测试人员可以从以下几个方面进行分析：验证uniapp应用的兼容性是否完善，排查应用的运行环境是否满足要求，检查应用的代码逻辑是否正确等。
-
缺陷描述：一个uniapp应用在特定场景下存在性能问题，例如启动时间过长或者响应时间过长。 分析：此类问题通常是由于uniapp应用的性能存在问题导致的。测试人员可以从以下几个方面进行分析：检查应用的性能测试结果，验证应用是否有优化的空间，排查应用的代码逻辑是否有问题等。 总之，对于uniapp项目，测试人员需要了解uniapp框架的特点和特性，灵活运用各种测试方法和技术，找出问题的根本原因，并提出有效的解决方案，以确保uniapp项目的质量和稳定性。