首页
关于
Search
1
服务器折腾笔记
588 阅读
2
智能家居改造&HomeAssistant使用
248 阅读
3
树莓派折腾指南
115 阅读
4
FRP端口映射
79 阅读
5
VUE2.0
58 阅读
默认分类
it
算法学习
力扣每日解题
Liunx
前端学习
HTML+CSS
JS
VUE
后端学习
java
python
兴趣爱好
魔方
花切&魔术
折纸
3d打印
航拍
硬件学习
树莓派
刷机经验
esp8266
arduino
生活日记
奇思妙想
琐事吐槽
感慨万千
服务器折腾
登录
Search
标签搜索
小程序
微信
前端
博客
尘埃啊
累计撰写
13
篇文章
累计收到
3
条评论
首页
栏目
默认分类
it
算法学习
力扣每日解题
Liunx
前端学习
HTML+CSS
JS
VUE
后端学习
java
python
兴趣爱好
魔方
花切&魔术
折纸
3d打印
航拍
硬件学习
树莓派
刷机经验
esp8266
arduino
生活日记
奇思妙想
琐事吐槽
感慨万千
服务器折腾
页面
关于
搜索到
13
篇与
zyb
的结果
2022-07-30
树莓派折腾指南
树莓派折腾指南1.树莓派简介树莓派(raspberryPi),最早是由英国慈善基金会开发用于学习计算机编程教育而设计的,基于arm架构,系统为linux,外观小却五脏俱全各类接口丰富树莓派官网 www.raspberrypi.org可以干什么作为低功耗Linux服务器搭建各种服务(只有5w功率)刷入游戏机系统,变为复古游戏盒子(lakka等系统)搭建gitea私服搭建OMV家庭nas系统(需要4b或400树莓派,有千兆网口和usb3.0接口)搭建HA开源智能家居管理系统(可以整合第三方智能家居统一管理)学习树莓派GPIO进行硬件开发刷入openWrt做软路由刷入影音系统做电视机顶盒使用树莓派进行各种嵌入式开发,学习opencv,diy机器人等等等等距今为止产品线已经非常丰富用于计算的cm模块系列 (相当于砍掉了所有接口,做成类似内存条的样子方便集成开发)用于单片机的pico更小尺寸的zero系列键盘外观的树莓派400树莓派B型(A型为B型的廉价版,阉割了部分接口)2.树莓派基础使用2.1 第一次上手&开机首先,肯定是要有一块树莓派的,树莓派近两年由于疫情导致产量下降,国内价格疯涨.在没有明确学习目标的情况下还是先不要购买,如果想学习的话,也是建议去某鱼淘一块二手,这样性价比最高,至于二手如何测试我后面会讲到2.1.1 需要准备的物品树莓派B型任意型号 (A是B的廉价版,同型号B型接口更为丰富)tf卡 读卡器 电源线显示器&hdmi数据线 可选(无网络有屏幕情况)有wifi环境或网线直连 可选(有网络无屏幕情况)2.1.2 烧录具体步骤烧录SD卡:先下载镜像烧录软件 win版本 ,macOS版本下载对应镜像 镜像下载地址 ,推荐下载种子然后用迅雷下载,这样速度比较快.版本分了debian11和10,64位32位 有桌面版,无桌面版,刚上手看着眼花缭乱,这里推荐第一次使用直接下载 debain11 32位桌面版和带推荐软件的镜像以便于学习使用使用烧录器进行烧录电脑插上读卡器,打开烧录软件,选择我们需要写入的操作系统滑到最下面选择使用自定义镜像,然后选择我们刚刚下载好的镜像即可存储卡选择插入的tf卡,一定要看清楚再选,血的教训点开齿轮图标设置wifi配置,设备名称,普通用户,ssh权限等点击烧录,输入电脑用户密码等待烧录完成,至此烧录就完成了,tf卡插入树莓派,然后接通电源2.1.3 有屏幕连接树莓派准备好后,直接接入显示器和外设就可以正常使用了2.1.4 无屏幕连接查看路由器管理页面新接入设备的ip地址,通过SSH进行远程连接,win系统下载xshell,苹果端可以用termius,这里使用termius演示选择页面服务器,然后点击新增服务器,输入刚刚查看的ip地址和自己设置的用户名密码保存连接即可通过SSH打开vnc远程桌面输入 sudo raspi-config 进入设置,选择Interfacing Options VNC YES 即可用VNC viewer连接,新建连接再输入ip连接,然后输入用户名密码即可成功登陆桌面2.2基础设置通过前面的步骤我们已经可以成功的进入的系统桌面了,但是还需要一些设置才更好的使用,接下来的操作都将在ssh的中进行,也就是桌面版的终端里设置2.2.1修改本地化语言用桌面版肯定中文比英文更加直观,所以这里先修改系统语言,(早期的树莓派系统中甚至没有内置中文字体,需要先自己安装一个开源的中文字体后再设置,不然调中文全是框框)打开树莓派系统配置工具sudo raspi-config选择本地化设置(Localisation Options)选择区域设置(Locale)取消en_GB UTF-8,选择zh_CN UTF-8 (空格选择或取消 回车确认)设置完后重启生效sudo reboot2.2.2 修改软件源因为树莓派是国外开发的,所以默认的软件源也是国外地址,在国内下载起来非常缓慢,因此我们要换成对应的国内镜像网址,这里以清华源举例,其他镜像网址可自行搜索(软件源就是让树莓派选择从哪下载更新软件的地址)32位debian11源 (前面烧录的镜像选择这个)编辑 sources.list 文件 (nano是linux的一个文本编辑器 crtl+o保存 回车确认写入 ctrl+x退出)sudo nano /etc/apt/sources.list 删除源文件所有内容,用以下内容取代deb http://mirrors.tuna.tsinghua.edu.cn/raspbian/raspbian/ bullseye main non-free contrib rpi # deb-src http://mirrors.tuna.tsinghua.edu.cn/raspbian/raspbian/ bullseye main non-free contrib rpi #默认注释了源码以加快下载速度 # armv7l 用户如果需要开启 multi-arch 使用 arm64 软件源,可以去加上下面的地址 deb [arch=arm64] http://mirrors.tuna.tsinghua.edu.cn/raspbian/multiarch/ bullseye main编辑 raspi.list 文件sudo nano /etc/apt/sources.list.d/raspi.list删除源文件所有内容,用以下内容取代deb http://mirrors.tuna.tsinghua.edu.cn/raspberrypi/ bullseye main64位debian11源编辑 sources.list 文件sudo nano /etc/apt/sources.list 删除源文件所有内容,用以下内容取代deb https://mirrors.tuna.tsinghua.edu.cn/debian/ bullseye main contrib non-free # deb-src https://mirrors.tuna.tsinghua.edu.cn/debian/ bullseye main contrib non-free deb https://mirrors.tuna.tsinghua.edu.cn/debian/ bullseye-updates main contrib non-free # deb-src https://mirrors.tuna.tsinghua.edu.cn/debian/ bullseye-updates main contrib non-free deb https://mirrors.tuna.tsinghua.edu.cn/debian/ bullseye-backports main contrib non-free # deb-src https://mirrors.tuna.tsinghua.edu.cn/debian/ bullseye-backports main contrib non-free deb https://mirrors.tuna.tsinghua.edu.cn/debian-security bullseye-security main contrib non-free # deb-src https://mirrors.tuna.tsinghua.edu.cn/debian-security bullseye-security main contrib non-free编辑 raspi.list 文件sudo nano /etc/apt/sources.list.d/raspi.list删除源文件所有内容,用以下内容取代deb http://mirrors.tuna.tsinghua.edu.cn/raspberrypi/ bullseye main32位debian10源编辑 sources.list 文件sudo nano /etc/apt/sources.list 删除源文件所有内容,用以下内容取代deb http://mirrors.tuna.tsinghua.edu.cn/raspbian/raspbian/ buster main non-free contrib rpi # deb-src http://mirrors.tuna.tsinghua.edu.cn/raspbian/raspbian/ buster main non-free contrib rpi # armv7l 用户如果需要开启 multi-arch 使用 arm64 软件源,可以去加上下面的地址 deb [arch=arm64] http://mirrors.tuna.tsinghua.edu.cn/raspbian/multiarch/ buster main编辑 raspi.list 文件sudo nano /etc/apt/sources.list.d/raspi.list删除源文件所有内容,用以下内容取代deb http://mirrors.tuna.tsinghua.edu.cn/raspberrypi/ buster main64位debian10源编辑 sources.list 文件sudo nano /etc/apt/sources.list 删除源文件所有内容,用以下内容取代deb https://mirrors.tuna.tsinghua.edu.cn/debian/ buster main contrib non-free # deb-src https://mirrors.tuna.tsinghua.edu.cn/debian/ buster main contrib non-free deb https://mirrors.tuna.tsinghua.edu.cn/debian/ buster-updates main contrib non-free # deb-src https://mirrors.tuna.tsinghua.edu.cn/debian/ buster-updates main contrib non-free deb https://mirrors.tuna.tsinghua.edu.cn/debian/ buster-backports main contrib non-free # deb-src https://mirrors.tuna.tsinghua.edu.cn/debian/ buster-backports main contrib non-free deb https://mirrors.tuna.tsinghua.edu.cn/debian-security buster/updates main contrib non-free # deb-src https://mirrors.tuna.tsinghua.edu.cn/debian-security buster/updates main contrib non-free编辑 raspi.list 文件sudo nano /etc/apt/sources.list.d/raspi.list删除源文件所有内容,用以下内容取代deb http://mirrors.tuna.tsinghua.edu.cn/raspberrypi/ buster main2.2.3更新软件默认root用户是没有密码的,如果你不想每次指令都要输入sudo,可以直接切换为root用户进行操作sudo su上一步已经换好源了,接下来我们更新系统apt-get update apt-get upgrade -y reboot2.2.4设置静态IP如果你使用显示器进行学习树莓派可以不用设置静态IP,但如果是通过ssh或者VNC进行连接树莓派使用,是需要设置静态IP的,不然下次重启以后ip地址就可能变为其他的,原IP就再也连接不上了,需要重新查看设备IP,并修改修改配置文件sudo nano /etc/dhcpcd.conf输入以下内容interface wlan0 #如果是宽带设置eth0 static ip_address=192.168.31.248/24 #修改成自己需要的IP static routers=192.168.31.1 #网关地址 static domain_name_servers=114.114.114.114 8.8.8.8 #dnssudo reboot 重启后生效2.2.5 自定义快捷指令每个登陆用户都有一份指令配置文件,这里我们用普通用户来示范,修改自定义指令可以让操作更佳快捷修改bashrc文件 nano ~/.bashrcalias ll='ls -l' alias la='ls -A' alias lla='ls -la' alias l='ls -CF' #alias 简写指令 ="全指令内容"2.2.6 设置root用户密码默认root无密码,可以设置root账户密码以增加安全性sudo su sudo passwd root //输入两遍密码即可2.2.7 修改设备名称修改 sudo nano /etc/hosts 和 sudo nano /etc/hostname 中的设备名称重启即可生效2.2.8 修改wifi配置使用显示器的情况下直接在桌面切换wifi即可,无桌面环境需要通过命令行才能修改,注意不能在使用静态IP的情况下修改wifi,要先删除静态IP的相关配置,否则wifi不在同一网段会造成无法联网ssh操作搜索wifi iwlist scan修改wifi配置 nano /etc/wpa_supplicant/wpa_supplicant.conf改为需要的wifi名和密码,保存文件后几秒钟应该就会自动连接到该wifi network={ ssid="wifi名称" psk="wifi密码" }查看是否连接成功 ifconfig wlan0tf卡重置wifi取消tf卡插入电脑 新建wpa_supplicant.conf文件编辑保存以下内容,并放入根目录country=CN ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev update_config=1 network={ ssid="wifi名" psk="密码" key_mgmt=WPA-PSK priority=1 }2.3 树莓派(debian Linux)常用指令2.3.1 系统操作类sudo 管理员权限su 用户 切换到指定用户halt关机 reboot重启 shutdown -r 关机重启 -h 关机不重启 -now立刻关机free -m 查看内存df -h 查看硬盘容量lsblk 列出硬盘ifconfig 查看网络clear 清屏uname -a 查看内核信息getconf LONG_BIT 查看操作系统位数cat /etc/os-release 查看系统版本lscpu 显示cpu架构信息pinout 查看树莓派参数,老版本镜像没有这个指令dmesg 查看所有硬件详细信息lsb_release -a 查看linux系统top 查看进程信息lsof -i:端口号 查看端口占用ps -ef|grep 关键字 查询进程ping 地址 测试网络连接vcgencmd measure_temp 查看树莓派cpu温度mkdir 新建文件夹chmod 777 授予最高权限sudo systemctlstart 软件名 启动stop 软件名 关闭status 软件名 查看状态enable 软件名 设置软件开机启动list-unit-files 查看开机启动项service --status-all || grep running 查看正在运行的服务apt-get 可以直接简写 aptupdate 获取更新列表upgrade -y 更新并确认install 软件名 安装软件remove 软件名 卸载软件但不删除配置purge 软件名 卸载软件并且删除相关配置startx 进入图形界面 ctrl+alt+f1 进入命令行tail -f 看持续输出的日志less 看日志不会宕机ln -s 软连接指定可执行命令.注意使用绝对路径例如有一个脚本a.sh 他的绝对路径执行方式为 /A/a.sh,但是不想这样执行 想用/B/b.sh 方式执行,可以执行 ln -s /A/a.sh /B/b.sh,ll /B/b.sh命令时会显示出软连接的状态带 → 标识 左侧为软连接名称 右侧为实际执行脚本,删除软连接 rm 软连接 注意他是个软连接后面不要加/2.3.2 解压缩操作压缩打包压缩tar -cvf etc.tar /app/etc #打包 tar -zcvf pack.tar.gz pack/ #打包压缩为一个.gz格式的压缩包 tar -jcvf pack.tar.bz2 pack/ #打包压缩为一个.bz2格式的压缩包 tar -Jcvf pack.tar.xz pack/ #打包压缩为一个.xz格式的压缩包解压tar -zxvf pack.tar.gz /pack #解包解压.gz格式的压缩包到pack文件夹 tar -jxvf pack.tar.bz2 /pack #解包解压.bz2格式的压缩包到pack文件夹 tar -Jxvf pack.tar.xz /pack #解包解压.xz格式的压缩包到pack文件夹 unzip #解压zip2.3.3 接口请求类指令get请求使用curl命令:curl “http://www.baidu.com” 如果这里的URL指向的是一个文件或者一幅图都可以直接下载到本地curl -i “http://www.baidu.com” 显示全部信息curl -l “http://www.baidu.com” 只显示头部信息curl -v “http://www.baidu.com” 显示get请求全过程解析使用wget命令:wget “http://www.baidu.com”也可以post请求使用curl命令(通过-d参数,把访问参数放在里面):curl -d “param1=value1¶m2=value2” “http://www.baidu.com”使用wget命令:(--post-data参数来实现)wget --post-data ‘user=foo&password=bar’ http://www.baidu.com2.3.4 jar包运行指令java -jar xxx.jar 最常用的启动jar包命令,特点:当前ssh窗口被锁定,可按CTRL + C打断程序运行,或直接关闭窗口,程序退出java -jar xxx.jar & &代表在后台运行 ,ctrl+c 后程序也会继续运行nohup java -jar xxx.jar & nohup 即 no hang up 不挂断 ,关闭SSH客户端连接,程序不会中止运行缺省情况下该作业的所有输出被重定向到nohup.out的文件中nohup java -jar xxx.jar >aaa.log & 将commandd 输出重定向到out.flie文件,即输出内容不打印到屏幕上,而是输出到out.file文件中nohup java -jar xxx.jar >> xxx.log 2>&1 &nohup java -jar /home/java_jar/PhotoBed-0.0.1-SNAPSHOT.jar >> /home/logs/photo_bed.log 2>&1 &nohup java -jar spring-boot-demo.jar > /dev/null 2>&1 & 不输出日志2.4 常用软件安装2.4.1 安装JDKjdk为java的开发运行环境,装了jdk便可以运行各种jar包确保是最新系统,如果不是最好先更新一遍系统sudo apt install default-jdk -y 默认版本为JDK11安装完后 java -version 检查版本信息安装jdk8版本 (这里使用南天大佬博客上的压缩包)sudo su #切换到root用户 #根据自己系统选择arm32或者arm64 #arm32 wget https://linuxer.top/usr/uploads/2020/07/jdk-8u261-linux-arm32-vfp-hflt.tar.gz tar -zxvf jdk-8u261-linux-arm32-vfp-hflt.tar.gz -C /usr/local/ #arm64 wget https://linuxer.top/usr/uploads/2020/07/jdk-8u261-linux-arm64-vfp-hflt.tar.gz tar -zxvf jdk-8u261-linux-arm64-vfp-hflt.tar.gz -C /usr/local/ #创建软连接,方便升级 ln -sf /usr/local/jdk1.8.0_261/ /usr/local/jdk1.8增加环境变量,编辑文件nano /etc/profile,在最后增加以下内容并保存:export JAVA_HOME=/usr/local/jdk1.8 export PATH=$JAVA_HOME/bin:$PATH使环境变量生效:source /etc/profile 安装完后 java -version 检查版本信息2.4.2 安装VIMvim是vi的升级版,是linux上效率非常高的文本编辑软件,精简版系统默认只装了vi没有vimsudo apt-get remove vim-commo //卸载预装的vi sudo apt-get install vim //安装vim 2.4.3 安装nginxnginx为俄罗斯战斗民族程序员开发,是一个高性能web服务器和反向代理服务器,具体的使用会单独发一篇文章介绍下载软件 sudo apt-get install nginx启动 sudo systemctl start nginx查看状态 sudo systemctl status nginx设置nginx开机启动:sudo systemctl enable nginx重新加载Nginx,使配置生效 sudo systemctl reload nginxnginx 默认80口 测试是否正常 输入ip地址访问,看到如下界面就证明启动成功了默认的网站根目录:/var/www/htmlnginx配置文件目录:/etc/nginx/nginx主配置文件位置:/etc/nginx/nginx.conf日志地址 vim /var/log/nginx/error.log新增端口映射文件放/etc/nginx/conf.d 中server { listen 81; #映射端口 server_name photo_bed.com; #服务名称 root /var/www/photo_bed.com; #资源路径 index index.html index.htm; #请求头 location / { try_files $uri $uri/ =404; #404页面 } }2.4.4 安装Dockerdocker是一种虚拟化容器技术,类似于虚拟机,但是传统虚拟机是利用机器硬件进行虚拟化,而docker是在软件层面进行虚拟化,这个后面也会详细单独讲一篇,这里只介绍安装以及换源安装sudo curl -sSL https://get.docker.com | sh #一键安装脚本 sudo curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun #国内镜像安装 docker run hello-world #测试是否安装成功Docker换源国内源地址https://registry.docker-cn.com #Docker官方中国区 http://hub-mirror.c.163.com #网易 https://docker.mirrors.ustc.edu.cn #中国科技大学 https://y0qd3iq.mirror.aliyuncs.com #阿里云 (实测阿里云的最快)新增配置文件 nano /etc/docker/daemon.json{ "registry-mirrors": ["https://y0qd3iq.mirror.aliyuncs.com"] }重启Docker服务 sudo service docker restart然后通过以下命令查看配置是否生效 docker info|grep Mirrors -A 1 ,看到如下的输出: Registry Mirrors: https://y0qd3iq.mirror.aliyuncs.com/ 就表示镜像配置成功
2022年07月30日
115 阅读
1 评论
5 点赞
2022-01-09
微信小程序
微信小程序微信小程序文档地址:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html一. 文件结构1.1 pages每个页面都有四个文件*.js 对应web的js*.json 配置文件 对应每个页面的样式*.wxml 对应web的html页面*.wxss 对应web的css样式1.2 utils第三方工具的js,可以删除1.3 icon存放图片 阿里巴巴开源图标地址 https://www.iconfont.cn/home/index1.4 app.js项目的全局入口文件1.5 app.json全局配置文件pages为页面集合,第一个为首页,写完路径会自动创建对应目录"pages":[ "pages/demo1/demo1",//第一个为首页 "pages/index/index", "pages/demo2/demo2", "pages/demo3/demo3", "pages/logs/logs" ],window设置小程序外观样式 "window":{ "backgroundTextStyle":"dark",//下拉刷新图标颜色 dark/light "navigationBarBackgroundColor": "#0094ff",//顶部颜色 "navigationBarTitleText": "我的第一个小程序",//应用标题 "navigationBarTextStyle":"white",//字体颜色 只能黑(black)白 "enablePullDownRefresh": true,//开启下拉刷新 "backgroundColor": "yellow"//刷新下拉背景颜色 },tabBar 导航栏"tabBar": { "list": [ { "pagePath": "pages/index/index",//页面路径 "text": "恋爱历程",//导航栏名称 "iconPath": "icon/a1.png",//未选中图片样式 "selectedIconPath": "icon/a.png"//选中图片样式 }, {//list最少两个,最多五个 "pagePath": "pages/demo1/demo1", "text": "婚礼倒计时", "iconPath": "icon/b1.png", "selectedIconPath": "icon/b.png" } ], "color": "#0094ff",//设置导航栏默认字体颜色 "selectedColor": "#ff3454",//设置导航栏选中字体颜色 "backgroundColor": "yellow",//导航栏背景颜色 "position": "bottom"//仅支持bottom下/top上 上面时无图标 },1.6 app.wxss全局样式文件1.7 sitemap.json微信索引配置文件1.8 project.config.json项目的配置文件 如appid二 . 基础语法2.1 模板语法普通写法<text>{{msg}}</text> //默认不换行,类似span 行内元素 <view>{{num}}</view> //默认换行,类似div 块级元素 <view>{{person.age}}</view>Page({ data: { msg:"hello", num:123, isChecked:false, person:{ age:23, name:"zhaoyongbin", height:1.74 } } })组件属性 <view data-id="{{id}}">自定义属性</view>Page({ data: { id:0 } })复选框<checkbox checked="{{isChecked}}"></checkbox> //checked选中状态Page({ data: { isChecked:false } })2.2 基本运算加减乘除 三元运算<view>{{1+1}}</view> <view>{{'1'+'1'}}</view> //字符串拼接 <view>{{10%2===0 ? '偶数': '奇数'}}</view> //三元运算符2.3 列表渲染wx:for<view wx:for="{{list}}" //循环数组或对象 wx:for-item="item" //循环项 默认为item可以省略 wx:for-index="index" //循环索引 默认为index可以省略 wx:key="id"> //key用唯一值,可以提高列表的渲染性能 索引{{index}} 值{{item.name}} </view> <!--当循环为对象时 index是KEY item是VALUE-->Page({ data: { list:[{id:0,name:"小红"},{id:2,name:"小明"}] }, })wx:if 标签不频繁切换显示使用wx:if (直接移除)频繁切换显示使用hidden (切换显示样式)<view> <view wx:if="{{false}}">1</view> <view wx:elif="{{false}}">2</view> <view wx:else>3</view> </view><!--通过hidden属性控制隐藏显示--> <view hidden="{{true}}">不显示</view> <view hidden="{{false}}">显示</view>2.4 事件绑定双向绑定 input输入框 bindinput绑定函数<input type="text" bindinput="handleInput"/>data: { num:0 }, handleInput(e){ console.log(e) //打印日志 this.setData({num:e.detail.value}) //e.detail.value获取值 },点击事件 button按钮 bindtap点击事件<button bindtap="handletap" data-a="{{1}}">+</button> <button bindtap="handletap" data-a="{{-1}}">-</button>data: { num:0 }, handletap(e){ const a = e.currentTarget.dataset.a; this.setData({ num:this.data.num +a }) },三. WXSS样式3.1 概述小程序中不需要主动引入样式,只需要名称一致即可自动引入3.2 rpx属性px值为固定大小,rpx为比例大小view{ width: 20rpx; height: 20rpx; font-size: 20rpx; background-color: aqua; }page px = 750rpx1px = 750rpx/page100px = 750rpx*100/pagecalc()自动计算px 750和rpx之间不能留空格width:calc(750rpx*100/375)3.3 样式导入创建文件 styles/commom.wxssview{ color: #000; font-size: 10px; }引入标签@import "../../styles/commom.wxss"3.4 选择器不能使用*通配符 可以把每种类型加上用,分隔.class 类选择器 选择所有有class="*"的组件id id选择器 选择拥有id="*"的 组件vive 选择所有vive组件 其他同理3.5 less/*定义less变量*/ @color:yellow; text{ /*引用less变量*/ color: @color; }四. 常见组件4.1 textuser-select属性,可以长按复制decode 对文本内容进行解码 例如  <text user-select decode>hahah 321</text>4.2 vivehover-class 按下改变样式<view hover-class="h-class">点我试试</view>.h-class{ color:blue; }4.3 image图床地址https://imgurl.org/home/multiple,也可以自己使用阿里云存储或七牛云等进行照片上传图片默认宽高为320*240<image src="https://s3.bmp.ovh/imgs/2021/09/609872e84027d025.jpg"/>mode属性值默认scaleToFill 默认选项,不保持默认比例,使图标完全填充aspectFit 保持宽高比 确保图片长边显示出来 页面轮播图常用aspectFill 保持纵横比,只保证图片的短边能完全显示出来widthFix 宽定好后,高度自动响应lazy-load 懒加载 图片完全出现在视口才会加载4.4 swiper 轮播图外层容器swiper 轮播项 swiper-item默认样式 width100% height150px等比计算方式先找出原图像素尺寸swiper宽度/swiper高度 = 原图宽度/高度,所以 /swiper高度=swiper宽度*原图高度/原图宽度swiper{ width: 100%; height: calc(100vw*800/800); }swiper常用属性autoplay 自动轮播interval="3000" 间隔毫秒circular 衔接轮播indicator-dots 显示分页器indicator-color="#0094ff" 显示未选中的颜色indicator-active-color="#ff0094" 显示选中的颜色<swiper autoplay interval="3000" circular indicator-dots indicator-color="#0094ff" indicator-active-color="#ff0094"> <swiper-item><image mode="widthFix" lazy-load src="https://s3.bmp.ovh/imgs/2021/09/609872e84027d025.jpg"/></swiper-item> <swiper-item><image mode="widthFix" lazy-load src="https://s3.bmp.ovh/imgs/2021/09/609872e84027d025.jpg"/></swiper-item> </swiper>4.5 navigation 导航标签url 跳转路径 绝对路径或相对路径target 默认在自己的小程序跳转 self/miniProgram(其他小程序页面)open-type 跳转方式navigate 默认值 保留当前页(不能跳转到tabbar页面)redirect 关闭当前页(不能跳转到tabbar页面)switchTab 跳转到tabbar页面,并关闭所有其他非tabbar页面reLaunch 关闭所有页面,打开到应用内的某个页面navigateBack 关闭当前页面,返回上级或多级页面,可通过getCurrentPages()获取当前页面栈exit 退出小程序 (target="miniProgram"时生效 退出别人小程序)<navigator url="/pages/logs/logs">跳转页面</navigator>4.6 rich-textfu富文本标签nodes属性 可以接收标签字符串或接收对象数组<rich-text nodes="{{htmlSting}}"></rich-text>4.7 button 按钮外观属性size属性 控制按钮大小 default默认大小 mini小尺寸type属性 按钮颜色 default默认灰色 primary绿色 warn红色plain 按钮是否镂空(背景透明)loading 等待图标<button size="mini" type="primary" loading>默认按钮</button>open-type属性<button open-type="contact">联系客服</button><!--联系客服--> <button open-type="share">分享到好友或群</button><!--分享小程序--> <button open-type="getPhoneNumber">获取手机号</button><!--获取当前用户手机号(需要企业账号)--> <button open-type="getUserInfo" bindgetuserinfo="getUserinfo">获取信息</button><!--获取当前用户个人信息--> <button open-type="launchApp">直接打开app</button><!--在小程序中直接打开app--> <button open-type="openSetting">授权</button><!--打开小程序中的内置授权页面--> <button open-type="feedback">问题反馈</button><!--打开问题反馈页面-->getUserinfo(e){ console.log(e) },4.8 icon 图标<icon type="success" size="23" color="red"></icon>4.9radio 单选框bindchange绑定事件<radio-group bindchange="handleChange"> <radio value="meal" color="red">男</radio> <radio value="female">女</radio> </radio-group> <view>{{gender}}</view>data: { geder:"null" }, handleChange(e){ console.log(e) let gender = e.detail.value;//let局部变量 this.setData({ gender:gender //可以只写gender }) },4.10 checkbox复选框checkbox复选框<view> <checkbox-group bindchange="handleChangebox"> <checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id"> {{item.name}} </checkbox> </checkbox-group> </view> {{shuiguo}}data: { shuiguo:"", list:[ {id:0, name:"苹果", value:"apple"}, {id:1, name:"葡萄", value:"grape"}, {id:2, name:"香蕉", value:"bananer"}, ] }, handleChangebox(e){ let shuiguo = e.detail.value; this.setData({ shuiguo:shuiguo }) },4.11 背景音乐组件音乐外链生成地址https://music.xf1433.com/const a = wx.getBackgroundAudioManager() a.title = "A Thousand Years" a.epname = "A Thousand Years" a.singer = "Christina Perri" a.src= "http://m10.music.126.net/20210904000056/b18190501ce292a2d9cbe3ee812a91c5/ymusic/460e/7699/9bfc/294e81ebd86bf11243ee37756755a92f.mp3"_
2022年01月09日
22 阅读
0 评论
0 点赞
2022-01-07
个人博客搭建
个人博客搭建一、建前准备已备案的域名(备案3天左右)已备案的服务器(香港服务器不需要备案,备案大约需要10天左右)二、域名解析 服务器绑定域名操作域名解析到你的服务器ip地址@ 通过域名直接访问www 通过www前缀访问其他自定义二级域名前缀访问服务器操作安装Centos 7或其他Liunx发行版安装BT面板宝塔官网https://www.bt.cn/安装指令yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh绑定域名三、下载typecho博客下载地址:http://typecho.org/把下载压缩包上传到服务器然后解压到绑定网站目录下访问域名,初始化博客提前建好mysql数据库四、安装主题以及插件主题下载地址:https://typecho.me/下载后解压到 /域名对应路径/usr/themes/路径下代码高亮插件https://www.xcnte.com/archives/523/下载后解压到 /域名对应路径/usr/plugins/路径下在博客后端界面启用并设置五、其他问题文件无法上传打开/var/Typecho/Common.php 这个文件,找到下面这段代码:public static function isAppEngine() { return !empty($_SERVER['HTTP_APPNAME']) // SAE || !!getenv('HTTP_BAE_ENV_APPID') // BAE || !!getenv('SERVER_SOFTWARE') // BAE 3.0 || (ini_get('acl.app_id') && class_exists('Alibaba')) // ACE || (isset($_SERVER['SERVER_SOFTWARE']) && strpos($_SERVER['SERVER_SOFTWARE'],'Google App Engine') !== false) // GAE ; }修改为: public static function isAppEngine() { return false; }找到usr/uploads这个文件夹,修改777权限
2022年01月07日
35 阅读
0 评论
2 点赞
1
2
3