微信小程序的技术点 并不是HTML5/CSS3技术实现 抛弃了臃肿的webView
采用了javaScriptCore动态解析 大量借鉴了React.js+ReactNative.js思想 小程序的语言 HTML/CSS 界面。类似于服务器上的各种模板引擎 JavaScript/ES6 编程语言 MVC 里的c
微信小程序实现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总体组成
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 }) } })
View组件和Flexbox弹性盒模型
事件交互 什么是事件 事件是视图层到逻辑层的通讯方式 事件可以将用户的行为反馈到逻辑层进行处理 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。 事件对象可以携带额外信息,如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 按钮是否镂空,背景是否透明 具体的看官方文档
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系统图标)
image图片显示 本地图片和远程图片 远程图片
练习
border-top: 1px solid #eaeaea; 设置横线 border-bottom: 1px solid #eaeaea;
WXML数据绑定 通过代码动态的控制界面的展示,提供了一个类似于模板引擎的装置 只不过这个是单向的只能通过js控制wxml ,不能wxml控制js
把组件显示的屏幕的方式理解为渲染
数据绑定 {{temp}} 列表渲染 wx:for
js var param = { data:{ zhangshan : {name : '张三',age : 19}, lisi :{name : '李四',age : 20} }, } Page(param);
条件渲染
var param = { data : { length : 7, name :"三大开发", isShow :true } };
Page(param);
懒渲染:如果条件成立就会渲染,反之就不渲染 display:none/hidden
列表渲染
Page(param);
模板
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 事件的绑定 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'> 包裹内容
5, <navigator url='../log/log?id=100' redirect> 包裹内容
当一个页面跳转到一个页面会触发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的容器和元素
从左到右为主轴(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布局 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框架 微信小程序的框架
navigateTo redirectTo request 方法使用解析
在线客服
