小程序实战之记事本(备忘录)

简介: 小程序实战之记事本(备忘录)

技术栈

uni-app、UviewUI、ColorUI、Vuex


项目构造:

image.png

关键配置文件代码:

main.js


import Vue from 'vue'
import App from './App'
import store from './vuex/store'
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)
Vue.prototype.$api = "http://180.76.139.173:3008"
//注册自定义导航栏
import cuCustom from './colorui/components/cu-custom.vue'
Vue.component('cu-custom',cuCustom)
//注册自定义tabar
import tabbar from './pages/components/tabbar.vue'
Vue.component('tabbar',tabbar)
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    ...App,
  store
})
app.$mount()

pages.json


{
  "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
  {
    "path": "pages/user/user",
    "style": {
    "navigationBarTitleText": "用户"
    }
  },
  {
    "path": "pages/index/index",
    "style": {
    "navigationBarTitleText": "详情"
    }
  },
  {
    "path": "pages/add/add",
    "style": {
    "navigationBarTitleText": "新建"
    }
  }
  , {
    "path": "pages/user/loginAndReg/login",
    "style": {
    "navigationBarTitleText": "",
    "enablePullDownRefresh": false
    }
  },
  {
    "path": "pages/user/loginAndReg/register",
    "style": {
    "navigationBarTitleText": "",
    "enablePullDownRefresh": false
    }
  },
  {
    "path": "pages/index/detail",
    "style": {
    "navigationBarTitleText": "",
    "enablePullDownRefresh": false
    }
  }
  ],
  "globalStyle": {
  "navigationStyle": "custom"
  }
}

运行界面

1.登录

image.png


image.png


image.png

2.注册

image.png

3.新建

image.png

4.详情(长按删除、点击查看详情并可以修改)

image.png





相关文章
|
4月前
|
小程序 容器
日程安排小程序实战教程
日程安排小程序实战教程
|
4月前
|
小程序 API
点餐小程序实战教程09-订单功能开发
点餐小程序实战教程09-订单功能开发
|
4月前
|
小程序
云开发电商小程序实战教程-详情页原型
云开发电商小程序实战教程-详情页原型
|
4月前
|
小程序 程序员
云开发电商小程序实战教程-原型编制
云开发电商小程序实战教程-原型编制
|
3月前
|
存储 小程序 前端开发
【微信小程序 - 工作实战分享】1.微信小程序发送手机短信验证码(阿里云)
【微信小程序 - 工作实战分享】1.微信小程序发送手机短信验证码(阿里云)
300 0
|
2月前
|
小程序 安全 搜索推荐
【微信小程序开发实战项目】——个人中心页面的制作
本文介绍了如何设计和实现一个网上花店的微信小程序,包括个人中心、我的订单和我的地址等功能模块。个人中心让用户能够查看订单历史、管理地址和与客服互动。代码示例展示了`own.wxml`、`own.wxss`和`own.js`文件,用于构建个人中心界面,包括用户信息、订单链接、收藏、地址、客服和版本信息。我的订单部分展示了订单详情,包括商品图片、名称、销量、价格和订单状态,用户可以查看和管理订单。我的地址功能允许用户输入和编辑收货信息,包括联系人、性别、电话、城市和详细地址。每个功能模块都附有相应的WXML和WXSS代码,以及简洁的样式设计。
116 0
【微信小程序开发实战项目】——个人中心页面的制作
|
2月前
|
小程序 开发者
uniapp实战 —— 开发微信小程序的调试技巧
uniapp实战 —— 开发微信小程序的调试技巧
226 1
|
2月前
|
前端开发 小程序
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
285 0
|
2月前
|
小程序
【微信小程序】实战案例 -- 向订阅用户发送消息(范例:报名提醒)
【微信小程序】实战案例 -- 向订阅用户发送消息(范例:报名提醒)
141 0
|
2月前
|
小程序 前端开发
【微信小程序-原生开发】TDesign 实战模板——聊天气泡
【微信小程序-原生开发】TDesign 实战模板——聊天气泡
50 0