微信开发文档 https://developers.weixin.qq.com/miniprogram/dev/framework/
报错在调试器的console里找
一、结构
Ctrl + +放大字体
Ctrl + – 缩小
设置 – – – 外观设置 – – – 可以修改喜欢的主题颜色
index.js
index.json
index.wxml ==》 html
view class="box" hover-class="boxhover" hover-stay-time="0" >
你好
view class="inner" hover-class="innerbox" hover-stop-propagation>早上好view>
view>
index.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 class="box">
view class="top">
view class="bar">view>
view>
view>
.row{$}*3 # $ is number
------------------------------
view class="row">1view>
view class="row">2view>
view class="row">3view>
hover-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 decode="True"><text>
3.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
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。
可将图片改为宽750px
100vw：屏幕的宽度
100vh：屏幕的高度
6.scroll-view 可滚动视图区域
scroll-view class="scroll" 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 style="width: 400rpx;height: 400rpx;background: #eee;overflow: hidden;" scale-area="False">
movable-view style="width: 100rpx;height: 100rpx;background: orange;" direction="all" scale x='20rpx' y='20rpx' out-of-bounds>
hello
movable-view>
movable-area>
8.match-media 匹配检测节点
可以指定一组 media query 规则，满足时，这个节点才会被展示。
通过这个节点可以实现“页面宽高在某个范围时才展示某个区域”这样的效果。
match-media min-width="300" max-width="600">
view>当页面宽度在 300 ~ 500 px 之间时展示这里view>
match-media>
9.root-portal
使整个子树从页面中脱离出来，类似于在 CSS 中使用 fixed position 的效果。主要用于制作弹窗、弹出层、全屏遮挡mask等。
脱离了文档流，所以样式要写到app.wxss里
做布局 重要
z-indes:10 – – – 设置定位元素及其后代元素或 flex 项目的 Z 轴顺序 – – – 数字越大，在越上面
root-portal>
view class="mask">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",
# 导航栏背景颜色，如 #000000
"navigationBarBackgroundColor": "#fff",
# 导航栏标题文字内容
"navigationBarTitleText": "Weixin",
# 导航栏标题颜色，仅支持 black / white
"navigationBarTextStyle":"black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
按Alt + 上下箭头，可以将该行上下移动 – – – 注意逗号
新增页面
在pages里添加保存
普通编译 – – – 添加编译模式 – – – 启动页面 – – – 选择页面
更换单独页面的导航栏标题，在自己的json文件里修改
{
"navigationBarTitleText": "查看启动日志",
"usingComponents": {}
}
2.image
src 图片资源地址 3种引入方式
组件 – – – 媒体组件 – – – image
资源管理器中的pages单击右键，点击在资源管理器中显示，新建static文件夹，存放静态文件（images，fonts，css等文件夹）
image src="../../static/images/snake.png" mode=""/>
image src="/static/images/snake.png" mode=""/>
image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Ff3bc3c72-69da-40a6-b8bf-c7f57d43ee64%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1698830501&t=5030ca03d4fe259fdb86c47615375dc1" 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 src="https://mp-95549144-5213-4a3服务器托管网0-8bc8-a4b4e2563b57.cdn服务器托管网.bspapp.com/1-2-16.mp4"/>
可能会遇到报错
给视频加上 autoplay controls 这两个属性，顺便加一个muted静音
详情 – – – 本地设置 – – – 将启用代码自动热加载关掉
4.navigator 页面链接导航
navigator ==》 a – – –
可以使用文字/图片跳转
navigator url="/pages/index/index">indexnavigator>
navigator url="/pages/logs/logs">
image src="/static/images/snake.png" mode=""/>
navigator>
open-type 常用
navigator url="/pages/index/index" open-type="">indexnavigator>
服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
相关推荐: 深入解析HTTP请求：了解请求特征与报文格式的关键秘密
引言 在上一章节中，我们详细探讨了超文本传输协议（HTTP）的基本概念，并且延伸讨论了HTTP请求响应的基本流程。在这个过程中，浏览器首先通过DNS解析来确定要访问的服务器的IP地址，然后与服务器建立起HTTP连接。接下来，浏览器会向服务器发送HTTP请求报文…
