微信小程序学习笔记

官方文档https://mp.weixin.qq.com/debug/wxadoc/dev/index.html

文档apihttps://www.w3cschool.cn/weixinapp/9w841q8w.html

微信小程序的技术点

并不是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总体组成

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

})

}elseif (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

})

}

})

<imagebindtap="bindViewTap"class="userinfo-avatar"src="{{userInfo.avatarUrl}}"background-size="cover"></image>

<textclass="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

<viewstyle="display: flex; flex-direction: row; justify-content : flex-start;">

flex-start 向左边

flex-end 右边

center 中间

space-between 均匀的分布

space-around 均匀分布的时候最左右两侧也分配空间

<viewstyle="display: flex; flex-direction: row; justify-content : space-around;">

align-items

<viewstyle="display: flex; height:200px; flex-direction: row; justify-content : space-around; align-items : flex-start;">

flex-start 放在上面

flex-end 放在下面

<viewstyle="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 按钮是否镂空,背景是否透明

具体的看官方文档

<viewclass="container">

<view>{{clickMsg}}</view>

<viewclass='view_item'bindtap='clickMe'id ='view0'data-hi ='data-view0'data-qf ='data-qf0'>点击view0</view>

<viewclass='view_item'bindtap='clickMe'id='view1'data-hi ='data-view1'data-qf ='data-qf1'>点击view1</view>

<buttonsize='default'>按钮</button>

<buttonsize='mini'type='primary'>按钮</button>

<buttonsize='mini'type='default'disabled='false'>按钮</button>

<buttonsize='mini'type='warn'loading="false"bindtap='doLoading'>按钮</button>

<viewclass="view-section"style='display : flex; flex-direction:column'>

<icontype='success'size='50'color='red'></icon>

<icontype='success'size='50'color='green'></icon>

</view>

<viewclass='view-section'>

<blockwx:for='{{[10,20,30,40,50,60]}}'>

<icontype='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系统图标)

<viewclass="view-section"style='display : flex; flex-direction:column'>

<icontype='success'size='50'color='red'></icon>

<icontype='success'size='50'color='green'></icon>

</view>

<viewclass='view-section'>

<blockwx:for='{{[10,20,30,40,50,60]}}'>

<icontype='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:1pxsolid#eaeaea; 设置横线

border-bottom:1pxsolid#eaeaea;

WXML数据绑定

通过代码动态的控制界面的展示,提供了一个类似于模板引擎的装置

只不过这个是单向的只能通过js控制wxml ,不能wxml控制js

把组件显示的屏幕的方式理解为渲染

数据绑定 {{temp}}

列表渲染 wx:for

<view wx:for="{{array}}"> {{index}}: {{item.message}}</view>

条件渲染 xw:if wx:elif wx:else

模板

wxml

<templatename ='qfName'>

<view>

姓名 {{name}} 年龄 {{age}}

</view>

</template>

<templateis ="qfName"data ='{{...zhangshan}}'></template>

<templateis ="qfName"data ='{{...lisi}}'></template>

js

var param = {

data:{

zhangshan : {name : '张三',age :19},

lisi :{name : '李四',age :20}

},

}

Page(param);

条件渲染

<viewclass='container'>

<viewwx:if ='{{length > 5}}'>大于五</view>

<viewwx:else> 小于等于5</view>

<view>{{'hello'+name}}</view>

<blockwx:if='{{isShow ? true :false}}'>

<view>view0</view>

<view>view1</view>

</block>

<viewid='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是每一项 -->

<viewwx:for='{{items}}'>

{{index}} : {{item.message}}

</view>

<!-- 用idx替换了缺省的index,用myItem 替换了缺省的item -->

<viewwx:for='{{items}}'wx:for-index='idx'wx:for-item='myItem'>

{{index}} : {{myItem.message}}

</view>

<viewwx:for='{{[1,2,3,4,5,6,7,8,9]}}'wx:for-item='i'>

<viewwx:for='{{[1,2,3,4,5,6,7,8,9]}}'wx:for-item='j'>

{{i}} * {{j}} = {{i * j}}

</view>

</view>

<!-- 循环3次 -->

<blockwx: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,

<navigatorurl='../log/log?id=100'>

包裹内容

</navigator>

5,

<navigatorurl='../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获取云端数据

微信小程序的发布