沧州网站制作,校园在线网站怎么做,太原开发网站公司,专做律师网站微信开发文档 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
