官方文档 https://mp.weixin.qq.com/debug/wxadoc/dev/index.html
文档api https://www.w3cschool.cn/weixinapp/9w841q8w.html
微信小程序的技术点
并不是HTML5/CSS3技术实现
抛弃了臃肿的webView
采用了javaScriptCore动态解析
大量借鉴了React.js+ReactNative.js思想
小程序的语言
HTML/CSS 界面。类似于服务器上的各种模板引擎
JavaScript/ES6 编程语言 MVC 里的c
小程序的大小限制为2M
微信小程序实现viewpager swiper滑动页面
http://blog.csdn.net/qq273681448/article/details/71078017
设置text不换行
font-size: 16px;
color: gainsboro;
overflow:hidden;
white-space:nowrap;
text-overflow:ellip;
框架分析
app总体组成
page3个文件之间的交互
page(param)表示声明一个页面, data:{} 是写死的格式 mytext 是一个标签
{{}} 两个括号,表示解析js里面的代码
page函数
page里面data数据
setData函数进行刷新界面数据
不能通过this.data= {text "htllo;"}这样改变
app.js 一个微信小程序必须实例化一个app对象
app.json 这个文件不能写任何注释
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse){
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
// 在没有 open-type=getUserInfo 版本的兼容处理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
},
getUserInfo: function(e) {
console.log(e)
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
})
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #aaa;
}
View组件和Flexbox弹性盒模型
flex-direction 方向布局
row 行布局
column 列布局
在view中加上:
style="display: flex; flex-direction: row" 横向布局
style="display: flex; flex-direction: column" 纵向布局
Justify-content
<view style="display: flex; flex-direction: row; justify-content : flex-start;">
flex-start 向左边
flex-end 右边
center 中间
space-between 均匀的分布
space-around 均匀分布的时候最左右两侧也分配空间
<view style="display: flex; flex-direction: row; justify-content : space-around;">
align-items
<view style="display: flex; height:200px; flex-direction: row; justify-content : space-around; align-items : flex-start;">
flex-start 放在上面
flex-end 放在下面
<view style="display: flex; height:200px; flex-direction: row; justify-content : space-around; align-items : center;">
center 放在当中
事件交互
什么是事件
事件是视图层到逻辑层的通讯方式
事件可以将用户的行为反馈到逻辑层进行处理
事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
事件对象可以携带额外信息,如id,dataset,touches
事件的使用方式在官方文档中查看
bindtap = "a" id data-hi data-qf
a : function(e){
currentTarget.id; 取出wxml中d的值
currentTarget.dataset.qf; //取出data-xxxx的值,空间wxml里面可以携带私有数据
}
console.log();
基本空间(button按钮)
size : default,min
type: primary 主要(绿色) ,warn 警告(红色),default 默认的无色
plain true,false 按钮是否镂空,背景是否透明
具体的看官方文档
<view class="container">
<view>{{clickMsg}}</view>
<view class='view_item' bindtap='clickMe' id = 'view0' data-hi = 'data-view0' data-qf = 'data-qf0'>点击view0</view>
<view class='view_item' bindtap='clickMe' id='view1' data-hi = 'data-view1' data-qf = 'data-qf1'>点击view1</view>
<button size='default'>按钮</button>
<button size='mini' type='primary'>按钮</button>
<button size='mini' type='default' disabled='false'>按钮</button>
<button size='mini' type='warn' loading="false" bindtap='doLoading'>按钮</button>
<view class="view-section" style='display : flex; flex-direction:column' >
<icon type='success' size='50' color='red'></icon>
<icon type='success' size='50' color='green'></icon>
</view>
<view class='view-section'>
<block wx:for='{{[10,20,30,40,50,60]}}'>
<icon type='info' size='{{item}}'></icon>
</block>
</view>
</view>
var count = 0;
var param ={
data : {
clickMsg : '_显示点击的内容_'
},
//e就是事件对象,包含了很多内容,比如谁被点击了,什么事件被点击了,在什么位置被点击了。
clickMe :function(e) {
console.log(e);
count++;
//e = event
//如何区分view0和view1,在wxml中加上id,
//通过id区分
var id = e.currentTarget.id;
//把view上的点击显示出来。
param.data.clickMsg = '显示点击内容' + id + '点击次数' + count;
//取得data-xxxx的值,空间wxml里面可以携带私有数据
console.log(e.currentTarget.dataset.qf);
//setData重新刷新界面的数据
this.setData(param.data);
},
doLoading :function(e){
console.log(e);
}
};
Page(param);
基本控件(icon系统图标)
<view class="view-section" style='display : flex; flex-direction:column' >
<icon type='success' size='50' color='red'></icon>
<icon type='success' size='50' color='green'></icon>
</view>
<view class='view-section'>
<block wx:for='{{[10,20,30,40,50,60]}}'>
<icon type='info' size='{{item}}'></icon>
</block>
</view>
image图片显示
本地图片和远程图片
远程图片
<view class="item-left">
<image src="https://ss0.bdstatic.com/logo/a.png"/>
</view>
本地图片
<view class="item-left">
<image src="../image/wechatHL.png"/>
</view>
练习
border-top: 1px solid #eaeaea; 设置横线
border-bottom: 1px solid #eaeaea;
WXML数据绑定
通过代码动态的控制界面的展示,提供了一个类似于模板引擎的装置
只不过这个是单向的只能通过js控制wxml ,不能wxml控制js
把组件显示的屏幕的方式理解为渲染
数据绑定 {{temp}}
列表渲染 wx:for
<view wx:for="{{array}}"> {{index}}: {{item.message}}</view>
条件渲染 xw:if wx:elif wx:else
模板
wxml
<template name ='qfName'>
<view>
姓名 {{name}} 年龄 {{age}}
</view>
</template>
<template is = "qfName" data = '{{...zhangshan}}'></template>
<template is = "qfName" data = '{{...lisi}}'></template>
js
var param = {
data:{
zhangshan : {name : '张三',age : 19},
lisi :{name : '李四',age : 20}
},
}
Page(param);
条件渲染
<view class='container'>
<view wx:if = '{{length > 5}}'>大于五 </view>
<view wx:else> 小于等于5 </view>
<view>{{'hello'+name}}</view>
<block wx:if='{{isShow ? true :false}}'>
<view>view0</view>
<view>view1</view>
</block>
<view id='abc' style='display:block'> view2 </view>
</view>
var param = {
data : {
length : 7,
name :"三大开发",
isShow :true
}
};
Page(param);
懒渲染:如果条件成立就会渲染,反之就不渲染
display:none/hidden
列表渲染
var param = {
data : {
items : [
{message : 'view0'},
{message : 'view1'},
{message : 'view2'},
{ message: 'view3' }
]
}
};
Page(param);
<!-- items是数组,index是数组下标,item是每一项 -->
<view wx:for='{{items}}'>
{{index}} : {{item.message}}
</view>
<!-- 用idx替换了缺省的index,用myItem 替换了缺省的item -->
<view wx:for='{{items}}' wx:for-index='idx' wx:for-item='myItem'>
{{index}} : {{myItem.message}}
</view>
<view wx:for='{{[1,2,3,4,5,6,7,8,9]}}' wx:for-item='i'>
<view wx:for='{{[1,2,3,4,5,6,7,8,9]}}'wx:for-item='j'>
{{i}} * {{j}} = {{i * j}}
</view>
</view>
<!-- 循环3次 -->
<block wx:for='{{[1,2,3]}}'>
<view>view10</view>
<view>view11</view>
</block>
模板
console.log(); 打印log
项目目录结构
pages
js 调用Page方法,
wxml 布局文件
wxss 样式文件
json 配置文件
ueils
app.js 项目启动入口
app.json 定义每个页面及基本配置
app.wxss
视图与渲染 在文档中的组件
组件的基本使用
console.log()
数据绑定
wml 类型外面: {{定义的值}} 里面加上数据的值,js: Page({ data:{定义的值:"显示的内容"}}):,在里面进行定义
绑定事件 wxml 类型里面 : bindtap="定义的名称" js:在page中,定义的名称":function(){}
设置数据 js中this.setData({定义的值:"设置的值"});
shift()删除数据
渲染标签 <view 在里面使用></view>
条件标签 :wx:if="{{true}}" wx:else
循环标签: wx:for="{{['a','b','c']}}" {{item}} 表示一条数据 wxfor-item=:"temx" 在类型外面使用{{index}} - {{itemx}}
模板的使用
新建文件夹
创建模板文件
在要使用的<include src = "路径"加载/>,
如果使用定义的template 方式不能使用include用import src="路径" 导入模板,使用<定义的值 is ="哪一个模板" data="{{值}}"/>
include 相当于全部复制
import 需要指定需要 is 指定哪一部分的数据
data 相当于动态的设置模板的值
事件
事件是用户的行为,通讯方式
事件类别:点击事件,长按事件,触摸事件,
事件的冒泡
当点击子view的时候它还会触发父view
事件的绑定
bindtap 绑定
设置了bindmap会触发父view和子view的事件
catchtap绑定
设置了catchmap事件就不会触发父view的事件
事件的对象
类型type
时间戳 timeStamp
事件源组件 target
当前组件 currentTarget 点击的view,绑定事件的组件
触摸点数:touches: 目标view, 发生事件的组件
data-title="" data-id="" 都是dataset中的
综合案例 快递查询
配置详解 在框架中的配置进行查看
app的页面配置
在app.js中的pages进行配置
app的窗口配置
app.js中的window中进行配置
app的tabBar配置
pages中必须是页面中存在的并且在的
"tabBar": {
"color":"#000000",
"selectedColor":"#34B457",
"borderStyle": "black",
"list": [{
"iconPath":"pages/images/icon1.png",
"selectedIconPath":"pages/images/icon1s.png",
"pagePath": "pages/express/Page/express",
"text": "快递查询"
}, {
"iconPath": "pages/images/icon2.png",
"selectedIconPath":"pages/images/icon2s.png",
"pagePath": "pages/index/index",
"text": "主页"
}]
},
网络超时配置及debug开启配置
networkTimeout
页面配置
当前页面文件中的json,为了覆盖app,json中的window中的配置
debug 只有开启和关闭
生命周期与app对象的使用
在app.js中
onLaunch,onShow,onHide,getUserInfo 方法 globalData 对象 可以在每个页面都可以使用
执行顺序:onLaunch->onShow 如果切换都后台就执行onHide,再切换到前台为onShow
生命周期和参数传递
首先是app的onLoad->onShow到页面的onLoad-->onShow->onReady
页面跳转的方法: 当中的url只能在同一个包中,不能超过之外
1,
wx.navigateTo({ 跳转到另一个页面
url: '../页面的地址',
})
2,
wx.redirectTo({ 把当前页面替换为新的页面
url: '../log/log',
})
2
wx.navigateBack({ delta: num 返回的页面数 delta 大于现有页面数，则返回到首页。 })
4,
<navigator url='../log/log?id=100'>
包裹内容
</navigator>
5,
<navigator url='../log/log?id=100' redirect>
包裹内容
</navigator>
当一个页面跳转到一个页面会触发onHide再返回当前页面会触发onShow,
每个页面被创建的时候回触发onLoad加载数据,onShow绑定数据onReady 表明页面被正常显示,onUnload 页面被卸载,
在导航页面中有两个页面同时存在
参数的传递 在跳转页面方法中给url后面加上 ?id= 参数 两个以上的数据用＆
接收参数在onLoad(options)中的options里面接收参数
用户登录案例
ui
布局和样式的基础
view 相当于html中的div 将布局区分为一块一块的
scroll-view 可以上下左右滚动的布局
swiper 幻灯片
label 将表单组件和文本内容为一个整体
picker时间选择器
组件的使用
项目实战
ctrl +/ 为注释的快捷键
布局基础
1,flex布局基础 浮动布局(悬浮)
2,相对定位和绝对定位
flex的容器和元素
flex container 红色背景的整个框 flex容器
item 为flex元素
从左到右为主轴(main axis),从上到下为交叉轴(cross axis)
flex容器属性
flex-direction 决定元素的排列方向
flex-wrap 决定元素如何换行 (放几个再换行)
flex-flow flex-firection和flex-wrap的简写
justify-content 元素在主轴上的对齐方式
align-items 元素在交叉轴的对齐方式
flex元素属性
flex-grow 当有多余空间时,元素的放大比例
flex-shrink 当空间不足时,元素的缩小比例
flex-basis 元素在主轴上占据的空间
flex是grow,shrink,basis的简写
order 定义元素的排列顺序
align-self 定义元素的自身的对齐方式
flex布局
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
px像素.rpx 根据不同分辨率不同调整
在wxml中都是style=""里面写
在wxss中使用则直接写
flex容器属性的使用:
display:flex; 默认 为横向布局 。block表示[块内]容器模式，总是使用新行开始显示，小程序的3个视图容器（view，srcoll-view，swiper）默认值均为display:block
flex-direction:row;横向 column纵向
flex-wrap:wrap; 放不下就换行 no wrap 不换行 wrap-reverse 反转就是第一行放下面
flex-flow : row wrap; 综合了以上两个方法
justify-content:center; 居中对齐,相对于主轴(方向)进行显示, flex-start 左边进行对齐, flex-end 右边进行对齐,space-around 两边的间隔相等 space-between 两端对齐,中间间隔相等
align-items:flex-start; 交叉轴(方向)(上/左)开始对齐 flex-end 结尾(下/右)对齐 center 交叉轴的中间对齐,stretch 当元素没有设置高度时,自动占满容器,baseline 让元素里面的第一行文字基线对齐
flex元素的属性
flex-grow:0; 比例不变 1 每个占一份 ,比例扩大,相当于width
flex-shrink:1; 当空间不足时,默认等比缩小, 0 为不缩小
flex-bassis:200px; 在主轴上占据的大小为200px
flex:0 1 50px; 简写上面三个属性 当有多余的空间时0不变 1等比缩小, 占据主轴大小为50px
style=":order:4" 定义自己元素的顺序为第4个
align-self: flex-end; 更改自己的排列方式为
相对定位和绝对定位
相对定位的元素是相对自己进行定位,参照物是自己
position:relative; 使用相对定位
left:150rpx; 相对自己向左偏移150
绝对定位的元素是相对的离它最近的 一个已定位的父级元素进行定位
position:absolute;
overflow:hidden 隐藏溢出
align-items:center;/*垂直居中*/ justify-content: center;/*水平居中*/
setTimeout(function(){
},1500); 定时器
setInterval(this.draw,100); 循环播放
样式基础
样式的基本使用
样式的属性
样式选择器的使用
设置图片为背景
.container{
width: 100%;
height: 100%;
background-image: url('http://img3.redocn.com/tupian/20150312/haixinghezhenzhubeikeshiliangbeijing_3937174.jpg');
background-size:100% 设置背景显示的大小
}
border: 1px solid #fff; 边框
border-radius:20%; 圆角
border-left-width:2px
border-left-style:solid 实线
border-left-color:limeagreen; 颜色
样式的属性
尺寸
width height min-width 最小宽度 max-width 最大宽度 min-height max-height
背景
background-color 背景颜色 background-image 背景图片 background-repeat 重叠方式等 background-image url("地址") 网络背景图片
边框
border-width边框宽度 border-color边框颜色 border-style:solid;边框样式为立方体 border:10px.solid #ddd 上面三个的简写 border-radius; 边框为圆角
边距
margin:上,右,下,左 外边距
padding 内边距
文本
color
font-size
font-weight 粗细等
其他(列表.内容,表格,打印..)
基本选择器 选择让哪一个控件发生变化
类选择器(.name{}) class
ID选择器(#name{}) id
元素选择器(name{})
通配符选择器(*{})
包含选择器 (p c{})
子元素选择器(p > c{})
邻近兄弟元素选择器(c+c{})
通用兄弟元素选择器(c~c{})
组件的使用
看官网和示例代码
组件的配置
看官网
swiper 轮播图
视图容器组件的使用
view
scroll-view
swiper
基础内容组件
icon
text
progress
表单组件
button
checkbox
input
label
picker 时间,日期,地区,选择器
radio 单选框
slider 滑块
switch 开关
form 一次性获取里面所有控件的值
操作反馈小工具 在文档中的api里面的交互反馈
action-sheet
modal 弹出框
toast
loading
导航
navigator
在wxml中使用相当于点击直接导航到该页面
多媒体
audio
image
video
地图
map
画布
canvas
评测小程序首页
api
请求服务器数据
图片选择与调用微信拍照
wx.chooseImage 选择图片
照相机拍照
文件上传与下载
webSocket
在箭筒onseockeMessage中 thiss.data.message.push(参数.data);. thiss为this的引用
音乐的播放和控制
在api中的文档,可以在后台进行播放
数据缓存
保存数据 wx.setStorageSync
读取数据
删除数据 wx.removeStorageSync
数据异步操作
异步是调用方法并不阻塞,不管当前是否执行完毕
在查看日志 storage 有缓存
获取当前位置 getLocation
获取设备信息
网络状态
系统信息
交互反馈
showToast
showModal
showActionSheet 列表
导航和导航条
可以在json中进行设置和代码中进行设置导航信息
动画
1.创建动画wx.createAanimation
2,开始动画动
3.导出动画的数据export();设置给某一个控件
绘图
创建上下文wx.createContext()
微信小程序案例仿V2EX社区
使用xmind进行产品需求分析
使用墨刀进行产品原型设计
路由配置,完成底部的tabBar设计
mina框架 微信小程序的框架
产品层级,组件模块化设计
小程序模有代码大小限制为1m
组件讲解
列表开发
navigateTo redirectTo request 方法使用解析
使用wx.navigateTo完成页面跳转
使用request获取云端数据
微信小程序的发布
1092
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
