微信小程序-1

微信开发文档 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>
1
2
3
4

index.wxss ==》 css

.box{
  width: 200px;
  height: 200px;
  background: red;
}
1
2
3
4
5

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>
1
2
3
4
5
6
7
8

.row{$}*3  # $ is number
------------------------------
<view class="row">1view>
<view class="row">2view>
<view class="row">3view>
1
2
3
4
5

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>
1
2

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>
1
2
3

将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>
1
2
3
4
5

8.match-media 匹配检测节点

可以指定一组 media query 规则，满足时，这个节点才会被展示。
通过这个节点可以实现“页面宽高在某个范围时才展示某个区域”这样的效果。

<match-media min-width="300" max-width="600">
  <view>当页面宽度在 300 ~ 500 px 之间时展示这里view>
match-media>
1
2
3

9.root-portal

使整个子树从页面中脱离出来，类似于在 CSS 中使用 fixed position 的效果。主要用于制作弹窗、弹出层、全屏遮挡mask等。
脱离了文档流，所以样式要写到app.wxss里

做布局 重要

z-indes:10 - - - 设置定位元素及其后代元素或 flex 项目的 Z 轴顺序 - - - 数字越大，在越上面

<root-portal>
  <view class="mask">view>
root-portal>
1
2
3

对mask写样式，放到app.wxss里

.mask{width: 100vw;height: 100vh;background: rgba(0,0,0,0.5);position: fixed;top: 0;left: 0;}
1

需要用到定位 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"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

按Alt + 上下箭头，可以将该行上下移动 - - - 注意逗号

新增页面
在pages里添加保存

普通编译 - - - 添加编译模式 - - - 启动页面 - - - 选择页面

更换单独页面的导航栏标题，在自己的json文件里修改

{
  "navigationBarTitleText": "查看启动日志",
  "usingComponents": {}
}
1
2
3
4

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=""/>
1
2
3
4
5

mode 图片裁剪、缩放的模式

image 默认 hieght:240px; width:320px;

默认scaleToFill，缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
常用
widthFix，缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix，高不变，宽度自适应
aspectFit，可以将图片完整展示出来

webp格式的图片，需要添加webp属性

<image src="" webp mode=""/>
1

3.video 视频 和 unicloud

尽量不放在本地，占内存

可以将视频放到服务器，或unicloud - - - 新建服务空间 - - - 阿里云 - - - 免费1个月
初始化比较慢，耐心等待（大概10min，手动刷新）
云存储 - - - 上传文件 - - - 详情里有url

<video src="https://mp-95549144-5213-4a30-8bc8-a4b4e2563b57.cdn.bspapp.com/1-2-16.mp4"/>
1

可能会遇到报错

给视频加上 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>
1
2
3
4
5

open-type 常用

<navigator url="/pages/index/index" open-type="">indexnavigator>
1