小程序

小程序:

* 仿「ONE · 一个」 的微信小程序     http://wxopen.club/topic/58464c9ebc94e57359684519

---

1. 属性值直接使用 autoplay= “false” 其计算结果是一个字符串转成布尔值为真
   应使用 autoplay=”{{false}}”

2. 导航栏标题文字内容 显示在左侧

3. page height: 100%;高度沾满整个小程序的窗口

4. 画布转换坐标系统

5. 微信对象上的一个函数 函数的参数是一个对象形式
   wx.showToast({
   title: ‘加载中’,
   icon: ‘loading’,
   })
   setTimeout(function(){
   wx.hideToast()
   }, 1000)

---

文件作用域

• 声明的变量和函数只在当前文件中有效，不同文件相同名字的变量和函数相互不影响
• 在本地文件中使用全局变量函数
  var app = getApp();
  app.

模块化

• 公共js代码抽离为一个单独文件，做为一个模块。通过module.exports 对外暴露接口

视图层

• 数据绑定
  组建属性中取数据 在双引号中

• 列表渲染
  wx:for 绑定数组
  下标变量默认 index wx:for-index=”当前下标的变量名”
  当前项的变量名默认 item wx:for-item=”指定数组当前元素的变量名”
  wx:key

• 条件渲染
  wx:if wx:elif wx:else
  wx:if 只有在渲染条件第一次为真才开始局部渲染
  wx:hidden 始终渲染只是简单控制显示隐藏

• 模板
  …dataname 展开dataname
  name=”属性定义模板名字”
  is=”name声明需要使用的模板” 可以动态决定需要渲染那个模板
  要使用的文件中引入 模板 存放的文件 相对路径

• 事件

  • 事件对象可以携带的额外数据 id, dataset, touches
    dataset：在组件中定义数据，多个单词用 - 链接(data-element-type) 大写会自动转成小写 在event.target.dataset中转成驼峰 elementType

  • 事件类型 触摸开始、移动、被打断(touchcancel)、结束、点击(tap)、长按(longtap)

  • 事件对象
    pageX、Y 距离文档左上角的距离
    clientX、Y 距页面可现实区域(屏幕除去导航条)左上角的距离
    x、y 距离Canvas左上角的距离
    detail 自定义事件携带数据

  • 引入
    <import src=""/> 只引入目标文件中定义的template 而不会引入目标文件import的template
    <include src=""/> 将目标文件除 的整个代码引入 相当于拷贝

WXSS

• 尺寸单位 iPhone 1px=2rpx

• 样式导入
  @import “相对路径”;

• 组件

  • swiper
    默认150px高度
    bindchange current 改变是触发change事件 event.detail={current: current}
    垂直滑动 vertical=”true”
  • text
    文本
    支持转义符”\”
    只支持text嵌套
    除此节点其它不支持长按选中
  • progress 进度条 (显示百分比 不可拖动)
  • slider 滑动选择器(类似于音乐播放器的进度条)
  • picker 从底部弹起的滚动选择器，现在支持普通选择器，时间选择器，日期选择器。默认为普通选择器
  • pick-view 嵌入页面的滚动选择器
  • radio-group 单项选择器 组成
  • switch 开关选择器
  • textarea 多行输入框(里边的bug和tip较多)

  • navigator 页面链接 页面跳转(可对应wx.navigateTo, wx.redirectTo, wx.switchTap)

  • audio 音频组件

  • image 4种缩放模式，9种裁剪模式
    scaleToFill—不保持比例，拉伸宽高填满
    aspectFit —保持比例长边完全显示
    aspectFill —保持比例短边完全显示
    widthFix —保持比例高度自动
  • video 视频 (相关API wx.createVideoContext)
  • map 地图

API

• wx.request({发起HTTPS请求})
• wx.uploadFile({将本地资源上传到服务器})

• wx.downloadFile({下载文件资源到本地})

  临时路径，在本次小程序启动期间可以正常使用持久保存，需要调用wx.saveFile(下次启动也能访问)

• WebSocket 实现实时通讯

• wx.chooseImage({从本地相册选择图片或使用相机拍照})
• wx.previewImage({预览图片 预览界面自带分享 保存 收藏})

• wx.getImageInfo({获取图片信息 宽 高 本地路径})

• wx.startRecord({开始录音 超过一分钟自动结束录音})

  返回录音临时路径离开小程序是接口无法调用需要长期保存调用 wx.saveFile接口需要用户授权 兼容用户拒绝授权场景

