小程序随手小记

0328
//模块只有通过 module.exports 或者 exports 才能对外暴露接口 
//show.js
function showName(myname){
    console.log(hello ${myname})
}
module.exports.showName = showName

//引入公共js文件 

var myshowName = require('show.js')
Page({
    showMyname:function(){
        myshowName.showName('hanmeimei')
    }
})

tip: require 暂时不支持绝对路径

0329
<checkbox checked="{{true}}">这是一个checkbox</checkbox>

特别注意：不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值。

<view>{{object.key}} {{array[0]}}</view>

Page({
    data: {
        object:{
            key: "Hello"
        },
        array: ['yingbeiqian']
    }
})

redirectTo
微信小程序并发数不能超过5个,如超过5则需使用redirectTo关闭当前页面并跳转到指定的应用地址。

wx.navigateTo和wx.redirectTo不允许跳转到tabbar页面，只能用wx.switchTab跳转到tabbar页面

快捷键
注释——Ctrl K Ctrl C 反注释——Ctrl K Ctrl U
Alt + Up，Alt + Down：直接对当前光标所在的行进行移动操作
Shift + Alt + F：代码格式化功能很强大，包含对空行、缩进等的处理
Shift+Alt+Up，Shift+Alt+Down：直接对当前光标所在的行进行向上向下复制一行
Ctrl + Shift + Enter：在当前光标所在的行上方插入一行
Ctrl + Home、Ctrl + End：将光标移动到文件首位置、文件结尾
Ctrl + i：选中当前光标所在的行
shift + ctrl + P：预览代码
shift + ctrl + U：上传代码
Ctrl + Alt + Left,Ctrl + Alt + Right: 左右切换文件夹

0402
可以用 wx:elif 和 wx:else 来添加一个 else 块
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性
<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>
注意： <block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

注意：如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

注意：bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡

事件的捕获阶段
<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
  outer view
  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
    inner view
  </view>
</view>
在下面的代码中，点击 inner view 会先后调用handleTap2、handleTap4、handleTap3、handleTap1

<view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2">
  outer view
  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
    inner view
  </view>
</view>
只触发handleTap2

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>
Page({
  bindViewTap:function(event){
    event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法
    event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写
  }
})
也就是
data-alpha-beta 转为 dataset.alphaBeta
data-alphaBeta 转为 dataset.alphabeta

引入模板
在 item.wxml 中定义了一个叫item的template：
<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

在 index.wxml 中引用了 item.wxml，就可以使用item模板：
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

@import导入外联样式表
/** common.wxss **/
.small-p {
  padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

include
include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置，如：

<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>

<!-- header.wxml -->
<view> header </view>

<!-- footer.wxml -->
<view> footer </view>

0403 
一元运算符
var a = 10, b = 20;
~a //-11
!a //false
a << 3 //80 10转为二进制然后向左移3位再转为十进制 即为80
a^3 //9 10转为二进制 3转为二进制

0000 0000 0000 1010
0000 0000 0000 0011

^ 异或 同1为0 同0为0 不同为1（相同为0 不同为1）
| 或 同1为1 同0为0 不同为1
& 与 同1为1 同0为0 不同为0

a && b //20
a || b //10
首先js 会将 && 和 || 两边的值转成Boolean 类型，然后再进行逻辑关系运算 。
&&运算如果返回true，则取后面的值，如果 || 返回true,则取前面的值。

typeof num = typeof(num)
stringify(object): 将 object 对象转换为 JSON 字符串，并返回该字符串。
parse(string): 将 JSON 字符串转化成对象，并返回该对象。

兼容方式 - 接口
对于新增的 API，可以用以下代码来判断是否支持用户的手机。

if (wx.openBluetoothAdapter) {
  wx.openBluetoothAdapter()
} else {
  // 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
  wx.showModal({
    title: '提示',
    content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
  })
}

0404 
容器
swiper 类似轮播

movable-area 缩放区域
注意：movable-area 必须设置width和height属性，不设置默认为10px
例如
movable-area {
  height: 400rpx;
  width: 400rpx;
  margin: 50rpx;
  background-color: #ccc;
  overflow: hidden;
}

movable-view
direction 移动方向 all、vertical（纵向）、horizontal（横向）、none
scale
scale-value 缩放倍数，取值范围为 0.5 - 10，默认值1

movable-view {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100rpx;
  width: 100rpx;
  background: #1AAD19;
  color: #fff;
}

<movable-area>
    <movable-view x="{{x}}" y="{{y}}" direction="all" bindchange="onChange" bindscale="onScale" scale scale-min="0.5" scale-max="4" scale-value="{{scale}}">text</movable-view>
</movable-area>
注意：movable-view必须在<movable-area/>组件中，并且必须是直接子节点，否则不能移动。

Page({
  data: {
    x: 0,
    y: 0
  },
  onChange: function(e) {
    console.log(e.detail)
  },
  onScale: function(e) {
    console.log(e.detail)
  }
})
e.detail //数据 例如{x: 72, y: 39, source: "touch"}

cover-view 覆盖在原生组件之上的文本视图 只可嵌套在原生组件map、video、canvas、camera内
cover-image 覆盖在原生组件之上的图片视图 
例如
<cover-view class="play" bindtap="play">
  <cover-image class="img" src="/path/to/icon_play" />
</cover-view>

icon
type:
success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size 单位px 默认值23
color icon的颜色，同css的color
例如 
<view class="group">
    <icon type="success" size="40" color="#f0f0f0"/>
</view>

progress 进度条
<progress percent="80" active color="pink" stroke-width="12" show-info/>

button
hover-class 按钮按下去的样式类
loading 默认值false 名称前是否带 loading 图标
disabled 默认值false 
type:
primary(背景色绿色) default（灰色） warn（红色）
plain 默认值false 按钮是否镂空，背景色透明
size: 
default mini
open-type:
contact 进入客服会话
formType:
submit
reset
用于 <form/> 组件，点击分别会触发 <form/> 组件的 submit/reset 事件

例如
<button type="warn" size="default" loading="{{false}}" plain="{{false}}" open-type="contact">进入客服会话</button>

form
//index.wxml
<form bindsubmit="formSubmit" bindreset="formReset">
  <view>
    <view>switch</view>
    <switch name="switch"/>
  </view>
  <view>
    <view>slider</view>
    <slider name="slider" show-value ></slider>
  </view>

  <view>
    <view >input</view>
    <input name="input" placeholder="please input here" />
  </view>
  <view>
    <view>radio</view>
    <radio-group name="radio-group">
      <label><radio value="radio1"/>radio1</label>
      <label><radio value="radio2"/>radio2</label>
    </radio-group>
  </view>
  <view>
    <view>checkbox</view>
    <checkbox-group name="checkbox">
      <label><checkbox value="checkbox1"/>checkbox1</label>
      <label><checkbox value="checkbox2"/>checkbox2</label>
    </checkbox-group>
  </view>
  <view>
    <button formType="submit">Submit</button>
    <button formType="reset">Reset</button>
  </view>
</form>

//index.js
Page({
  formSubmit: function (e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value)
  },
  formReset: function () {
    console.log('form发生了reset事件')
  }
})

