微信小程序笔记(1)

简介: 微信小程序笔记(1)

微信小程序的一些笔记,仅作参考


对于小程序,所有的页面都需要在app.json 里的pages里进行注册

如果要新增一个页面,首先要新增一个文件夹,再创建一个page,一个page会包含四个子页面

新建页面时小程序开发工具会自动在pages里添加,反之亦然


1687268847302.png


页面数据不会实时更新,需要使用this.setData()方法


1687268854531.png


在页面中获取app实例中的数据,注意,app中的数据不是响应式的,这里共享的数据通常是一些固定的数据


1687268861278.png


获取button携带的item信息,并跳转


1687268867989.png


对于图片image,基本设置mode="widthFix"

尺寸单位

  • rpx(responsive pixel): 可以根据屏幕宽度进行自适应,规定屏幕宽为750rpx。
  • 如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素

Mustache语法WXML基本格式:

  • 类似于HTML代码:比如可以写成单标签,也可以写成双标签;
  • 必须有严格的闭合:没有闭合会导致编译错误
  • 大小写敏感:class和Class是不同的属性
  • 如果使用原生JS或者jQuery的话, 我们需要通过操作DOM来进行界面的更新
  • 小程序和Vue一样, 提供了插值语法: Mustache语法(双大括号)

列表渲染 – wx:for

  1. 在组件中,我们可以使用wx:for来遍历一个数组 (字符串 - 数字)
  2. 默认情况下,遍历后在wxml中可以使用一个变量index,保存的是当前遍历数据的下标值。
  3. 数组中对应某项的数据,使用变量名item获取

1687268877415.png


相关文章
|
5月前
|
小程序
云笔记微信小程序模板
一款简单的云笔记,记事本,手机备忘录微信小程序页面模板。包含:添加记事本、内容编辑、用户反馈等。
171 0
|
6月前
|
存储 JSON 测试技术
【cocos 2d微信小游戏开发教程】基础使用笔记分享(三)
【cocos 2d微信小游戏开发教程】基础使用笔记分享(三)
53 0
|
6月前
|
JSON 缓存 小程序
技术笔记:uniapp微信小程序支付
技术笔记:uniapp微信小程序支付
|
6月前
|
容器
【cocos 2d微信小游戏开发教程】基础使用笔记分享(二)
【cocos 2d微信小游戏开发教程】基础使用笔记分享(二)
78 0
|
6月前
|
API 开发者
【cocos 2d微信小游戏开发教程】基础使用笔记分享(一)
【cocos 2d微信小游戏开发教程】基础使用笔记分享(一)
144 0
|
6月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的笔记记录分享网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的笔记记录分享网站附带文章源码部署视频讲解等
34 0
|
JSON 小程序 JavaScript
微信小程序开发笔记—底部导航栏tabar
本文介绍了微信小程序开发中底部导航栏的设计方法,步骤详细,非常适合初学的小伙伴!
595 0
|
存储 缓存 小程序
微信小程序开发笔记—记事本
本文介绍了如何实现记事本功能,有全部代码、详细设计思路以及踩坑点。
337 2
|
7月前
|
存储 小程序 前端开发
前端知识笔记(四十六)———什么是小程序,什么是数据库
前端知识笔记(四十六)———什么是小程序,什么是数据库
58 0
|
存储 小程序 数据可视化
微信小程序开发笔记—天气获取显示
本文主要介绍了如何实现微信小程序的天气获取和显示功能,内容全面,而且附有实现程序,有一定的参考价值。
336 0