- 将项目传到远程github上
git init(将本地项目编程git可以管理的仓库)
git add . (将项目添加到暂存区,.代表所有文件)
git commit -m 'first' (把文件提交到仓库时候的说明性文字)
git remote add origin 远程项目的地址 (关联到远程)
git push -u origin mater/分支 (项目推送到远程)
其他的指令:
git status (状态查询)
git fetch origin develop (从远程的develop分支将代码下载到本地)
git branch (查看远程分支的名字)
git branch zhang (新建分支zhang)
git checkout master (切换到主分支)
git checkout -b zhang (创建并切换到新分支)
git merge zhang (将新分支提交的改动合并到主分支)
下载项目:
git clone 项目链接
cd 项目名/
git status
git checkout -b ... 建一个自己的分支
git branch 查看所在分支
git pull origin develop 下拉最新的内容
- js跨域
(1) nginx 代理(将A、B通过一个统一的地址进行转发)
(2) jsonp的ajax请求方式
定义:js文件和带有src属性的标签不受跨域的影响,而json的数据格式被js支持。用户传递一个callback参数给服务器,服务器返回的数据是将callback参数作为函数名包裹成json格式,这样随意定值函数,自动处理数据。
优点:可以跨域,兼容性好,将controller层和view层分开(请求完后调用callback回传结果,将权限给调用方)
缺点:只支持GET不支持POST请求方式
调用失败不返回状态码
安全性低
- px、em、rem
px 表示像素,绝对单位,不改变
em 相对于父元素的字体大小
rem 相对于根元素html的字体大小
- let、const
两者都只在声明所在的块极作用域内有效
let 声明的变量值和类型都可以改变,const变量一旦声明,立即初始化,不可改变
- 行内样式设置width、height无效,margin、padding仅左右有效,上下无效
- call()、apply()
两者都是改变函数体内部this的指向,第一个参数是this要指向的对象,第二个参数apply接受数组参数,call接受连续参数。
- es6新特性
1. 新的变量声明方式 let/const
2. 箭头函数的使用
const fn = (a, b) => a + b;
箭头函数最直观的三个特点。
不需要 function 关键字来创建函数
省略 return 关键字
继承当前上下文的 this 关键字
3. 模板字符串 ``
4. 函数默认参数 ,不定参数,拓展参数
function add(x = 20, y = 30) {
return x + y;
}
console.log(add());
5. 展开运算符 ...
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 10, 20, 30];
// 这样,arr2 就变成了[1, 2, 3, 10, 20, 30];
6. 类的支持,引入class关键字
7. for of
8. promise 用于异步操作(未完成,可能会完成的操作),多重链式回调
let p = new Promise((resolve, reject) => {
resolve(1);
});// resolve成功,reject失败
p.then(value => {
console.log(value);
return value * 2;
}).then(value => {
console.log(value);
}).then(value => {
console.log(value);
return Promise.resolve('resolve');
}).then(value => {
console.log(value);
return Promise.reject('reject');
}).then(value => {
console.log(`resolve: ${value}`);
}, err => {
console.log(`reject: ${err}`);
})
- vuex
vuex是vue中用于管理全局状态的一个组件,用于不同组件之间的通信
getters 实时监听值,相当于计算属性
mutations 改变定义的初始值 =>this.$store.commit('方法名')调用
actions 可包含任意一步操作,出发mutations里的方法
参数是content,context.commit('mutations里的方法名')
外部调用this.$store.dispatch('actions里的方法名')
代码示例:
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
- 双向绑定的原理
vue中v-model {{}} v-bind
原理:在数据变动时,通过object.defineProperty()劫持各个属性的getter和setter,触发相应的监听回调,update方法实现数据实时更新
10.组件传值
1. a组件向b组件传值
a: this.$router.push({path:'/b',query:{id:1}})
b接收: this.$route.query.id
或者:
a:<router-link :to="{name:'b',params:{bid:id}}"/>
b:this.$route.params.bid
2.父组件向子组件传值
父: <child :name-list='names'>
子: props: ['name-list']
3. 子组件向父组件传值
子(通过事件): <button @click="submit"/>
submit(){
this.$emit('code',888)
}
父:<child @code='getcode'>
11.router和route的区别
router是跳转的时候用到,route是接收参数
路由每次跳转都有route,可查询name、path、params等
12.怎么在父元素上获得id?
let $commid=$(e.target).parents('.a').attr('id')
13.css3动画
@keyframe A{
from to /0% ...100%
}
执行animation:A 5s;
14.下拉刷新
touchstart 触摸开始,toumove手指移动位置,touchend手指松开
- canvas绘图
var canvas=document.getElementByTagName('canvas') //拿到canvas标签
var ctx=canvas.getContent('2d') //拿到canvas的上下文,‘2d’表示2d画笔
ctx.moveTo(x,y) //设置绘制起点
ctx.lineTo(x,y) // 绘制直线
ctx.closePath() //闭合路径
ctx.strokeStyle='red' //设置锚边的样式
ctx.stroke()
ctx.fillStyle='green' // 填充样式
ctx.fill()
- sass
(1) $变量名:值,$full-width: 500px;
(2) 计算功能:+-*/%运算符,width: 10px*2//20px
(3) 选择器嵌套(父选择器):
div {
hi {
color:red;
@include border-radius;
}
}
(4) 属性嵌套:
.box {
font: {
size: 12px;
weight: bold;
}
}
(5) 混合器@mixin:
@mixin border-radius{
border-radius: 5px;
}
调用用@include 方法名
(6) 继承extend(一个选择器可以继承另一个选择器里的样式)
17.js延迟加载
defer或async
<script src="" async>
18.HTML5响应式网页
(1)头部加viewport原标签,width=device-width
(2)宽度不要用绝对值,用%(百分比)或margin:auto
(3)字体大小不用px(绝对值),用相对大小rem(相对根部html)
(4)流动布局(各个div是浮动的,不是固定的)
float:left; width:30%;
float:right;width:70%;
如果屏幕宽度小的话div内容不会溢出,后面的元素会自动到下方
(5)引入css3的Media Query模块,自动探测屏幕宽度,加载相应的css文件
(6)@media/@media screen 媒体查询
例:@media (max-width:600px){
.box{}
}//当设备宽度小于600px的时候用.box样式
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
PC:>1024px
ipad:768-1024px
iPhone:<768px
(7)图片自适应,img{width:100%}
(8)flex布局
flex-direction:row | row-reverse | column | column-reverse; 排列方向
flex-wrap: nowrap | wrap | wrap-reverse;排列不下是否换行
justify-content:flex-start | flex-end | center | space-between |space-around; 项目在主轴的对齐方向
flex-start(默认值):左对齐
flex-end:右对齐
center:居中
space-between:两端对齐,项目之间的间隔都相等
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
align-items:flex-start | flex-end | center |baseline | stretch;项目在交叉轴上如何对齐
flex-start:交叉轴的起点对齐
flex-end:交叉轴的终点对齐
center:交叉轴的中点对齐
baseline:项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
19.小程序和h5的区别
(1)运行环境不同,小程序在微信上,h5在浏览器上,webview中
(2)开发成本不同
小程序:开发者工具,规定开发规则
H5:开发工具里开发,要考虑浏览器兼容等问题
(3)获得系统极权限不同
小程序:权限更多,如网络通信状态,数据缓存等。
(4)运行流畅度,h5需要在浏览器中渲染,会卡顿
20.小程序的优点
开发成本低,无需下载,服务请求延时与用户体验感变好
21.小程序中的wxss和css的区别
wxss图片引入需使用外链地址,没有body,样式用import导入
二、微信小程序
1.跳转方式
(1)页面跳转:<navigator url=""/>
(2)函数跳转:wx.navigatorTo({
url=""
})
(3)带参数的页面跳转
<navigator url="/pages?id={{item.id}}&url={{item.img}}"/>
跳转页面接受参数:
onload:function(options){
this.setData({
id:options.id,
url:options.img
})
}
2.公共变量
在App.js中 globalData:{
userInfo:null
}
其他页面引用:
userid:getApp().globalData.userInfo
3.代码模块化
新建commo.js文件写公共的代码,用model.export导出
其他页面引用:var common=require('common.js')
common.方法名调用
4.数据交互
wx.request({
//请求地址
url: 'http://127.0.0.1:8000/wechat/addressGetShebei/',
data: {
address
},//发送给后台的数据
header: {//请求头
//"Content-Type": "application/json"
"Content-Type": "application/x-www-form-urlencoded"
},
method: 'POST',
dataType:'json',
success: function (res) {
//res.data相当于ajax里面的data,为后台返回的数据
//如果在sucess直接写this就变成了wx.request()的this了
//必须为getdata函数的this,不然无法重置调用函数
that.setData({
shebei:res.data
})
},
fail: function (err) { },//请求失败
complete: function () { }//请求完成后执行的函数
})
5.绑定数据
bindtap 、{{}}
页面里data的值被修改需在方法里写this.setData({a:1})
6.模板和组件(模板逻辑少)
模板引用:@import ‘../templates/index.wxss’
引入标签<template is="模板里的name值",data="模板里要用的值"/>
组件引用要在被引用页面的json文件配置
三元运算符:<view hidden="{{flag?true:false}}"/>
标签做操作的时候要在{{}}里
wx:for与wx:for-items是循环数组 ,使用{{item.id}}(item是别名)
wx:for-item是给列表起别名
wx:if当条件为true开始局部渲染,hidden始终会被渲染(根据条件显示或隐藏)。当判定条件频繁改变时用hidden
属性里data-name="a"
获取event.target.dataset.name
touchstart手动触摸动作开始
touchmove手指触摸后移动
touchcancel 手指触摸动作被打断,如来电
touchend手指触摸动作结束
事件绑定 以bind/catch开头
bind(不会阻止事件冒泡),catch(阻止事件冒泡,<canvas/>中无事件冒泡)
引用文件用import/include,src=" "
import会引用目标文件,但目标文件里的引用不会引用
include所有都会引用,相当于将整个代码拷贝到include位置
性能问题:频繁做setData()操作
不要再data里放太多数据或长数组,用数据缓存或者分页渲染
下拉刷新:onPullDownRefresh()函数
上拉加载:onReachBottom()
8.页面传值
(1)全局变量:
在App.js中 globalData:{
userInfo:null
}
其他页面引用:
userid:getApp().globalData.userInfo
(2)本地缓存:
存值wx.setStorageSync('a',a)
取值wx.getStorageSync('a')
删除wx.removeStorage({key:'a'})
(3)父向子
wx.navigatorTo({url:'...?name=1&id=2'})
取值:onload:function(options){
this.setData({
id:options.id
})
}
获取其他页面的对象原型
E.js data:{
index:1
}
跳转到F页面,写一个方法
changeIndex:function(){
var pages=getCurrentPages();返回当前栈的路径和页面的数据
var prevPage=pages[pages.length-2];
prevPage.setData({
index:0
})
}
此方法可以操作页面堆栈里的页面数据,后一级页面对上一级页面群做数据管理
9.小程序里嵌入H5页面
<web-view src=""/>
web-view自动铺满整个页面,会覆盖页面的其他内容
H5跳转回小程序,引入微信的JSDK
wx.miniProgram.navigatorTo({url:'/path/to'})
10.生命周期函数
app.js文件:onLanch 初始化完成,出发onlanch
onShow 小程序启动或从后台进入前台显示,触发onshow
onHide 小程序隐藏,从后台进入前台触发
onError 发生脚本错误或api调用失败
page页面:onLoad 监听页面加载
onReady 监听页面初次渲染完成
onShow 监听页面显示
onHide 小程序隐藏,从后台进入前台触发
onUnload 监听页面卸载
App()必须在APP.js中注册,不能注册多个
通过getApp()获取实例后不要调用生命周期函数
不要再onLanch时调用getCurrentPage(),此时page还没生成
网友评论