文章 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 来自:开发者社区

5.5【微信小程序全栈开发课程】首页完善(五)--撤销功能

1、添加撤销方法编辑index.vue文件的script部分,在methods函数中添加撤销方法recallasync recall () { try{ const res = await post('/weapp/deleterecord', {openid:this.userinfo.openId}) console.log("从后端返回的执行正确的信息是:",res) ...

5.5【微信小程序全栈开发课程】首页完善(五)--撤销功能
文章 2022-06-09 来自:开发者社区

5.4【微信小程序全栈开发课程】首页完善(四)--清零功能

1、添加页面部分编辑src/pages/index/index.vue文件的template部分,将清零、撤销按钮添加到页面上面<!-- 参考代码,无需粘贴 <div class="show"> --> <!-- 需要添加的部分 --> <div class="button"> <div class="btn1 right"&...

5.4【微信小程序全栈开发课程】首页完善(四)--清零功能
文章 2022-06-09 来自:开发者社区

5.2【微信小程序全栈开发课程】首页完善(二)--读取当前分数

上一节实现了点击加减分的按钮,在数据库会插入一条数据。但是点击编译按钮(在微信开发者工具的右上角),总分又变成了0。这是因为虽然在数据库中添加的记录,但是当前总分并没有读取到数据库当前的数据,我们在这一节读取当前总分1、添加读取总分方法async getCurrentMark () { try{ const res = await get('/weapp/getmark', {ope...

5.2【微信小程序全栈开发课程】首页完善(二)--读取当前分数
文章 2022-06-09 来自:开发者社区

4.9【微信小程序全栈开发课程】意见反馈(四)--提交反馈信息

1、创建后端操作文件先在后端server/controllers文件夹中创建操作文件createopinion.js,用来将从前端页面提交的数据,插入到opinions表中,创建完之后,页面目录如下2、添加路由在路由管理文件server/routes/index.js文件中添加路由//需要添加的代码 router.post('/createopinion', controllers.create....

4.9【微信小程序全栈开发课程】意见反馈(四)--提交反馈信息
文章 2022-06-09 来自:开发者社区

4.6【微信小程序全栈开发课程】意见反馈(二)--上传照片

1、添加变量在opinion.vue文件data对象中添加4个变量addimage、img_count、src、wechat、userinfoaddimage是未上传照片时默认显示照片的链接、img_count是用户上传照片的数量、src是用户上传的照片链接组成的数组、wechat是用户的微信号码、userinfo是用户信息//参考代码,无需粘贴 //opinion:"", //word_cou....

4.6【微信小程序全栈开发课程】意见反馈(二)--上传照片
文章 2022-06-09 来自:开发者社区

4.5【微信小程序全栈开发课程】意见反馈(一)--实时监控字数

1、添加变量编辑opinion.vue文件script部分的代码,添加data对象,在里面定义两个变量opinion、word_countopinion是用户反馈信息,word_count是用户反馈信息的字数<script> export default { data () { return { opinion:"", word_count:0 ...

4.5【微信小程序全栈开发课程】意见反馈(一)--实时监控字数
文章 2022-06-09 来自:开发者社区

4.2【微信小程序全栈开发课程】个人中心(二)--显示随机语句

1、添加变量编辑//参考代码,无需粘贴 //userinfo:{}, //需要粘贴的部分 quote: ""2、添加方法在methods对象中添加方法rankArray,用来生成当前应该显示的语句methods: { //生成随机语句 rankArray () { //Math.random()会生成0-1之间的小数,比如0.48204242025855937 ...

4.2【微信小程序全栈开发课程】个人中心(二)--显示随机语句
文章 2022-06-09 来自:开发者社区

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

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

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

3.6【微信小程序全栈开发课程】登录功能(四)--显示登录成功弹窗

1、创建工具函数文件创建src/util.js工具函数文件,用来放我们后期会重复用到的函数,比如提示框,HTTPS请求等。粘贴下面代码到util.js文件中//消息提示框 export function showSuccess (text) { //wx.showToast是小程序现成的API,其中title是提示的内容,icon是显示的图标 wx.showToast({ tit...

3.6【微信小程序全栈开发课程】登录功能(四)--显示登录成功弹窗

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

产品推荐

{"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":[{"$id":"0","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"}}

阿里小程序云

阿里小程序云官方技术圈

+关注