微信小程序1~25

创建项目

不用云服务 不用模板

项目调试

左上角工具-编译

没达到效果就清除缓存

全局配置

pages配置

1.页面路由不需要写文件后缀,框架会自动去寻找对应位置的四个文件进行处理

2、小程序中新增/减少页面,都需要对pages数组进行修改

3.未指定entryPagePath时,数组的第一项代表小程序的初始页面(首页)

tabBar字段:

定义小程序顶部、底部tab栏,用以实现页面之间的快速切换,

可以通过tabBar配置项指定tab栏的表现,以及tab切换时显示的对应页面。

注意事项:

tab按数组的顺序排序,list配置最少2个、最多5个tab

如果出现相同的配置项,页面中配置项会覆盖全局配置文件中相同的配置项。

下拉窗口的显示与否

结构

project.config.json:

项目配置文件,常用来进行配置公共的配置

记录整个小程序项目的所有配置

appid(小程序唯一身份证)项目名称 编译设置

project.private.config.json:

项目私有的配置,常用来配置个人的配置

注意事项:

1.project.private.config.json写到.gitignore避免版本管理的冲突。
2.与最终编译结果有关的设置必须设置到project.config.json中

pages--页面

下方新建文件夹 文件夹内部新建文件 自动产生4个文件

app.scss/app.json/app.js

页面编写

在小程序中不能使用HTML标签,也就没有DOM和BOM,CSS也仅仅支持部分选择器

小程序提供了WXML进行页面结构编写,同时提供了WXSS进行页面的样式编写

wXML提供了view、text、image、navigator 等标签来构建页面结构,只不过在小程序中将标签称为组件

WXSS对CSS扩充和修改,新增了尺寸单位rpX、提供了全局的样式和局部样式,

弓外需要注意的是WXSS仅支持部分CSS选择器

语法

rpx:是小程序新增的自适应单位,它可以根据不同设备的屏幕宽度进行自适应缩放

任何型号的手机宽度都为750rpx

一般练习用iphone6

view----相当于div

text---内部不能放其他组件,user-select:长按以后选中文本,space:显示连续空格,lazy-load 图片懒加载:在滑动一定距离后才加载出现

image---mode/src/show-menu-by-longpress

轮播图---用swiper,和放在swiper的swiperItem

autoplay--自动播放 circular循环 inteval计时器 indicator-dots圆点 indicator-color颜色 -active-color当前播放的圆点颜色

图片

1.src 属性:

图片资源地址

2. mode:

图片裁剪、缩放的模式

3. show-menu-by-longpress:

长按图片显示菜单

4.lazy-load:

图片懒加载

注意事项:

1.image默认具有宽度和高度,宽是320px高度是240px
2.image组件不给src属性设置图片地址

相关推荐
DK1858383225216 小时前
【源码开源部署】电竞代练护航陪玩小程序:全游戏服务平台完整解决方案(附宝塔部署教程)
游戏·微信小程序·uni-app·开源·php
码云数智-大飞16 小时前
2026 年跨端开发决战:小程序原生 vs uni-app vs Taro 深度对比
小程序·uni-app·taro
黑马程序员毕设21 小时前
基于Java的仪器管理系统设计与实现
java·开发语言·spring boot·后端·微信小程序
河北清兮网络科技21 小时前
直播APP开发怎么选?流媒体高端定制架构解析,避开模板与外包技术坑
小程序·架构·app·短剧·短剧app·广告联盟
上单带刀不带妹1 天前
小程序图片缓存问题:时间戳和版本号解决图片不更新
缓存·小程序·vue·uniapp
bug总结1 天前
uniapp 微信小程序请求规范
微信小程序·小程序·uni-app
微三云 - 廖会灵 (私域系统开发)1 天前
垂直行业 SaaS 实践|AI 美业小程序,构建美业服务全链路数字化闭环
人工智能·小程序
做萤石二次开发的哈哈1 天前
海康班班通交互一体机技能接入实战:ISAPI透传+OTAP双协议封装,Web/App/小程序教学管理应用一站生成
前端·物联网·小程序·交互·萤石开放平台·蓝海aiot一站式工作台·aiot开发
云迈科技-软件定制开发1 天前
长沙企业软件开发、App 开发全流程|需求、开发、上线、运维拆解
小程序·app开发