当前位置： 首页 > news >正文

ssp网站怎么做,网站建设 青岛,一家专门做瓷砖特卖的网站,杭州租房网站建设微信开发文档 https://developers.weixin.qq.com/miniprogram/dev/framework/ 报错在调试器的console里找 一、结构 Ctrl 放大字体 Ctrl - 缩小 设置 - - - 外观设置 - - - 可以修改喜欢的主题颜色 index.js index.json index.wxml 》 html view classbox 放大字体 Ctrl - 缩小 设置 - - - 外观设置 - - - 可以修改喜欢的主题颜色 index.js index.json index.wxml 》 html view classbox hover-classboxhover hover-stay-time0 你好view classinner hover-classinnerbox hover-stop-propagation早上好/view /viewindex.wxss 》 css .box{width: 200px;height: 200px;background: red; }logs 日志 utils - - - 工具类 封装方法 .eslintrc.js - - - 规定代码格式化 全局配置 app.js - - - 逻辑文件 app.json - - - 配置项 app.wxss - - - 全局样式 project.config.json - - - 公用配置 project.private.config.json - - - 私人配置
sitemap.json - - - 地图 检索机制 二、组件 1.view 视图容器 view 》div 简写 输入下面代码 敲回车

.box.top.bar

view classboxview classtopview classbar/view/view

/view.row{\(}*3 # \) is number

view classrow1/view view classrow2/view view classrow3/viewhover-class - - - 指定按下去的样式类。当 hover-class“none” 时没有点击态效果 hover-stop-propagation - - - 指定是否阻止本节点的祖先节点出现点击态 hover-start-time - - - 按住后多久出现点击态单位毫秒 hover-stay-time - - - 手指松开后点击态保留时间单位毫秒 2.text 基础内容 text 》 span 常用WebView属性 user-select - - - 文本是否可选该属性会使文本节点显示为 inline-block space - - - 显示连续空格 decode - - - 是否解码

True在页面显示

text decodeTruelt;/text3.icon 图标 基础内容 icon type - - - 有效值success, success_no_circle, info, warn, waiting, cancel, download, search, clear size - - - icon的大小单位默认为px color - - - 颜色 4.progress 进度条 vant weapp - - - UI组件库 5.rpx 像素 指南 - - - 小程序框架 - - - wxss rpxresponsive pixel: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。 可将图片改为宽750px 100vw屏幕的宽度 100vh屏幕的高度 6.scroll-view 可滚动视图区域 scroll-view classscroll scroll-y.row{$}*7 /scroll-view将scroll-y变为scroll-x给row元素添加display:inline-block;父元素添加white-space:nowrap;不换行 .row:last-child{}最后一个row 可制作bar导航栏等 7.movable-area 可移动区域 和movable-view搭配使用 movable-view可移动的视图容器在页面中可以拖拽滑动。movable-view必须在 movable-area 组件中并且必须是直接子节点否则不能移动。 行内样式 movable-area stylewidth: 400rpx;height: 400rpx;background: #eee;overflow: hidden; scale-areaFalsemovable-view stylewidth: 100rpx;height: 100rpx;background: orange; directionall scale x20rpx y20rpx out-of-boundshello/movable-view /movable-area8.match-media 匹配检测节点 可以指定一组 media query 规则满足时这个节点才会被展示。 通过这个节点可以实现“页面宽高在某个范围时才展示某个区域”这样的效果。 match-media min-width300 max-width600view当页面宽度在 300 ~ 500 px 之间时展示这里/view /match-media9.root-portal 使整个子树从页面中脱离出来类似于在 CSS 中使用 fixed position 的效果。主要用于制作弹窗、弹出层、全屏遮挡mask等。 脱离了文档流所以样式要写到app.wxss里 做布局 重要 z-indes:10 - - - 设置定位元素及其后代元素或 flex 项目的 Z 轴顺序 - - - 数字越大在越上面 root-portalview classmask/view /root-portal对mask写样式放到app.wxss里 .mask{width: 100vw;height: 100vh;background: rgba(0,0,0,0.5);position: fixed;top: 0;left: 0;}需要用到定位 position top left等 三、 1.app.json 全局及页面配置 指南 - - - 配置小程序 - - - 全局配置 框架 - - - 小程序配置 - - - 全局配置|页面配置 {pages:[pages/index/index,pages/logs/logs],window:{# 下拉 loading 的样式仅支持 black / white backgroundTextStyle:light,# 导航栏背景颜色如 #000000navigationBarBackgroundColor: #fff,# 导航栏标题文字内容navigationBarTitleText: Weixin,# 导航栏标题颜色仅支持 black / white navigationBarTextStyle:black},style: v2,sitemapLocation: sitemap.json }按Alt 上下箭头可以将该行上下移动 - - - 注意逗号 新增页面 在pages里添加保存 普通编译 - - - 添加编译模式 - - - 启动页面 - - - 选择页面 更换单独页面的导航栏标题在自己的json文件里修改 {navigationBarTitleText: 查看启动日志,usingComponents: {} }2.image src 图片资源地址 3种引入方式 组件 - - - 媒体组件 - - - image 资源管理器中的pages单击右键点击在资源管理器中显示新建static文件夹存放静态文件imagesfontscss等文件夹 image src../../static/images/snake.png mode/ !– 斜杠可以直接来到根目录 – image src/static/images/snake.png mode/ !– 在网页直接复制图像的地址 – image srchttps://gimg2.baidu.com/image_search/srchttp%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Ff3bc3c72-69da-40a6-b8bf-c7f57d43ee64%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpgreferhttp%3A%2F%2Fsafe-img.xhscdn.comapp2002sizef9999,10000qa80n0g0nfmtauto?sec1698830501t5030ca03d4fe259fdb86c47615375dc1 mode/mode 图片裁剪、缩放的模式 image 默认 hieght:240px; width:320px; 默认scaleToFill缩放模式不保持纵横比缩放图片使图片的宽高完全拉伸至填满 image 元素 常用 widthFix缩放模式宽度不变高度自动变化保持原图宽高比不变 heightFix高不变宽度自适应 aspectFit可以将图片完整展示出来 webp格式的图片需要添加webp属性 image src webp mode/3.video 视频 和 unicloud 尽量不放在本地占内存 可以将视频放到服务器或unicloud - - - 新建服务空间 - - - 阿里云 - - - 免费1个月 初始化比较慢耐心等待大概10min手动刷新 云存储 - - - 上传文件 - - - 详情里有url video srchttps://mp-95549144-5213-4a30-8bc8-a4b4e2563b57.cdn.bspapp.com/1-2-16.mp4/可能会遇到报错 给视频加上 autoplay controls 这两个属性顺便加一个muted静音 详情 - - - 本地设置 - - - 将启用代码自动热加载关掉
4.navigator 页面链接导航 navigator 》 a - - - a href target /a 可以使用文字/图片跳转 navigator url/pages/index/indexindex/navigatornavigator url/pages/logs/logsimage src/static/images/snake.png mode/ /navigatoropen-type 常用 navigator url/pages/index/index open-typeindex/navigator