文章 2022-06-09 来自:开发者社区

6.5【微信小程序全栈开发课程】记录页面(五)--隐藏显示文本框

1、添加data变量编辑RecordList.vue文件的data函数,添加三个变量:ellipsis、note、src其中ellipsis用来控制添加或者编辑文本框显示、note是添加或者编辑文本框中的文本(note默认为记录数据里面的备注)、src是编辑按钮图片链接data () { return { create_time:formatTime(new Date(this.re...

6.5【微信小程序全栈开发课程】记录页面(五)--隐藏显示文本框
文章 2022-06-09 来自:开发者社区

6.4【微信小程序全栈开发课程】记录页面(四)--mpvue时间格式化

1、修改日期文件mpvue框架中有一个专门格式化日期的文件src/utils/index.js文件,将日期格式化成“YYYY.MM.DD hh:mm”格式。编辑src/utils/index.js文件,替换formatTime方法export function formatTime (date) { const year = date.getFullYear() const month ...

文章 2022-06-09 来自:开发者社区

6.3【微信小程序全栈开发课程】记录页面(三)--记录数据组件初始化

1、功能介绍在记录页面对记录数据进行展示,每条记录数据后面都有编辑按钮,点击编辑按钮,出现修改文本框,点击修改按钮后,文本框会自动收起2、创建组件在src/components文件夹下面创建一个RecordList.vue文件,用来展示一条记录写入vue基础代码<template> <div> 记录数据组件 </div> </templa...

6.3【微信小程序全栈开发课程】记录页面(三)--记录数据组件初始化
文章 2022-06-09 来自:开发者社区

6.2【微信小程序全栈开发课程】记录页面(二)--获取记录数据

1、添加data变量添加records变量,用来保存记录数据data () { return { show_record:false, userinfo:{}, records:[], } },2、引入get工具函数//参考代码,无需粘贴 //<script> //需要添加的部分 import {get} from '@/util'3、添加获取记录方法...

6.2【微信小程序全栈开发课程】记录页面(二)--获取记录数据
文章 2022-06-09 来自:开发者社区

6.1【微信小程序全栈开发课程】记录页面(一)--添加记录页面

1、创建记录页面文件夹(1)在src/pages文件夹下面新建一个命名为record的文件夹,并且在文件夹下创建record.vue、main.js两个文件(2)修改src/pages/record/main.js文件main.js是入口文件,通过main.js来加载record.vue文件。每个页面文件夹中都要有main.js文件import Vue from 'vue' import App....

6.1【微信小程序全栈开发课程】记录页面(一)--添加记录页面
文章 2022-06-09 来自:开发者社区

4.4【微信小程序全栈开发课程】个人中心(四)--创建意见反馈页面

1、创建意见反馈页面(1)在src/pages文件夹下面新建一个命名为opinion的文件夹,并且在文件夹下创建opinion.vue、main.js两个文件2)修改src/pages/opinion/main.js文件import Vue from 'vue' import App from './opinion' const app = new Vue(App) app.$mount()(3....

文章 2022-06-09 来自:开发者社区

4.1【微信小程序全栈开发课程】个人中心(一)--页面样式、用户信息展示

第四章,我们来完善个人中心,主要操作是src/pages/me文件夹中的me.vue文件,先看看个人中心页面的效果:1、将个人中心页面放在首页在讲解app.json文件时,提到过在pages数组中第一个页面路径是进入小程序的默认显示页面这一章我们编辑个人中心页面,将个人中心页面路径放在pages数组中的第一个编辑src/app.json文件,将个人中心页面路径放在第一个"pages": [ ...

4.1【微信小程序全栈开发课程】个人中心(一)--页面样式、用户信息展示
文章 2022-06-09 来自:开发者社区

2.5【微信小程序全栈开发课程】个人中心页面搭建

1、创建个人中心页面文件夹(1)在src/pages文件夹下面新建一个命名为me的文件夹,并且在文件夹下创建me.vue、main.js两个文件目前pages文件夹如下所示:(2)修改src/pages/me/main.js文件main.js是入口文件,通过main.js来加载me.vue文件。每个页面文件夹中都要有main.js文件//加载vue组件和me.vue文件 import Vue f....

2.5【微信小程序全栈开发课程】个人中心页面搭建
文章 2022-06-09 来自:开发者社区

2.3【微信小程序全栈课程】index页面完善--vue文件代码解析

1、template 部分(1)修改template部分的代码template里面包含html代码,对应着原生小程序框架里中的.wxml文件。我们将index.vue文件中的template部分的代码修改成下面的代码<template> <div> <div class="show"> <div class="mark-text"...

2.3【微信小程序全栈课程】index页面完善--vue文件代码解析
文章 2022-06-09 来自:开发者社区

2.2【微信小程序全栈开发课程】index页面搭建--ESlint格式错误

1、修改入口文件也就是src/pages/index/main.js文件main.js是入口文件,通过main.js来加载index.vue文件。每个页面文件夹中都要有main.js文件//加载vue组件和index.vue文件 import Vue from 'vue' import App from './index' //新建一个index页面的Vue实例 const app = new ....

2.2【微信小程序全栈开发课程】index页面搭建--ESlint格式错误

本页面内关键词为智能算法引擎基于机器学习所生成,如有任何问题,可在页面下方点击"联系我们"与我们沟通。

微信小程序更多页面相关

产品推荐

{"cardStyle":"productCardStyle","productCode":"aliyun","productCardInfo":{"productTitle":"10分钟搭建微信小程序","productDescription":"本方案为您介绍如何在阿里云快速部署博客网站,并将网站服务快速应用到微信小程序。","productContentLink":"https://www.aliyun.com/solution/tech-solution/develop-your-wechat-mini-program-in-10-minutes","isDisplayProductIcon":true,"productButton1":{"productButtonText":"方案详情","productButtonLink":"https://www.aliyun.com/solution/tech-solution/develop-your-wechat-mini-program-in-10-minutes"},"productButton2":{"productButtonText":"一键部署","productButtonLink":"https://help.aliyun.com/document_detail/2856534.html"},"productButton3":{"productButtonText":"查看更多技术解决方案","productButtonLink":"https://www.aliyun.com/solution/tech-solution/"},"productPromotionInfoBlock":[{"productPromotionGroupingTitle":"解决方案推荐","productPromotionInfoFirstText":"高效构建企业门户网站","productPromotionInfoFirstLink":"https://www.aliyun.com/solution/tech-solution/build-a-website","productPromotionInfoSecondText":"从 HTTP 到 HTTPS 让网站更安全","productPromotionInfoSecondLink":"https://www.aliyun.com/solution/tech-solution/ssl"}],"isOfficialLogo":false},"activityCardInfo":{"activityTitle":"","activityDescription":"","cardContentBackgroundMode":"LightMode","activityContentBackgroundImageLink":"","activityCardBottomInfoSelect":"activityPromotionInfoBlock"}}

阿里小程序云

阿里小程序云官方技术圈

+关注