day01

微信小程序
Mini program
免安装，不用安装就可以运行的程序
发布小程序的包不能大于1M。路由最多有5级/a/b/c/d/e
微信开发者工具
新建项目
项目目录，先在目录里创建好文件夹，选择 demo
AppID 发布小程序的时候需要的。可以注册，也可以使用测试id
项目名称
选项：创建一个快速启动的模板

三大功能区模拟器 手机编辑器 文件目录和代码调试器 控制面板，network

小程序
rpx

px
分辨率分为：逻辑分辨率 设备的尺寸pt物理分辨率 像素点的多少pxrpx单位度量衡iph在不同的设备上保持一样的比例one 6 400*400px100*100rpx100*100pxipad  800*800px100*100rpx200*200px在iphone6手机上1rpx = 1px(物理分辨率)如果是布局尽量使用rpx单位如果是字体的话，尽量使用px单位
flex布局flex-direction 布局方向row   排在一行	.one{display:flex;flex-direction:column;//交叉轴的对齐方式  xalign-item://主轴的对齐方式 yjustify-content:}<div class="one"> //容器<div></div>  //项目<div></div><div></div></div>	div   div    div主轴交叉轴row:主轴x 交叉轴ydiv   div    divcolumn:主轴y  交叉轴xdivdivdiv

项目目录
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

.wxmlhtml  结构  divwxml  view  text
.wxsscss   样式.wxss文件对css选择器的支持程度不太好.one{margin:10px;padding:10px;}
.js逻辑代码

小程序分为视图层(wxml)和逻辑层(js)
index.js
Page({
data:{
msg:‘hello’
}
})
index.wxml

{{msg}}

	v-ifv-elsev-forwx:ifwx:elsewx: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

hello

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(物理分辨率)=1rpx750rpx;  1rpx=1px750rpx;1rpx= 1.X px
在设置宽  使用rpx
字体  使用px逻辑分辨率 物理分辨率     rpxpt        px      统一的度量衡

在iphone6 375px
1物理分辨率=1rpx
平常咱们在代码中使用px，是逻辑分辨率 375px
width:750px;

设计图给的是物理分辨率750*1334px750rpx1rpx=1px(物理分辨率)

设备尺寸
375667px 逻辑分辨率
代码中的
375667px 逻辑分辨率
ps设计图中
750*1334px 物理分辨率

设计图上放图片的位置400*300px
手机上需要留多少位置？200*150pxrpx
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兄redirectToa兄弟页面被卸载了 onUnload()

声明周期
应用程序的生命周期
app.js
App({

		})
页面的生命周期index.jsPage({})

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.targetevent.currentTargetevent.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.jsApp({//小程序初始化完成时（全局只触发一次）onLaunch(){},//小程序启动，或从后台进入前台显示时onShow(){},//小程序从前台进入后台时onHide(){},//小程序发生脚本错误，或者 api 调用失败时触发，会带上错误信息onError(){},//小程序要打开的页面不存在时触发，会带上页面信息回调该函数onPageNotFound(){}})
页面的生命周期index.jsPage({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.redirectTowx.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，3B页面  1，2，3模板的封装test.wxml文件  name属性是模板的名字<template name="test">123{{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">jstest(event){event.currentTarget.dataset---对象{id:333,trueName:'zhangsan'}}

模板和模板传参

模板页面不需要引入到小程序中，需要在使用的页面引入定义模板wxml<template name="one"><view></view>{{name}}{{age}}......</template>	wxssview{}使用模板wxml的使用A页面的jsdata:{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.jsexport 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.55angular  12084  4.7react		 1455   -31.72vue    	 287  	20.87MVVm