微信小程序 - 一些基础

为了方便查找和复习，粗略列出一些可能常用到的 标签、标签的属性、标签属性的值、方法、API。具体的还要以官方文档为主

一些标签

下面表示默认值时在 () 里面，表示 Boolean 值时使用 √和 ×

• view 视图容器

• text 文本域

• button 按钮

  • type：按钮类型
    • primary（绿色）
    • default（白色）
    • warn（红色）
  • size：按钮大小，（ default 和 mini ）

• image 图片

  • mode：图片裁剪、缩放的模式（scaleToFill）
  • 默认宽度：300px，高度：240px

• form 表单

  • bindsubmit：携带 form 中的数据提交

• checkbox 复选框

• radio 单选框

• input 输入框…这里是单标签，并且标签内部要加入 / 作为结尾

  • type 的合法值
    • text：文本输入键盘（默认）
    • number：数字输入键盘
    • idcard：身份证输入键盘
    • digit：带小数点的数字键盘
  • password：是否是密码类型（×）
  • placeholder-style：指定这个东西的样式（placeholder-class，指定样式类）
  • bindblur：失去焦点时触发

• progress 进度条

• swiper 轮播图，子标签swiper-item

  • indicator-dots：是否显示面板知识点 （×）
  • indicator-color：指示点颜色 （rgba(0,0,0,.3)）
  • indicator-active-color：知识点选中颜色 （#000000）
  • autoplay：自动播放 （×）
  • current：当前滑块所处的 index（0）
  • current-item-id：当前滑块所在的 item-id，不能同时指向 current（String 类型）
    • 配合 <swiper-item> 使用，<swiper current-item-id="b"> <swiper-item item-id="b">
  • interval：自动切换时间间隔(ms)，（5000）
  • duration：滑块动画时长(ms)，（500）
  • circular：是否采用衔接滑动（×）
  • vertical：滑动的方向是否为纵向（×）
  • bindchange：current 改变时触发的 change 事件

• include 代码引用

  • src：引用的 wxml位置

• slider 表单组件，滑动选取某一个值

  • backgroundColor：背景条颜色（ activeColor：已选择的颜色）
  • max、min：最大最小值
  • step：步长，取值大于 0 且可被 max‘min 整除

• video视频播放

  • src：你懂得 ^ ^V^
  • loop：是否自动播放（×）
  • controls：是否默认显示播放控件（√）
  • enab-danmu：是否展示弹幕（×）
  • danmu-list：弹幕列表
  • danmu-btn：是否显示弹幕
  • autoplay：自动播放（×）
  • poster：视频封面的网络地址，controls 为（×）的时候设置无效
  • bindplay / bindpause：触发事件

• map 地图相关

  • latitude：维度、longitude：经度（Number）
  • scale：缩放级别，范围是 5~18（16）（Number）
  • marker：标记点、poline：路线、circles：圆（Array）
  • show-location：显示带有当先的当前定位点
  • bindmarktap：单击标记点时触发，返回 maker 或 id （EventHandle，以下也是）
  • bindregionchange：视野发生改变的时侯
  • bindtap：单击地图、bindupdate：地图渲染更新完成

• picker 从底部弹起滚动选择器

  • header-text：选择器标题（仅安卓可用）
  • mode：选择器类型
    • selector、multiSelector、time、date、region（省份）
  • bindcancel：取消选择时触发（eventHandle）
  • disable：禁用（false）

• picker-view 嵌入的滚动选择器

• scroll-view 实现可滚动视图区域

  • scroll-x / scroll-y 允许横向/纵向滚动（×）
    • 纵向滚动需要在样式中为 scroll-view 设置一个固定高度，否则它会被子元素撑大
  • scroll-top/scroll-left 设置竖向/横向滚动条的位置（number / string）
  • bindscroll 滚动时触发的事件

一些 API

• 音频 API

  • 创建一个 InnerAudioContext 实例

  • var audioCtx = wx.createInnerAudioContext() ，audioCtx 是一个实例，也就是一个对象，里面有许多属性和方法

    • 属性：

      • src(嘿嘿嘿)、starttime(开始时间)、autoplay(自动播放)、volume(音量)
      • duration(音频长度，当前合法 src 的长度)、currentTime(当前时间)、paused(当前是暂停或是停止状态)

    • 方法：

      • play()、pause()、stop()、seek()、destroy()：销毁当前实例

      • 以下触发的时候，参数都是 callback

      • onCanplay(音频进入可播放状态时的事件)

      • onPlay()、onPause()、onStop、onSeek()、onError()、onEnd()：自然播放到结束、onTimeUpdate()：播放进度更新

