近期公司在做小程序,虽然暂时没有参与进去,但是学习的热情不能减。
下面就把学习过程中的一些笔记进行整理,作如下总结。我们开始吧。
主体目录结构
pages – 项目所有组件 index.wxml - xml文件(非常严格)
app.js – 入口文件
app.json – 项目全配置文件(1)不能加注释 (2)内容严格
app.wxss – 全局样式文件 添加二个新功能:(1)单位 rpx (2) @import “x.wxss”
wxml——小程序wxml 是一种xml文件用于描述网页结构
xml 格式要求非常严格,不是html
一个xml文件必须有且只有一个根元素
所有标签有开始必须有结束
所有属性值必须双引号 <button name="btn" >
wxml常用标签
<view></view>
相当于<div></div>
<text></text>
相当于<span><p>
<image></image>
相当于<img src="" />
<navigator></navigator>
相当于<a>
<form></form>
修改显示组件顺序
app.json “pages”:[“pages/index/index”…]
哪个组件在第一位则默认显示哪个组件
wxss [样式文件]
每一个组件中都有一个样式文件,每一个组件中都有一个js文件。默认样式文件和js文件自动加载wxml。不用手工引入(微信小程序平台自动操作)
小程序对css文件封装操作 wxss—-#rpx (r响应式)
示例:
iphone 6 设计图宽度(物理像素 750) 2x
(逻辑像素 375px) (逻辑像素 750rpx)
iphone 6 plus 3x
注意:width:height 使用 rpx;font-size:12px;
样式引入
@import “引入其它样式文件”
小程序样式布局:弹性布局
js [样式文件]
小程序一个组件对应 .js 默认有一个对象
Page:当前组件对象 Page({data:{},onload:function()...})
小程序js程序
(1)ECMAScript
基本数据类型 number;string;boolean;null;undefined
引入 Object;Number;Date;RegExp;…
(2)小程序没有 BOM/BOM概念
widow;document;alert();….
(3)小程序有一个顶级js对象 wx(类似window)
组件
轮播图
1 | <swiper> |
常见属性:
-autoplay 自动播放
-interval 间隔时间
-indicator-dots 指示点
-vertical 方向
生命周期
生命周期:一个组件从创建到销毁过程
全局生命周期:app.js
-onLaunch 当小程序运行只执行一次
局部生命周期(组件生命周期)
-onLoad 组件加载时触发一个组件只会调用一次
参数: options 不同组件之间传参数 a?id=10 b:options.id
通常在此事件发送ajax请求,获取参数
-onReady 页面初次渲染完成触发,一个页面只会调用一次,代表页面己渲染结束可以进入交互操作
-onShow 页面显示或者切换前台时触发
-onHide 页面隐藏/切换后台触发
-onUnload 页面卸载时触发.通过程序跳转其它组件
redirectTo();navigateBack()触发
组件事件处理函数
-onPullDownRefresh 监听用户下拉操作
#默认小程序禁止用户下拉操作
#在全局配置文件”window”
enablePullDownRefresh:false
-onReachBottom 监听用户上拉触底
-onPageScroll({}) 监听用户滑动页面事件
scrollTop 页面在垂直方向己经滚动距离
小程序配置
全局配置项局部配置项 app.json
-pages: array 页面路径列表,默认显示数组第一个组件内容
-window 窗口样式(渲染方式)
“navigationBarTextStyle”: “black”/“white” 颜色 “#f00” red 错误
-tabBar 兼容性差
exam01/exam01.json 局部(就近原则)
小程序数据表现 wxml(WeiXin Markup Language) 一套以xml为标准语言
<view><view>
div<text></text>
只有text元素才能全选(复制)
:selectable
false 文本是否可以选中
:decode
false 是否解码
<image src="x.jpg" mode="aspectFill " lazy-load></image>
:mode
:二个参数选项 “aspectFill” “aspectFit” 缩放
:lazy-load
:支持懒加载
<navigator url="当前小程序跳转链接"></navigator>
事件
事件:组件表示层(wxml)与业务逻辑层(js)交互手段
事件绑定:<view id="tapTest" data-idx="10" bindtap="函数">Clike Me</view>
事件类型:
tap :手指触摸后马上离开
longtap :手指触摸后,超过 350ms再离开(长按钮) 旧
longpress :手指触摸后, 超过 350ms再离开 新 1.5.0
绑定函数:在相应的Page对象定义事件处理函数
1 | Page({ |
注意事项:
(1) “longtap” event is deprecated. Please use “longpress” event instead.
过期:不建议再使用,如果一定要用也可以正常使用
(2)如果当前元素指定 longpress并绑定函数tap事件有可能不会触发
事件传播方式分类
(1)冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递
(2)非冒泡事件:一个组件上的事件被触发后,该事件不向父节点传递
小程序区别事件处理是否使用冒泡方式看前缀
bind 冒泡事件 bindtap
catch 非冒泡事件 catchtap
获取不同类型参数跳转方式
小程序参数:不推荐使用参数传递数值方式来将参数传递函数内
解决方案: 自定义属性
1 | <view id="tapName" data-idx="39" bindtap="tapName"></view> |
小程序跳转与参数传递
小程序不同组件之间跳转
方式一:标签 <navigator url="组件路径"></navigator>
注意:使用标签方式跳转还可后退
方式二:编程
-wx.navigateTo({});
保留当前组件跳转到应用内容其它组件
#要求:不能跳转 tabbar
-wx.navigateBack({url:组件路径})
关闭当前页组件返回上一个组件或其它组件
新问题:获取参数值不能将数值显示模板
解决问题:
(1)在低版本小程序 this.data.id = id; 正确 2017 <
(2)新版本小程序 使用新方法解决 setData
setData({data属性名:数值})
setData将数据异步更新视图wxml同时改变 this.data值
-wx.redirectTo({url:”组件路径”})
关闭当组件跳转到应用内其它个组件,不允许跳转tabbar
关闭当前组件
1:关闭当前组件
2:卸载组件 在卸载之前触发 onUnload
-wx.reLaunch({url:”组件路径”})
关闭所有组件,打开到应用内某个组件
-wx.switchTab({url:”组件路径”})
跳转到tabBar组件,并关闭所有非tabbar组件
小结:
(1)不同组件之间跳转保留优先 wx.navigateTo()
(2)如果当前组件定义tabbar wx.reLaunch()
AJAX请求
小程序中显示数据依赖 AJAX获取服务器上数据,保存当前data属性在模板显示wx.request({})
小程序发送异步请求方法
常用属性和方法
url 请求服务器程序地址
data string/object/array 请求参数
method 请求方法
header 请求header appliation/json
success 请求成功回调函数
fail 请求失败回调函数
complete 无论成功或失败都执行
常见错误
(1)工具菜单->项目详细->[*] 不校验合法域名
(2) this.setData is not a function;
在请求处理函数this 指定当前 wx对象 wx没有 setData
将this指定从 wx 修改 Page
解决方案:使用箭头函数
(3)参数传递失败 id;age
解决方案:打开网络控制面板 network
交互
-wx.showToast({}); 显示消息提示框
title:”..” 提示的内容
icon:”” 图标:默认值 “success”
duration 延迟时间
注意:title字数为了兼容性少于7个字
注意:icon:”success” “loading” “none”
-wx.showModal({}); 显示模态对话框
title:”” 标题
content:”” 内容
success: (res)=>{
}
-wx.showActionSheet({}) 显示操作菜单
itemList:[“”,””,””]
itemColor:”#fff”
success:(res)=>{
res.tapIndex 用户选中下标下标
}
存储
局部(当前组件)数据存储data:{}
全局(小程序生命周期)数据存储跨组件 -在app.js 定义全局共享数据
1 | App({ |
-其它组件操作全局数据
(1)加载全局组件,小程序提供方法 getApp() const app = getApp();
(2)读取数据 var uname = app.globalData.LoginName;
(3)操作数据 app.globalData.LoginName = “tom”
音频
小程序后台播放器播放音乐,对于微信客户端来说,只能同时
有一个后台音乐在播放,当其它小程序占用音乐播放器,原有
小程序音乐停止播放
方法与事件
(1)wx.playBackgroundAudio({}) 播放背景音乐
-datalist 音乐链接目前支持音频格式 mp3;wav;aac;m4a
-title 音乐标题
-convertImgUrl 封面
(2)wx.pauseBackgroundAudio({}) 暂停背景音乐
(3)wx.stopBackgroundAudio({}) 停止背景音乐
(4)wx.onBackgroundAudioPlay 监听音乐播放事件
(5)wx.onBackgroundAudioPause 监听音乐暂停播放事件
(6)wx.onBackgroundAudioStop 监听音乐停止播放事件
开发顺序
-将音频文件保存服务器 node.js/public/bg.mp3
-启动服务器
-打开浏览器访问bg.mp3
-index组件
常见错误:音乐播放时闪退
原因:音乐文件路径不正确或者服务器出错
多媒体视频
1:通过video组件显示视频
<video src="视频路径"></video>
默认视频:300px 宽 225px 高
常见属性
autoplay 自动播放
loop 循环
muted 静音
poster 广告图片
controls 控件
2: 通过video组件显示视频(选择视频 相册 照相机)
<video src=""></video>
1 | wx.chooseVideo({ // 选择视频播放 |
tabbar
小程序主页底层导航条,该导航条是通过配置文件创建
app.json
pages:[] 组件访问路径
windows:{} 组件配置
1 | tabBar:{ |
注意1:图片本地保存
注意2:最少二个对象
1:常见错误:
tabBar.list[1].iconPath 文件不存在
tabBar.list[1].selectedIconPath 文件不存在
2:常见错误:
-点击某个组件 tabbar 消失
-当前组需要显示tabbar必须将组配置
tabbar:[pagePath]
- 本文作者: Jambo
- 版权声明: 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处!