微信小程序编辑基础2

最新推荐文章于 2023-05-30 00:59:11 发布

ll__k

最新推荐文章于 2023-05-30 00:59:11 发布

阅读量157

点赞数 3

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/2301_76841478/article/details/130918772

版权

本文介绍了微信小程序的项目组成，包括pages目录结构、各文件功能。详细讲解了新建页面的两种方法，并深入探讨了构建页面数据的过程，如定义、获取和设置data数据，以及数据绑定、组件属性和控制属性的使用。同时还提到了关键布尔值的正确使用方式。

摘要由CSDN通过智能技术生成

项目组成

pages存放所有页面的文件夹
index 首页
页面名称.js 页面逻辑
页面名称.json 页面配置
页面名称.wxml 页面结构
页面名称.wxss 页面样式
logs 日志页面
utils 工具
utils.js 工具js
eslintrc.js 语法检测配置
app.js 小程序逻辑
app.json 小程序公共配置
app.wxss 小程序的公共样式
project.confg.json 工具配置
project.private.config.json 个人项目配置
sitemap.json 配置小程序及其页面是否被微信索引

新建页面

第一种方法
1.在pages文件夹右键建立新的文件夹
2.在文件中右键点击新建page
第二种方法
在app.json新建页面
在这里插入图片描述

app.json里哪个页面在最上面，默认运行哪个

构建页面数据

1.定义data数据
在页面JS文件page函数中第一项为data属性，在data中定义本页

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ll__k

关注关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

微信小程序入门记录一：this.setData()

Time and Tide waits for no man

03-05

1310

this this指的应该是当前的Page对象。this.data指的应该就是js代码中Page函数中data属性，从而可以通过this.data.再去调用data已经定义的变量。（可以参考JavaScript中对this的解释：http://caibaojian.com/deep-in-javascript-this.html） Tip：this的值并不是由函数定义放在哪个对象里面...

小程序基础入门

西洲

12-18

1518

1、创建小程序 2、代码构成 2.1 小程序配置 app.json app.json是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部tab等。 pages：用于描述当前小程序所有的页面路径，这是为了让微信客户端知道当前你的小程序定义在那个目录 window：定义小程序所有页面的顶部背景颜色，文字颜色等。 { "pages":[ "pages...

3 条评论您还未登录，请先登录后发表或查看评论

微信小程序中的页面文件和组件

qq_36982349的博客

06-08

923

页面的JS文件，用于书写当前页面所需要的脚本代码以及生命周期函数。Page() : 注册了一个页面接收一个对象，该对象用于配置当前页面所需内容。该对象拥有的属性：页面配置文件 JSON文件该文件是针对单个页面的配置与app.json类似。该文件是当前页面的骨架文件等效于纯HTML文件该文件只负责当前页面的样式等效于CSS文件所谓的组件，其实就是HTML中的标签。微信将原本的HTML标签封装了一次，然后叫做组件。因为封装了，所以原来的属性，方法，JS包都将无法在这里使用。微信小程序是双线程的。一个线

微信小程序事件，data-属性的作用

qq_44818085的博客

04-02

7748

1.微信小程序中的事件，以及为什么要用 data- 来绑定属性原因：因为微信小程序中不能直接使用函数传参，就是用data-来绑定一个属性，进行传参  <view bindtap="SetData" data-name="mxc">按钮</view> Page({ data: { name:"" }, // 事件函数与 data 同级 SetData:function(

微信小程序--data的赋值与取值

最新发布

06-01

微信小程序的开发工具是由微信官方提供的，它集成了代码编辑、预览、调试和发布等功能，支持JavaScript、WXML（WeChat Markup Language）和WXSS（WeChat Style Sheets）三种主要语言。WXML负责结构层的定义，类似于...

微信小程序开发-闹钟小程序

05-13

综上所述，开发微信小程序闹钟应用涉及到了小程序的基础知识、组件使用、数据管理以及用户交互等多个方面。通过实际项目实践，开发者不仅可以提升小程序开发技能，也能更好地理解和掌握微信小程序的特性和应用场景。

微信小程序项目实例——备忘录

05-24

在这个实例中，用户可以编辑和保存文本，这需要对用户输入的数据进行管理，通常通过微信小程序的全局数据管理机制实现。 4. **计时功能**：计时功能可能涉及到计时器（timer）的概念。开发者可以使用wx....

微信小程序中修改数据（单个数据，数组）

hjj_flowers的博客

12-13

9022

微信小程序有自己的语法，修改数据我们必须要使用setData(),参数是一个key,value形式的对象。一下是我做的一个关于修改几种数据的小小记录： 1.修改单个值： page({ data:{ resultOpacity:true, }, change(e){ this.setData({ resultOpacity: false, }) } ...

【微信小程序-初级实战】商品/表单编辑

记录

09-16

954

商品编辑功能

手把手教你开发微信小程序自定义底部导航栏

等风来的博客

07-26

1万+

解决微信小程序底部导航栏闪烁问题，手把手教你搭建微信小程序自定义底部导航栏

微信小程序----修改data中的数据，页面数据不改变

止于至善

12-26

7万+

错误原因由于VUE等框架，我们在逻辑层修改data中的数据后，视图层（页面渲染）会跟着发生变化。当然微信小程序也是实现了相同的功能，那么出现错误的原因是什么？答案：微信小程序的setData()方法。常见赋值方式（习惯）导致的错误Page({ data: { isShow: false }, changeStatus(){ console.log(this.dat

微信小程序修改数据对数组的修改

chenzlyan的博客

08-10

1万+

小程序修改数据 小程序中，其实没有双向数据绑定的修改数据： setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。使用setData(),参数是一个...

微信小程序 pages.json配置 condition

拿回忆下酒

04-30

6801

"condition": { //模式配置，仅开发期间生效 "current": 0, //当前激活的模式（list 的索引项） "list": [{ "name": "test", //模式名称 "path": "pages/component/view/index" //启动页面，必选 }] ...

微信小程序自定义属性data-xx使用注意事项

frank_hehe的博客

07-30

3015

在开发小程序的时候，使用data-xx让我遇到了一点问题，找问题找了很久，特此记录一下。如上图：我都是直接用字段deleteReason定义的属性名称如上图：然后根据属性名称获取相应的值然后打印值到控制台如上图：打印出来为undefined 我也是醉了，感觉上面的逻辑没得毛病啊，瞬间就不开心了，然后重新梳理流程检查了一次又一次，还是感觉没问题啊，最后没办法，只有调试了一波如上图：打...

微信小程序系列——对数据的增删改查操作

前方一片光明

07-06

2万+

前言微信云数据库使用的是非关系型数据库，类似于Elasticsearch、MongoDB等，与传统的Oracle、MySQL等关系型数据库不同。建议开发小程序之前先了解一下非关系型数据库基础知识。一、添加文档 wxml: 绑定insert事件 <button bindtap='insert'>插入数据</button> js: insert事件里调用......

零基础学习编辑微信小程序

03-28

作为一个AI，我没有实际的手动操作能力，但是我可以给你一些关于学习编辑微信小程序的建议： 1. 了解微信小程序的基础知识：首先，你需要了解微信小程序的基础知识，包括它的特点、架构、目录结构、开发工具等。 ...