• wx.stopRecord({主动调用 停止录音})

• wx.playVoice({开始播放语音})

• wx.pauseVoice({暂停正在播放的语音})
• wx.stopVoice({结束播放})
  
暂停后再次调用wx.playVoice为继续播放
只有使用了stopVoice才能从头播放

• wx.getBackgroundAudioPlayState({获取后台音乐播放状态 包括 音乐总时长 当前时长 是否播放 下载进度 歌曲数据连接})
• wx.playBackgroundAudio({使用后台播放器播放})

    微信客户端只能有一个后台音乐播放    其它小程序占用播放器时 原有小程序内音乐暂停播放    离开小程序(除了显示在聊天顶部) 音乐暂停播放

• wx.seekBackgroundAudio({控制音乐播放进度})
• wx.stopBackgroundAudio() 停止音乐播放
• wx.onBackgroundAudioPlay(callback) 监听音乐播放
• wx.onBackgroundAudioPause(callback) 监听暂停
• wx.onBackgroundAudioStop(callback) 监听停止

• wx.creatAudioContext(audioId)
  创建并返回audioContext对象 可以操作对应的audio组件

• wx.chooseVideo({拍摄视频或从手机相册中选择视频，并返回临时文件路径})

• wx.createVideoContext(videoId)
  创建并返回video上下文videoContext对象
  播放 暂停 跳转 发送弹幕

• wx.saveFile({保存文件到本地 限制10M})

• wx.getSaveFileList({获取本地以保存的文件列表})
• wx.getSavedFileInfo({获取本地文件信息})

    FileList 中fileList 文件保存时间戳和文件大小    FileInfo 中文件大小与时间戳

• wx.removeSavedFile({删除本地存储的文件})

• wx.openDocument({新开页面打开文档})

• 数据缓存(最大10M 永久缓存 为防用户换设备，不建议将关键信息全部存储于本地)

• wx.setStorage({异步存储于本地 会覆盖原来的key对应的内容})
• wx.setStorageSync({同步存储})
• wx.getStorage({异步获取})
• wx.getStorageSync({同步获取})
• wx.getStorageInfo({异步获取当前storage相关信息 所有的key 当前占用大小 限制空间大小})
• wx.getStorageInfoSync({同步获取相关信息})
• wx.removeStorage({移除指定key})
• wx.removeStorageSync({})
• wx.clearStorage() 清理本地数据缓存
• wx.clearStorageSync()

位置

• wx.getLocation({获取当前地理位置，速度 离开(除 显示在聊天顶部)后此接口无法使用})
• wx.chooseLocation({打开地图选择位置})
• wx.openLocation({使用微信内置地图查看位置})
• wx.createMapContext(mapId)
  创建并返回map上下文 mapContext 对象

设备

• wx.getSystemInfo({获取系统信息 窗口高宽度 设备像素比 微信设置的语言等})
• wx.getSystemInfoSync({同步获取})
• wx.getNetworkType({获取网络类型 wifi none})
• wx.makePhoneCall({拨打电话})
• scanCode({调起客户端扫码界面})

界面 交互反馈

• wx.showTost({显示消息提示框})

• wx.hideToast({隐藏消息提示框})

• 导航-页面跳转
  wx.navigation({保留当前页，跳转到应用内某个页面})
  wx.navigateBack({关闭当前页，返回上一页面或多级页面})
  wx.redirectTo({关闭当前页面，跳转到应用内的某个页面})
  wx.switchTab({跳转到tabBar页面，并关闭其他所有非tabBar页面})

    1.调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。    2.只能用wx.switchTab跳转到tabBar页面

canvas 画布

1. 同一页面中的canvas-id不可重复，如果已经出现过，则对应的画布将被隐藏并不在工作；没有指定 canvas-id的画布也将被隐藏2. 用的px做单位

• wx.canvasToTempFilePath({把当前画布的内容生成图片，并返回文件路径。成功后返回 res.tempFilePath 在编辑器上打印不出来东西})
• drawImage 绘制图像，图像保持原始尺寸
• fillText 在画布上绘制被填充的文本
• save 保存当前的绘图上下文
• restore 恢复之前保存的绘图上下文

wx.login({调用接口获取登录凭证code})

• code包括:
  用户唯一标示openid
  本次登录的会话密匙session_key