小程序巧应用，微信小程序开发实战
配置
app.json
- pages -> 所有的页面
- window -> 窗口的属性
- "navigtionBarBackgroundColor":"#00000" ->导航栏背景颜色
- "navgationBarTextStyle":"black/white" -> 导航栏标题颜色
- "navgationBarTitleText":"标题" -> 导航栏文字
- "backgroundColor":"#ffffff" -> 窗口的背景色
- "backgroundTextStyle":"dark/light" -> 下拉背景字体,loading的样式
- "enablePullDownRefresh":"false" -> 是否下拉刷新
- tabBar -> bottomNav
- 是一个list列表,最少2个,最多5个.
"tabBar": {"list": [{"pagePath": "pages/index/index", "text": "首页"}, {"pagePath": "pages/logs/logs", "text": "日志"}] }, - list对象中支持 pagePath,text,iconPath,selectedIconPath(选中icon的图片路径)
- 是一个list列表,最少2个,最多5个.
- "debug" -> true(默认是false)
- networkTimeout ->
- "request":30000 -> wx.request超时时间
- "connectSocket":30000 -> wx.connectSocket 超时时间
- "uploadFile":30000 -> wx.uploadFile超时时间
- "downloadFile":3000 -> wx.downloadFile 超时时间
逻辑层
app.js
app({ function,function })onLaunch -> 触发一次,初始化
onShow -> 启动/后台切换到前台 会触发onShow
onHide -> 进入后台
onError ->
可以添加任意函数,用this可以访问(在
app()中this可以拿到app实例)全局的
getApp()globalData:{}全局参数 (类型Object)
page.js
page({ data:{},xx:funcation{} })data -> 页面初始数据 (类型Object)
-
onLoad -> 生命周期-页面加载
-
options可以获取wx.navigateTo和wx.redirectTo以及
-
-
onReady -> 生命周期-初次渲染完成
-
wx.setNavigationBarTitle在onReady之后调用
-
onShow -> 生命周期-页面显示
-
onHide -> 生命周期-页面隐藏
- navigateTo或者底部进行tab切换时调用
onUnload -> 生命周期-页面卸载
-
onPullDownRefreash -> 监听用户下拉
- 需要在page.json中开启enablePullDownRefresh
onReachBottom -> 页面上拉触底事件的处理函数
-
onShareAppMessage -> 点击右上角分享
- 只有定义了此事件,右上角才会显示分享
- 需要return一个Object
return{}
可以添加任意函数,用this可以访问
-
事件处理函数
-
page({ viewTap:funcation(){console.loag('somethin')} })
-
-
getCurrentPage()获取当前页面栈的实例,返回的是一个数组- 第一个是首页
- 最后一个是当前页面
-
路由相关
- wx.navigateTo(Object) 保留当前页面,跳转到应用内的某个页面
- wx.redirectTo(onject)关闭当前页面,跳转到应用内的某个页面
- wx.navigateBack()关闭当前页面
-
在page()中使用setData函数将数据从逻辑层发送到视图层,同时改变对应的this.data的值
- this是包含它的函数作为方法被调用时所属的对象,在小程序中一般指调用页面
- 我的理解是在data中定义value,在
中引用value,通过bindtap绑定方法,然后可以通过setData改变value的值,进而改变,view中的value - 上面这条未测试
公共代码可以抽出来,通过
module.exports={xx:funcation}暴露出来才能使用var common = require('common.js')
微信原生Api
下面有单独的模块来展示
微信原生API有八大类,网络/媒体/文件.数据缓存/位置/设备/界面/微信开发接口
视图层
.wxml 与 .wxss结合
WXML
数据绑定
数据绑定 Page({ data:{message:'Hello'} })
- 简单绑定
- 尖括号外面:使用Mustache语法{{}}将变量包起来
- 组件属性(尖括号里面):需要在双引号之内
- 控制属性(尖括号里面):例如下面的事件绑定中if后面的
- 运算
- 三元运算符
- 算数,可以做正常的运算
- 逻辑判断
- 字符串拼接
- 三元运算符
- 组合
- 数组
- 对象
- 扩展运算符,可以将Object展开显示
列表渲染
列表渲染 Page({ data:{array:[1,2,3,4,5]}})
- 也可以使用
属性 - wx.key -> 列表中的位置会动态改变,或者有新的项目添加到列表中,希望列表中的项目保持自己的特征和状态 233页中有示例代码
条件渲染
条件渲染 Page({data:{view:'MINA'}})
可以包裹多个组件,在 属性中添加条件判断. 不是一个组件,是一个包装元素,在页面中不做任何渲染,只是接受控制属性 - wx:if与hidden的区别 : wx:if -> 是惰性的,如果初始渲染条件是false,框架什么也不做,在条件第一次变成真的时候才开始局部渲染. hidden初始就会被渲染. 频繁切换判断情景下用hidden,否则wx:if
模板
模板 这个 -> 在模板中定义代码片段,在其他地方调用
- is声明需要使用的模板
- 模板有自己的作用域,只能使用data传入数据
事件绑定
事件绑定 Page({ data:{count:1}, add:funchtion(e){this.setData({count:this.data.count+1})} })
- 视图层到逻辑层的通信方式,事件可以将用户行为反馈到逻辑层处理
- 冒泡事件 : 当组件被触发后,该事件会向父节点传递
- touchstart -> 手指触摸
- touchmove -> 手指触摸后移动
- touchcancel -> 手指触摸动作被打断(来电提醒,弹窗)
- touchend -> 手指触摸动作结束
- tap -> 手指触摸后离开
- longtap -> 手指触摸后,超过350ms再离开
- 非冒泡事件
- 除上面6个之外,其他组件自定义事件都是非冒泡事件
-
的submit -
的input -
- 事件绑定的写法同组件的属性,以key,value的形式(key以bind或catch开头,如bindtap,catchtouchstart)(value是字符串,需要在page中定义同名函数)
- bind事件不会阻止冒泡事件向上冒泡,catch会阻止
- 事件触发的时候,逻辑层会受到一个事件对象
- type(String) -> 事件类型
- timeStamp(Integer) -> 事件生成时间
- target(Object) -> 触发事件组件的一些属性集合(id:事件组件ID,tagName:事件组件的类型,dataset:事件组件上有data-开头的自定义属性组成的集合)
- currentTarget(Object) -> 当前组件的属性集合
- touches(Array) -> 触摸事件,当前停留在屏幕中触摸点信息的数组
- changedTouches(Array) -> 触摸事件,当前变化的触摸点信息的数组
- detail(Object) -> 课外的信息
引用
引用
- import,会引用目标文件中定义的template
- incloud,可将目标文件除模板代码 ()块的所有代码引入，相当于拷贝到 include位置
WXSS
- 使用@import语句来导入外联样式表
- wxss 选择器???/ .class #id element element,element ::after ::before 251页
- rpx单位,iphone6尺寸设计
- 所有组件都有的共同属性
- id(String) -> 唯一标识
- class(String) -> 样式
- style(String) -> 内联样式
- hidden(Boolean) -> 是否显示
- data-*(Any) -> 自定义属性,组件上触发事件时,会发送给事件处理函数
- bind* / catch*(EventHandler) -> 组件事件
组件
视图容器组件
- view -> 相当于
- hover(Boolean) -> 是否启用点击
- hover-class(String) -> 点击效果
- hover-start-time(Number) -> 多久出现点击效果
- hover-stay-time(Number) -> 手指松开后点击效果保留时间
- scroll-view
- scroll-x(Boolean) -> 允许横向滚动
- scroll-y(Boolean) -> 允许纵向滚动
- upper-threshole(Number) -> 默认值50 距离top/left多远(px),触发scrolltoupper事件
- lower-threshold(Number) -> 默认值50 距离bottom/right多远(px),触发scrolltoupper事件
- scroll-top(Number) -> 设置竖向滚动条的位置
- scroll-left(Number) -> 设置横向滚动条的位置
- scroll-into-view(String) -> 值为某个子元素的id,滚动到该元素,元素顶部对齐滚动区域顶部
- bindscrolltoupper(EventHandle) -> 滚动到top/left ,触发scrolltoupper事件
- bindscrolltoupper(EventHandle) -> 滚动到bottom/right ,触发scrolltoupper事件
- bindscroll(EventHandle) -> 滚动时触发,event.detail={........}
- swiper 其中只可以放置
组件 - indicator-dots(Boodlea) -> 是否显示指示点
- indicator-color(Color) -> 默认gba(0,0,0,0.3) 指示点颜色
- indicator-active-color(Color) -> 默认#000000 指示点选中颜色
- autoplay(boolean) -> 自动
- current(Number) -> 当前所在页面的index
- interval(Number) -> 自动切换事件间隔
- duration(Number) -> 滑动动画时长
- circular(Boolean) -> 是否采用衔接滑动
- bindchange(EventHandle) -> current改变时会触发change事件,event.detail={current:current}
基础内容组件
- icon 图标组件
- type(String) -> icon的类型,有效值:success,success_no_circle,info,warn,waiting,cancel,download,search,clear
- size(Number) -> icon的大小(px),默认是23
- color(Color) -> icon的颜色
- text
- progress 长的 进度条
- percent(Float) -> 0~100
- show-info(Boolean) -> 在进度条右侧显示百分比
- stroke-width(Number) -> 默认值6 进度条的宽度
- color(Color) -> 进度条的颜色
- active(Boolean) -> 进度条从左到右的动画
- 表单组件 button from input checkbox radio picker slider switch label
- button
- size(S) -> 有效值:default mini
- typr(S) -> 按钮的样式类型,有效值:primary,default,warn
- plain(Boolean) -> 按钮是否镂空,背景色透明
- disabled(Boolean) -> 是否禁用
- loading(B) -> 是否带loading图标
- form-type(String) -> 有效值:submit,reset.用于
组件,点击分别处罚submit/reset事件 - hover-class(String) -> 指定按钮按下去的样式类,当为none时,表示没有点击效果
- hover-start-time(Number) -> 按住后对酒出现点击态
- hover-stay-time(Number) -> 手指松开后点击态保留时间
- checkbox-group 多项选择器组件,内部多个checkbox组成
- bindchange(Eventhandle) -> 触发change事件,detail={value:[选中的checkbox的value的数组]}
- checkbox
- value(String) -> checkbox携带的value
- disabled(Boolean) -> 是否禁用
- checked(Boolean) -> 是否选中
- color(Color) -> checkbox的颜色
- from 为表单组件,用于提交用户输入的
- report-submit(Boolean) -> 是否返回formId用于发送模板消息
- bindsubmit(EventHandle) -> 携带from中的数据出发submit事件,event.derail={value:{name:value},formId}
- bindreset(EventHandle) -> 表单重置时会触发reset事件
- input 用户输入字段
- value(String)->输入框内容
- type(String)->类型,有效值:text,number,idcard,digit,time,date
- password(Boolean) -> 是否为密码
- placeholder->占位
- placeholder-style ->指定placeholder样式
- placeholder-class ->placeholder样式类
- disabled->是否禁用
- maxlength->最大程度,默认140,0为无限制
- cursor-spacing->光标与键盘的距离
- focus->获取焦点
- bindconfirm(EventHandle)->点击完成按钮触发,event.detail={value:value}
- bindinput->除了date/time,键盘输入触发event.detail={value:value},处理函数可以返回一个字符串,替换输入框的内容
- bindfocus->输入框聚焦时触发event.detail={value:value}
- bindblur->失去焦点时触发event.detail={value:value}
- label 组件标签,可以绑定的标签
- picker 普通选择器,时间选择器,日期选择器
- 普通选择器(mode=selector)
- range(Array/Object Array) -> model为selector时,range有效
- range-key(String) -> 当range为Object Array时,可以通过range-key开指定Object中key的值作为选择器的显示内容
- value(Number) -> model为selector时,是数字,表示选择了range中的第几个
- bindchange(Eventhandle) -> value改变时触发change事件,event.detail={value:value}
- disable(B) -> 是否禁用
- 时间选择器(mode-seletor) 格式 hh:mm
- value(S) -> 选中时间
- start(S) -> 有效时间范围的开始
- end(S) -> 有效时间范围的结束
- bindchange(Eventhandle) -> value改变时触发change事件,event.detail={value:value}
- disable(B) -> 是否禁用
- 日期选择器(mode=data) 格式 "yyy-MM-dd"
- value(S) -> 选中日期
- start(S) -> 有效日期范围的开始
- end(S) -> 有效日期范围的结束
- fields(S) -> 有效值year,month,day 表示选择器的粒度
- bindchange(EventHandle) (S) -> 触发事件
- disable(B) -> 是否禁用
- 普通选择器(mode=selector)
- picker-view嵌入页面的滚动选择组件,其中只能放
- value(Number Array) -> 数组中的数字依旧表示picker-view内的picker-view-colume选择的第几项(下标从0开始),数字大于picker-view-column可选长度时,选择最后一项
- indicator-style(S) -> 设置选择器中间选中框的样式
- bindchange(EventHandle) -> detail={value:value};value为数组,表示选择第几项
- radio-group 单项选择器
- value
- checked(B) -> 是否选中
- disable(B) -> 是否禁用
- color
- slider 滑动选择器
- min(N) -> 最小值 默认0
- max(N) -> 最大值 默认100
- step(N) -> 步长 默认1
- value(N) -> 当前取值 默认0
- color -> 背景条颜色
- selected-color -> 已经选择的颜色
- show-value(B) -> 是否显示当前value
- bindchange -> 完成一次拖动后触发的事件 event.detail={value:value}
- switch 开关
- checked(B) -> 是否选中
- type(S) -> 样式:switch checkbox
- color
- bindchange(eventhandle) -> 事件event.detail={value:value}
- textarea 多行输入控件,属性太多了 318页
互动操作组件
- action-sheet就是bottom Dialog
- modal 模态弹窗组件 Dialog
- title
- no-cancle(B) -> 是否隐藏cancel按钮
- confirm-text(S) -> confirm按钮文字
- cancel-text(S) -> cancel按钮文字
- bindconfirm -> confirm触发回调
- bindcancel -> cancel以及蒙层触发回调
- toast
- duration
- bindchange -> duration延时后触发
- loading
页面导航组件
- vavigator
媒体组件
- image
- src(S) -> 图片资源地址
- mode(S) -> 图片裁剪,缩放的模式(缩放模式scaleToFill,aspectFit,aspectFill,widthFix)(裁剪模式Top,bottom,center,Left,right......等组件)
- binderro -> 图片发生错误时
- bindload -> 图片载入完毕
- audio 音频组件
- video 视频组件
地图组件
画布组件
WXML组件与HTML的差异
API接口的开发应用
网络API
wx.request(Object)发起https请求
wx.uploadfile(Object)上传开发者服务器
wx.downloadFile(Object)下载文件到本地
wx.connectSocket(Object)创建WebSocket连接
wx.onSocketOpen(Callback)监听WebSocket连接打开事件
wx.onSocketError(Callback)监听WebSocket错误
wx.onSocketMessage(Callback)监听WebSocket接收到服务器的消息事件
wx.closeSocket()关闭WebSocket连接
wx.onSocketClose(Callback)监听WebSocket关闭
媒体API
- 图片
- wx.chooseImage(Object) 本地选择或者拍照
- wx.previewImage(Object) 预览图片
- wx.getImageInfo(Object) 获取图片信息
- 录音API
- wx.startRecord(Object) 开始录音
- wx.stopRecord(Object) 停止录音
- 音频播放控制API
- 音乐播放控制API
- 视频API
文件API
- wx.saveFile(Object) 保存
- wx.getSavedFileInfo(Object) 获取本地文件信息
- wx.removeSaveFile(Object) 删除
- wx.openDocument(Object) 打开页面文档 (doc,xls,ppt,pdf,docx,xlsx,ppyx)
数据缓存API
- wx.setStorage(Object) 接口实现将数据存 储在本地缓存中指定的key中。
- wx.setStorageSync(Key,data) 接口实现将数据存 储在本地缓存中指定的key中。
- wx.getStorage(Object) 接口用于从本地缓 存中异步获取指定key对应的内容。
- wx.getStorageSync(Key) 接口用于从本地缓 存中同步获取指定key对应的内容。
- wx.getStorageInfo(Object) 接口用于异步 获取当前storage的相关信息。
- wx.getStorageInfoSync 接口用于同步获取当前 storage的相关信息。
- wx.removeStorage(OBJECT) 接口用于从本 地缓存中异步移除指定key。
- wx.removeStorageSync(KEY)接口用于从本 地缓存中同步移除指定key。
- wx.clearStorage() 接口用于清理本地数据缓 存。
- wx.clearStorageSync()接口用于同步清理本 地数据缓存。
位置API
- wx.getLocation(OBJECT)获取当前的地理位
置、速度。
wx.chooseLocation(OBJECT)接口用于打开 地图选择位置。
wx.openLocation(OBJECT)接口用于实现使 用微信内置地图查看位置。
wx.createMapContext(mapId)接口用于创建 map上下文对象mapContext。
设备信息API
wx.getNetworkType(OBJECT)接口用于获取 网络类型。
wx.getSystemInfo(OBJECT)接口用于获取 系统信息。
wx.getSystemInfoSync()接口用于获取系统 信息同步。
wx.onAccelerometerChange(CALLBACK)接
口监听重力感应数据。
wx.onCompassChange(CALLBACK)接口实 现监听罗盘数据。
wx.makePhoneCall(OBJECT)接口用于拨打 电话。
wx.scanCode(OBJECT)接口用于调取客户 端进行扫码。
界面API
交互API
- wx.showToast(OBJECT)接口用于显示消息
提示框。
wx.hideToast()接口用于隐藏消息提示框。
wx.showModal(OBJECT)接口用于显示模态 弹窗。
wx.showActionSheet(OBJECT)用于显示操 作菜单
页面导航API
wx.setNavigationBarTitle(OBJECT):动态 设置当前页面的标题。
wx.showNavigationBarLoading():接口实现 在当前页面显示导航条加载动画。
wx.hideNavigationBarLoading():接口实现 隐藏导航条加载动画。
wx.navigateTo(OBJECT):接口实现保留当 前页面，跳转到应用内的某个页面，使用 wx.navigateBack()可以返回到原页面。
wx.redirectTo(OBJECT):接口实现关闭当 前页面，跳转到应用内的某个页面。
wx.switchTab(OBJECT):接口实现跳转 tabBar页面并关闭其他所有非tabBar页面。
wx.navigateBack(OBJECT):接口实现关闭 当前页面，回退前一页面或多级页面。可通过 getCurrentPages())获取当前的页面栈，决定需 要返回几层。
动画API
- wx.createAnimation(OBJECT)， 接口用于实现创建动画，并在通过相应方法在页面 上描述动画过程
绘图API
其他API
wx.hideKeyboard()接口用于收起键盘。
wx.stopPullDownRefresh()接口用于停止当前页面下拉刷新。
Page.onPullDownRefresh是在Page方法中定义 的onPullDownRefresh处理函数，以监听该页面用户 下拉刷新的事件。需要在页面json文件的window配 置项中开启enablePullDownRefresh。当处理完数据 刷新后，使用wx.stopPullDownRefresh()就可以 停止当前页面的下拉刷新。
开放API
wx.login(OBECT)接口用于获取登录凭证 (code)及用户登录态信息。
wx.checkSession(OBJECT)接口用于检查登录态是否过期。
wx.getUserInfo(OBJECT)接口用于获取用户信息，需要先调用wx.login接口。
wx.requestPayment(OBJECT)接口用于发起微信支付。
模板消息接口用于给用户发送如通知类的模板消息。
客户消息接口用于客服会话消息的接收与发送。