微语:代码适合中午敲,早晚出BUG
小程序入门教程 微信小程序
1. 微信小程序介绍
只能通过微信APP, 扫码/点击链接, 进入的特殊"网页"的集合.
无需下载安装包(扫码直用)
2. 移动端应用分类
H5APP: 使用传统WEB技术(H5+CSS3+JS), 在浏览器中运行的网页
小程序: 使用自家开发技术栈研发的小应用, 只能在特定APP中扫码/点击打开(微信小程序, 支付宝小程序)
原生APP: 需要下载安装包, 安装才能使用, 区分IOS/ANDROID ! 安装包不互通
3. 小程序的开发流程
3.1 注册小程序开发者账号
https://mp.weixin.qq.com/
3.2 下载小程序专用开发IDE-微信开发者工具
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
3.3 通过微信开发者工具, 新建项目
每次创建项目需要填写自己的小程序AppID
4. 小程序的核心目录
(重要)pages -- 小程序所有核心页面
utils -- 工具文件夹
.eslintrc.js -- eslint语法检测配置文件
app.js -- 入口js文件
app.json -- 全局配置
app.wxss -- 全局样式
project.config.json -- 工程配置1
project.private.config.json -- 工程配置2
sitemap.json -- 其他描述
5. 小程序的页面结构
小程序并非HTML, 所以有一套自己的开发模式和文件类型
.js -- 页面的逻辑
.json -- 页面的配置
.wxml -- 页面的结构
.wxss -- 页面的样式
6. 小程序独有常用标签
navigator: 超链接, 允许跳转到小程序的任意页面
view: 容器!! ===div
text: 文本 ===span
swiper: 轮播组件
swiper-item: 轮播的儿子
例:
<swiper>
<swiper-item>元素1</swiper-item>
<swiper-item>元素2</swiper-item>
..
</swiper>
- button: 按钮
- input: 输入框
- image: 图片
- icon: 系统送的图标
- scroll-view: 可以滚动的view容器
- map: 地图
7. 小程序的事件
小程序只有两种事件: 冒泡(bind), 非冒泡(catch)
事件类型:
- tap: 触摸
- longpress: 长按(0.35s)
- touchstart: 触摸开始
- touchend: 触摸结束
- touchmove: 触摸后开始移动
-
touchcancel: 触摸后被系统弹窗/电话等打断
绑定方式: bindtap冒泡触摸 catchtap非冒泡触摸
8. 小程序的数据驱动
8.1 把要变化的数据放入data中
data: {
name: 'zhangsan'
}
8.2 使用mustauche获取动态数据, 小程序不区分内容还是属性, 都是用{{}}获取
<view name="{{ test }}">测试{{ aa }}</view>
8.3 修改数据
this.setData({
//key要修改的key名: value新的值
name: 'lisi'
})
9. 小程序其他
底部 tabBar
自定义头部导航 navigationStyle
获取胶囊坐标 wx.getMenuButtonBoundingClientRect()
React打包白屏如何解决 React
在打包React项目的时候出现白屏了,需要在package.json中添加一行配置
"homepage":"."
homepage作用
打包时候, 自动在资源目录, 也就是引入的js和css目录前面添加设置的字符串,设置为 "."会自动在前面添加一个., 这样绝对路径就变为相对路径了.
Uniapp去掉H5标题 uniApp
需要在路由中配置
"h5":{
"titleNView":false
}
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "车行APP",
// 编译到h5平台时去掉页面标题
"h5":{
"titleNView":false
}
}
}
UniAPP工程化目录配置 uniApp
┌─components uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─hybrid 存放本地网页的目录
├─platforms 存放各平台专用页面的目录
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
├─wxcomponents 存放小程序组件的目录
├─common 公共资源(自建)
├─api 请求封装(自建)
├─store 状态管理(自建)
├─main.js Vue初始化入口文件
├─App.vue 应用配置,用来配置App全局样式以及监听 应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息
└─pages.json 配置页面路由、导航条、选项卡等页面类信息
GIT常用指令大全 前端
1.git clone 仓库地址
2.cd 仓库名称前两位-tab 进入仓库文件夹
3.git add -A 或者 git add . 提交代码
4.git commit -m"提交说明"
5.git push 提交到仓库
6.git pull 更新代码
7.cd 目录名 --指定目录
cd ../ --返回上一级,可以多个,一个../代表返回一级
cd ./ 到当前目录
cd ./目录名
8.ls --查看当前目录下的文件夹
9.mkdir --创建目录名
10.touch --创建文件 文件名.后缀名
11.pwd --查看当前文件目录
12.git init --初始化git版本管理
13.git status --查看文件状态 红:未加入本地缓存 绿:已加入本地缓存
clear --清除命令窗口历史指令
exit 退出
16.rm 文件夹名称 删除本地
17.git checkout 文件夹名 恢复
18.git log 查看版本日志
git reset --hard 版本号 无法修复当前版本bug 退回到某一个版本
20.git rm -r 文件夹名/
恢复删除的文件
21.git reset HEAD 文件名
22.git checkout 文件名
22.git push -f 强制提交
23.git reflog 查看log
24.git checkout -b dev1 创建分支
25.git checkout master 切换到主分支
26.git pull origin master 拉取主分支最新代码
27.git checkout dev1 切换到自己分支
28.git merge master 合并主分支代码到自己分支
29.git push origin dev1,(master) 提交到自己的分支
30.git branch 查看自己当前所在分支
开发分支(dev)上的代码达到上线的标准后,要合并到 master 分支
git checkout dev
git pull
git checkout master
git merge dev
git push -u origin master
当master代码改动了,需要更新开发分支(dev)上的代码
git checkout master
git pull
git checkout dev
git merge master
git push -u origin dev
# 清除掉缓存在git中的用户名和密码 ( 可能之前有人用过这台电脑 )
git credential-manager uninstall
# 记住自己的用户名和密码
git config --global credential.helper store
# 配置提交代码的人的用户名和邮箱
git config --global user.name "小诸葛" // 配置用户名
git config --global user.email dc@qq.com // 配置邮箱
# 代码仓库地址
https://gitee.com.... // 仓库地址
# 仓库账号和密码
账号: 111***
密码: 123456
第一次下载(克隆)代码:
git clone 仓库地址 // 例如: git clone https://gitee.com...
第二次以后下载(拉取)代码
# 每天进公司第一件事情
git pull 仓库地址 分支名 // 例如: git pull origin develop
提交代码步骤【重点】
git add . // 纳入到版本控制
git commit -m "描述信息" // 暂存到本地
# commit一般是一个功能一次 push是一天一次. 一般是下班之前push
# push之前先pull一次
git push 仓库地址 分支名 // 推送到远程服务器仓库 例如: git push origin develop
commit 规范【重点】
type(scope) : subject
( 1 ) type(必须) : commit 的类别,只允许使用下面几个标识:
feat : 新功能
fix : 修复bug
docs : 文档改变
style : 代码格式改变
refactor : 某个已有功能重构
perf : 性能优化
test : 增加测试
build : 改变了build工具 如 grunt换成了 npm
revert : 撤销上一次的 commit
chore : 构建过程或辅助工具的变动
( 2 ) scope(可选) : 用于说明 commit 影响的范围,比如数据层、控制层、视图层等等,视项目不同而不同。
( 3 ) subject(必须) : commit 的简短描述,不超过50个字符。
其他命令:
git status // 查看仓库状态
git branch // 查看当前有哪些分支
git branch 分支名 // 创建分支
git checkout 分支名 // 切换分支
git checkout -b 分支名 // 创建并切换分支
git merge 分支名 // 合并分支
git tag -a v1.1 -m "test_tag"; // 打标签
git push origin --tags // 把tag标签(版本) 推送到服务器
ES6语法处理数组多维展开 JavaScript
flat可以展开数组,里面可以接收一个参数,例如flat(3),就是展开3维数组。或者传入Infinity展开所有
let ar = [12, 34, 3, [343, [194, [23]]]]
let st = ar.flat(Infinity)
console.log(st)
ES6构造函数新增方法 JavaScript
1.Arry.from(),将两类对象转为真正的数组,可以接收第二个参数用来处理元素。
<script>
let a = {
0: '1',
1: '2',
2: '3',
length: 3,
}
let s = Array.from(a, v => {
return v * 10
})
console.log(s)
</script>
2.Array.of(),将一组值,转为数组。
Array.of(1,2,3)//[1,2,3]
新电脑运行VUE项目流程 Vue
1.安装Nodejs
2.安装Git
3.安装Yarn
4.配置yarn环境
5.修改yarn和npm下载源
6.安装vue脚手架 yarn global add @vue/cli
7.创建vue2项目 vue create 项目名(vu2+Webpack)
7.创建vue3项目 yarn create vite 项目名(vu3+vite)