day01
微信小程序
Mini program
免安装，不用安装就可以运行的程序
发布小程序的包不能大于1M。路由最多有5级/a/b/c/d/e
微信开发者工具
新建项目
项目目录，先在目录里创建好文件夹，选择 demo
AppID 发布小程序的时候需要的。可以注册，也可以使用测试id
项目名称
选项：创建一个快速启动的模板
三大功能区
模拟器 手机
编辑器 文件目录和代码
调试器 控制面板，network
小程序
rpx
px
分辨率分为：
逻辑分辨率 设备的尺寸
pt
物理分辨率 像素点的多少
px
rpx
单位
度量衡
iph在不同的设备上保持一样的比例one 6 400*400px
100*100rpx
100*100px
ipad 800*800px
100*100rpx
200*200px
在iphone6手机上
1rpx = 1px(物理分辨率)
如果是布局尽量使用rpx单位
如果是字体的话，尽量使用px单位
flex布局
flex-direction 布局方向
row 排在一行
.one{
display:flex;
flex-direction:column;
//交叉轴的对齐方式 x
align-item:
//主轴的对齐方式 y
justify-content:
}
<div class="one"> //容器
<div></div> //项目
<div></div>
<div></div>
</div>
div div div
主轴
交叉轴
row:主轴x 交叉轴y
div div div
column:主轴y 交叉轴x
div
div
div
项目目录
pages
index
index.js
index.wxml
index.wxss
index.json
log
log.js
log.wxml
log.wxss
log.json
utils
app.js
app.json
{
“pages”:[
“pages/index/index”
]
}
app.wxss
project.config.json
.wxml
html 结构 div
wxml view text
.wxss
css 样式
.wxss文件
对css选择器的支持程度不太好
.one{
margin:10px;
padding:10px;
}
.js
逻辑代码
小程序分为视图层(wxml)和逻辑层(js)
index.js
Page({
data:{
msg:‘hello’
}
})
index.wxml
{{msg}}
v-if
v-else
v-for
wx:if
wx:else
wx:for
day02
微信小程序
微信开发者工具 模拟器，编辑器，调试器，
预览 真机调试
发布：
小于1M
路由最多有5级
项目结构
快速启动项目模板
app.js 注册小程序
App({
//小程序的生命周期
})
app.json 小程序的配置文件
{
“pages”:[
“pages/index/index”,
“pages/logs/log”
],
“window”:{
导航栏的颜色
导航栏的文字
}
}
app.wxss
写小程序的样式
project.config.json 项目的配置文件
pages 文件夹
index
index.js
Page({
data:{},
sayHello(){},
//页面的生命周期
})
index.json
{
window属性
导航栏的颜色
导航栏的文字
}
index.wxml
index.wxss
index页面的样式设置
logs
log.js
log.wxml
log.json
log.wxss
view是块级元素
text,image是行内元素
rpx 单位
可以自适应
小程序页面的度量衡
px
分辨率
逻辑分辨率 pt 屏幕越大逻辑分辨率越大
设备的尺寸 宽高 375*667
物理分辨率 px 越高清晰度越高
750*1334
在iphone6
1px(物理分辨率)=1rpx
750rpx;
1rpx=1px
750rpx;
1rpx= 1.X px
在设置宽 使用rpx
字体 使用px
逻辑分辨率 物理分辨率 rpx
pt px 统一的度量衡
在iphone6 375px
1物理分辨率=1rpx
平常咱们在代码中使用px，是逻辑分辨率 375px
width:750px;
设计图给的是物理分辨率
750*1334px
750rpx
1rpx=1px(物理分辨率)
设备尺寸
375667px 逻辑分辨率
代码中的
375667px 逻辑分辨率
ps设计图中
750*1334px 物理分辨率
设计图上放图片的位置400*300px
手机上需要留多少位置？200*150px
rpx
1rpx=1物理分辨率(px)=0.5逻辑分辨率(px)
页面的跳转
1.事件绑定(绑定触摸事件bindtap)
wxml中：
js中：
Page({
data:{},
test(){
//路由切换、页面跳转
},
})
2.页面跳转-API(路由切换)
1)navigateTo
父子页面之间的跳转，可以再返回父页面
wx.navigateTo({
url:’’,
//页面跳转成功
success(res){},
//页面跳转失败
fail(err){},
//页面无论跳转成功还是失败都会执行的函数
complete(){}
})
2)redirectTo
兄弟页面之间的跳转，不可以再返回上一个兄弟页面
wx.redirectTo({
url:’’,
//页面跳转成功
success(res){},
//页面跳转失败
fail(err){},
//页面无论跳转成功还是失败都会执行的函数
complete(){}
})
a父->b子
navigateTo
父页面是隐藏掉了 onHide()
a兄->b兄
redirectTo
a兄弟页面被卸载了 onUnload()
声明周期
应用程序的生命周期
app.js
App({
})
页面的生命周期
index.js
Page({
})
day03
列表渲染
wx:for="{{arr}}"
{{item}} {{index}}
wx:for-item="it"
{{it}}
wx:for-index="in"
{{in}}
wx:key="{{index}}"
给data中赋值
Page({
data:{
<!-- obj:{
name:'',
age:''
}; -->
<!-- arr:[1,2,3] -->
},
onLoad(){
let obj = {
name:'',
age:''
};
this.setData({obj});
let arr = [1,2,3];
this.setData({arr});
},
})
如何使用data中的值
data:{
a:1,
b:2
}
{{msg}}
{{msg+'hello'}}
{{a+b}}
事件
事件的绑定
bindtap 基础绑定事件
catchtap 阻止冒泡的绑定事件的方式
事件对象
<view bindtap="test"></view>
Page({
data:{},
test(event){
event.target
event.currentTarget
event.type
....
},
})
路由跳转 页面跳转
父子页面的跳转
wx.navigateTo({
url:'./test/test?id=5',
success(){},
fail(){},
complete(){}
})
父->子 父页面隐藏 onHide()
兄弟页面的跳转
wx.redirectTo({
url:'./test/test?id=5',
success(){},
fail(){},
complete(){}
})
a兄->b兄 a页面卸载了 onUnload()
生命周期
小程序的生命周期
app.js
App({
//小程序初始化完成时（全局只触发一次）
onLaunch(){},
//小程序启动，或从后台进入前台显示时
onShow(){},
//小程序从前台进入后台时
onHide(){},
//小程序发生脚本错误，或者 api 调用失败时触发，会带上错误信息
onError(){},
//小程序要打开的页面不存在时触发，会带上页面信息回调该函数
onPageNotFound(){}
})
页面的生命周期
index.js
Page({
data:{},
//页面加载时触发。一个页面只会调用一次。query是跳转到改页面时的参数
onLoad(Object query){
//{id:5}
}
//页面显示/切入前台时触发。
onShow()(){},
//页面渲染完毕
onReady(){},
//隐藏
onHide(){}
//页面卸载时触发
onUnload(){}
})
给事件处理程序传参
<view bindtap="test" data-web="hello" data-web-title="hello"></view>
test(event){
event.currentTarget.dataset--->对象
{ web:'hello',
webTitle:'hello'
}
},
给页面传参
从A页面->B页面
在A页面点击跳转的时候，携带参数
wx.redirectTo
wx.navigateTo({
url:'../test/test?id='+id,
})
在B页面接受参数
Page({
onLoad(option){
option--对象
{id:3}
}
})
条件渲染
<text wx:if="{{false}}">hello</text>
<text wx:else>world</text>
走马灯
//布尔属性 {{false}}
autoplay="false"
模板
封装
A页面 1，2，3
B页面 1，2，3
模板的封装
test.wxml文件
name属性是模板的名字
<template name="test">
1
2
3
{{name}}
{{age}}
</template>
test.wxss文件中
......
模板的使用
1.使用模板的wxml文档
A页面
let obj = {
name:'zhangsan',
age:12
};
<import src="./test/test.wxml" />
<view>
{{obj}}
<!-- is属性表示模板的名字 data给模板内部传数据 -->
<template data="{{...obj}}" is="test"></template>
</view>
B页面
let stu = {
name:'zhangsan',
age:12
};
<import src="./test/test.wxml" />
<view>
{{stu}}
<!-- is属性表示模板的名字 data给模板内部传数据 -->
<template data="{{...stu}}" is="test"></template>
</view>
2.使用模板的样式
A页面引入模板的样式，在A页面的wxss中使用@import来引入
a.wxss
@import '../test/test.wxss'
A页面的其他样式
1rpx = 1物理分辨率
1rpx = 2逻辑分辨率
pt是逻辑分辨率
1pt = 2rpx
px是逻辑分辨率，即屏幕尺寸
day04
页面跳转
wx.navigateTo({
url:'pages/index/index'
})
父页面->子页面 父页面隐藏
onHide()
返回箭头
wx.redirectTo({
url:'pages/index/index'
})
A兄弟页面->B兄弟页面 A卸载 onUnload()
没有返回的向左的箭头
页面传参
A->B传参
wx.navigateTo({
url:'pages/index/index?id=3'
})
index页面的js文件中
onLoad(option){
option->{id:3}
}
事件的传参
<view catchtap="test" data-id="333" data-true-name="zhangsan">
js
test(event){
event.currentTarget.dataset---对象
{
id:333,
trueName:'zhangsan'
}
}
模板和模板传参
模板页面不需要引入到小程序中，需要在使用的页面引入
定义模板
wxml
<template name="one">
<view></view>
{{name}}
{{age}}
......
</template>
wxss
view{}
使用模板
wxml的使用
A页面的js
data:{
obj:{
name:"",
age:'',
}
},
A页面的wxml
<import src="../template/template.wxml">
<template is="one" data="{{...obj}}"></template>
wxss的使用
A页面的wxss中引入模板的wxss
@import "../template/template.wxss"
ES6中的模块化
data.js
export default {
arr:[{},{},{}]
}
在页面的js中，使用其他js文件中的数据
import obj from './data.js';
obj = {
arr:[{},{},{}]
}
obj.arr 访问数据
导航，也可以进行页面的跳转
list 最少2个、最多5个 tab
在app.json里面配置，产生导航
条件渲染
wx:if="{{false}}"
wx:else
缓存
交互
提示框
wx.showToast({
title:'提示的内容',
mask:false,// 不防止物理穿透
})
加载框
模态对话框
wx.showModal({
})
操作菜单
libscore.com js库的发展趋势，被多少个站点在引用
jQuery 682981 -1.55
angular 12084 4.7
react 1455 -31.72
vue 287 20.87
MVVm
901
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