注意：form表单里的标签 需要加name 否则不提交该标签value 如 <slider name="slider"></slider>

input
type
text    文本输入键盘
number    数字输入键盘
idcard    身份证输入键盘
digit    带小数点的数字键盘
focus 获取焦点
maxlength 默认值140 最大输入长度，设置为 -1 的时候不限制最大长度
placeholder-style 指定 placeholder 的样式
password 是否是密码类型

例如
<input class="weui-input" focus password placeholder-style="color:#F76260" maxlength="10" placeholder="最大输入长度为10"/>

Bug & Tip
bug : 微信版本 6.3.30, focus 属性设置无效；
bug : 微信版本 6.3.30, placeholder 在聚焦时出现重影问题；
tip : input 组件是一个 native 组件，字体是系统字体，所以无法设置 font-family；
tip : 在 input 聚焦期间，避免使用 css 动画；

0408
picker 从底部弹起的滚动选择器
mode:
selector
multiSelector
time
date
region  例如：  
<picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
    <view class="picker">
      当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}
    </view>
</picker>
Page({
    data:{
        region: ['广东省', '广州市', '海珠区'] //默认值
    },
    bindRegionChange: function (e) {
        console.log('picker发送选择改变，携带值为', e.detail.value)
        this.setData({
            region: e.detail.value
        })
    }
})

radio-group 单项选择器 <radio-group></radio-group>
radio 单选项目,放在radio-group标签里面 <radio/>
例如：
<radio-group class="radio-group" bindchange="radioChange">
  <label class="radio" wx:for="{{items}}">
    <radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
  </label>
</radio-group>

slider 滑动选择器 <slider/>
show-value 是否显示当前 value
例如：
<view class="section section_gap">
  <text class="section__title">设置最小/最大值</text>
  <view class="body-view">
    <slider bindchange="sliderChange" min="50" max="200" show-value/>
  </view>
</view>

navigator 页面链接 <navigator></navigator>
open-type:
navigate 默认值，跳转到新页面
redirect 在当前页打开
例如：
<view>
    <navigator url="../redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>
</view>

image
mode 具体看文档 如：
aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来
center 不缩放图片，只显示图片的中间区域
例如：
<view class="section__ctn">
    <image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="aspectFit" src="../resources/cat.jpg"></image>
</view>

video
enable-danmu 开启弹幕按钮
danmu-btn 有弹幕按钮
例如：
//index.wxml
<video src="{{src}}" id="myvideo" enable-danmu danmu-btn binderror="videoErrorCallback" danmu-list="{{danmuList}}"></video>
<view class="weui-cell__bd">
  <input bindblur="bindInputBlur" class="weui-input" type="text" placeholder="在此处输入弹幕内容" />
</view>
<view class="btn-area">
  <button bindtap="bindSendDanmu" class="page-body-button" type="primary" formType="submit">发送弹幕</button>
  <button bindtap="bindPlay" class="page-body-button" type="primary">播放</button>
  <button bindtap="bindPause" class="page-body-button" type="primary">暂停</button>
</view>

获得随机颜色的方法
//index.js
function getRandomColor() {
    const rgb = []
    for (let i = 0; i < 3; ++i) {
        let color = Math.floor(Math.random() * 256).toString(16)
        color = color.length == 1 ? '0' + color : color
        rgb.push(color)
    }
    return '#' + rgb.join('')
}
Page({
    ready:function(){
        this.videoContext = wx.createVideoContext('myvideo')
    },
    src:xxx,
    danmuList:
    [{    
        text: '第 1s 出现的弹幕',
        color: '#ff0000',
        time: 1
    },
    {
        text: '第 3s 出现的弹幕',
        color: '#ff00ff',
        time: 3
    }],
    bindInputBlur:function(e){
        this.inputValue = e.detail.value
    },
    bindSendDanmu: function () {
        this.videoContext.sendDanmu({
            text: this.inputValue,
            color: getRandomColor()
        })
    },
    bindPlay: function () {
        this.videoContext.play()
    },
    bindPause: function () {
        this.videoContext.pause()
    },
    videoErrorCallback: function (e) {
        console.log('视频错误信息:')
        console.log(e.detail.errMsg)
    }
})

0409
open-data
type:
userAvatarUrl 用户头像
userNickName 用户昵称
例如：
<open-data type="userAvatarUrl"></open-data>