• 背景音乐 API

  • 创建一个 BackgroundAudioManager 实例对象
  • var bgm = getBackgroundAudioManager()
  • 在 app.json 中添加配置："requireBackgroundModes": ["audio"]

• 打电话

• wx.makePhoneCall( { phoneNumber: '1311111111' } )

• 获取位置

  • wx.getLocation() 方法获取用户当前的位置
  • wx.openLocation() 方法显示该位置的地图

• 视频 API (VideoContext)

  • wx.createVideoContext() 的一些常用方法
    • play()/pause()/stop()，播放/暂停/停止
    • seek(number)：跳转到指定位置
    • playbackRate(number)：播放倍速
    • requestFullScreen() / exitFullScreen()：全屏/退出全屏
    • sendDanmu：发送弹幕

一些事件监听

• bindtap

  • 表示绑定 tap 事件，点击触发

  • 通过实践对象 e 可以获取

    • type ：事件类型
    • timestamp ：事件生成时的时间戳
    • target ：触发事件的组件的一些属性值集合
    • currentTarget ：当前组件的一些属性值集合
    • detail ：额外的信息

  • catch 事件是可以阻止事件冒泡的，bind 事件不行

• this.setDate( { } ) ,该方法的参数是一个对象

• bindchange 当 value 值改变的时候触发

一些配置

• “plugins” 中添加第三方插件

• “window” 中配置页面的整体标题栏样式

• “tabBar” 配置底部的菜单

  • 最多可以配置 5 个选项

• “requiredBackgroundModes”: [“audio”] 请求背景音乐

• “usingComponents” 用在页面的配置文件中，表示使用组件

一些单位

• vw 和 vh，分别表示页面的百分之百宽和百分之百高

• rpx，常用的单位，750rpx 正好是页面宽度的大小

一些插件

• 腾讯视频插件

  • 小程序管理后台，设置 - 第三方服务 - 添加插件

  • 在全局 app.json 中：

    "plugins": {
    	"tencentvideo": {
    		"version": "当前版本",
    		"provider": "插件里面的AppID"
    	}
    }

  • 在使用插件的具体文件中，如：video.json

    "usingComponents": {
    	"txv-video": "plugin://tencentvideo/video"
    }

    • txv-video 名字随便起，将用到 wxml 页面,和 js 中

  • 在 xxx.wxml 中：

    <txv-video vid="xxxmmm" playerid="txv1"></txv-video>

    • vid ：在腾讯视频指定视频的 url 后面，如果不行，点分享，在分享链接中也可以找到
    • playerid：指定当前标签，是一个特殊标记，可以随便起一个有特色的的

  • 在相对应的 xxx.js 中：首先要使用 requirePlugin() 引入插件，然后调用 getTxvContext()

    onReady: function(){
        const TxvContext = requirePlugin('tencentVideo')
        var txvContext = TxvContext.getTxvContext('txv1')
        txv.Context.play()
        txv.Context.pause()
    }

一些细节

• 通过dataset区分元素（input）
  • 可以使用 data-id 取代掉 id，例如：data-id=“num”，在绑定的事件中通过 e.target.dataset.id就可以获得
  • 而且，通过e.target.dataset.名称就可以获得 data-名称 的值

一些注意

• first-child 和 last-child 相对的是使用元素的本身

  <div> <view>我是①</view> <view>我是②</view> </div>

  • 如果要选中 div 里面的 view ，写的应该是 div view:first-child

• 使用 import 调用外部样式：import “ 路径 “

WXS

• 大名 WeiXin Script，和 js 差不多，是小程序的脚本语言，可以在 wxml 中插入

  <wxs module="haha">
    module.exports = function(value){ var x =xxx var m = mmm }
  </wxs>

  • 属性 module 表示模块名称，导出后，可以在标签中使用

    <view> {{ haha(xm) }} </view>

---