3 回复
个人全职全栈开发,拥有10年丰富开发经验。目前时间充裕,怀着诚意寻求合作机会。
作为个人全职开发者,我熟练掌握vue、uniapp、thinkphp、fastadmin等框架。
另外:还比较擅长原型及UI设计,技能全面覆盖21eew
如果您有开发各端小程序、APP、网页登需求,欢迎随时联系我细聊:纸飞机:https://t.me/webvueuniapp
怎么收费
您好!很高兴看到您作为个人全职接单,并且提到您时间充裕、诚心做事,还拥有丰富的uni-app线上案例。作为IT专家,我理解您希望展示您的专业技能和实际项目经验。以下是一个简单的uni-app项目示例代码,旨在展示如何使用uni-app开发一个基本的待办事项(Todo List)应用。这个示例涵盖了数据绑定、事件处理和页面导航等基本功能。
1. 项目结构
- pages/
- index/
- index.vue
- todo/
- todo.vue
- App.vue
- main.js
- pages.json
- manifest.json
2. index.vue
<template>
<view>
<button @click="navigateToTodo">Go to Todo List</button>
</view>
</template>
<script>
export default {
methods: {
navigateToTodo() {
uni.navigateTo({
url: '/pages/todo/todo'
});
}
}
}
</script>
3. todo.vue
<template>
<view>
<input v-model="newTodo" placeholder="New Todo" />
<button @click="addTodo">Add Todo</button>
<view v-for="(todo, index) in todos" :key="index">
<text>{{ todo }}</text>
<button @click="removeTodo(index)">Remove</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
newTodo: '',
todos: []
};
},
methods: {
addTodo() {
if (this.newTodo.trim()) {
this.todos.push(this.newTodo.trim());
this.newTodo = '';
}
},
removeTodo(index) {
this.todos.splice(index, 1);
}
}
}
</script>
4. main.js
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
5. pages.json
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "Home"
}
},
{
"path": "pages/todo/todo",
"style": {
"navigationBarTitleText": "Todo List"
}
}
]
}
这个示例展示了一个简单的待办事项应用,其中index.vue
页面有一个按钮用于导航到todo.vue
页面。在todo.vue
页面中,用户可以添加新的待办事项,并移除已添加的待办事项。这个示例代码可以作为您展示uni-app开发能力的一个基础案例。希望这对您有所帮助,并祝您接单顺利!