博客

微信小程序 快速(学习/参考)

小程序与公众号的区别

1.定位不同：公众号定位服务与信息传递，小程序面向产品与服务。

2.技术实现区别：公众号基于H5(vue/react/angular/ionin等)，小程序基于自身开发环境与开发语言(某些第三方框架也能将vue打包成小程序环境)。

3.用户体验不同(小程序用户体验要比HTML5好,更接近原生app)

4.调用原生能力的不同(公众号可借助jssdk调用手机的摄像头,调用扫描二维码等,能力有限.小程序调用原生的能力强大,几乎能实现所有app能实现的功能)(调用原生的能力强,可不开发app.)

5.微信app入口不同

MINA框架介绍

MINA is not app 是微信开发小程序的框架，其目的是通过尽可能简单、高效的方式让开发者在微信中体验到接近原生的服务。

MINA提供自己的视图层描述语言xwml和wxss，以及基于javascript的逻辑层框架。并在视图层和逻辑层之间提供数据传输和事件系统，可让开发者方便聚焦于数据与逻辑上。

MINA的核心是一个相应数据绑定系统

系统分为视图层和逻辑层

MINA可让数据与视图保持同步非常简单。当做数据修改的时候，只需修改逻辑层数据，视图层就会相应更新

MINA是腾讯给微信小程序命名的框架，其实际上应用的是最推宠的MVVN模式

创建typescript项目

typescript本身就是编译成js的，所以在微信小程序同时生成js与ts文件，手动点击编译就会把ts编译成js文件

新建一页面

根目录app.json文件

{
	"pages":[
		"pages/news/news", 在此写上新页面路径保存，编辑器会自动创建文件
		"pages/index/index"
	]
}

微信的标签

无ul li，成对出现

view

<view> </view> 相当于div

text

<text> <text> 相当于span

button

<button size="mini" bindtap="go"></button> size设置按钮大小，给按钮绑定点击事件，执行方法时不加()

数据绑定

for遍历

<view wx:for="{{list}}">{{index}}---{{item}} <view> 微信默认每个遍历的数据赋值给item，
索引赋值给index
-------------
嵌套循环
<view wx:for="{{list}}">
	{{item.cart}}
	<view wx:for="{{item.reg}}">
		{{item}}
	<view>
<view>
list:[
	{cart:"cart1",reg:["v1","v2"]},
	{cart:"cart2",reg:["g1","g2"]}
]
-------------
自定义循环赋值的名字
<view wx:for="{{list}}" wx:for-index="i" wx:for-item="m">
	{{i}} --{{m}}
<view>
注意 i 与 m 不加 {{}}

if隐藏

<view wx:if="{{flag}}"></view>

绑定属性

<view data-aid="{{user}}"></view> 微信绑定属性不需要加:或是[]

绑定单选按钮

<checkbox checked="{{false}}"></checkbox>

双向绑定

data:{
	user:123
}
go(){
	var go=this.data.user
	go++;
	this.setData({
		user:go
	})
}

获取元素html

<button bindtap="gethtml" data-id="456">获取按钮HTML<button>

gethtml(e){ e为该事件
	e.target.dataset.id  获得元素自定义属性的值
}

微信小程序样式/属性绑定，元素隐藏

隐藏元素类似angular

<view hidden="{{yes}}"></view>
page({
	data:{
		yes:true
	}
})

class绑定

<view class="test {{isavtive ? 'active':''}}"></view>
page({
	data:{
		isavtive:true
	}
})

样式绑定

<view style="display:{{isdis}}"></view>
page({
	data:{
		isdis:"none" block/flex
	}
})

for循环与自定义属性搭配无法获取值

<view bindtap="go" wx:for="{{list}}" wx:key="index" data-id="123"></view>
page({
	data:{
	list:[...]
	},
	go(e){
		e.target 与for在同一元素内data-id无效
	}
})

非冒泡事件

<view bindtap="go1"> 点击1触发1
	<view catchtap="go2"> 点击2，触发2
		<view bindtap="go3"> 点击3，触发3,2 2为阻止冒泡事件，所以3被阻止
		</view>
	</view>
</view>

touch冒泡的解决办法

微信小程序的touch事件

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#%E4%BA%8B%E4%BB%B6%E8%AF%A6%E8%A7%A3

使用catchtouch只能阻止向上冒泡，不能阻止子元素的冒泡

根据冒泡触发的元素有规律可寻

<view class='message'  capture-catch:touchstart="clear" data-id="1">
    <view class='nav' catchtap="go" data-id="2">
      <button wx:for="{{nav}}" wx:key="index">{{item.title}}</button>
    </view>
</view>
此时滑动元素message，会向下冒泡触发元素nav，
clear(e){
	var id=e.target.dataset.id   滑动message、nav都会触发clear，但可根据他们的属性判断，触发来自哪个元素
	if(id=="1"){
		父元素
	}else if(id=="2"){
		子元素
	}
}

Tabbar底部导航栏

导航栏最少两个，最多五个，写到根目录app.json

{
	"tarBar":{
		"custom":true,
		"color":"#fff", 按钮的字体颜色
		"selectedColor":"#000", 点击后的字体颜色
		"backgroundColor":"#eee", 整个底部导航栏的背景颜色
		"borderStyle":"black/white", 底部导航框上边框颜色，仅支持白色和黑色
		"position":"top/bottom" top跑到最上边
		"list":[{
			"pagePath":"路由路径",
			"text":"首页",
			"iconPath":"图片路径",
			"selectedIconPath":"被点击后的图片路径"
			},
			{
				"pagePath":"路由路径",
				"text":"我的",
				"iconPath":"图片路径", 当position为top时，
				"selectedIconPath":"被点击后的图片路径"
				}
		],
		suingComponents:{}
	}
}

组件跳转+配置当前页面标题

<button bildtap="show">跳转</button>
show(){
	wx.navigateTo({
		url:"../login/login"
	})
}

组件的json文件中配置当前页面标题

{
	"navigationBarTitleText":"当前组件标题名称",
	"navigationBarBackgroundColor": "#000000",
	"navigationBarTextStyle": "white"
}

跳转传值

<view wx:for="{{list}}">
	<button size="mini" bindtap="goparams" data-id="{{index}}">跳转传参</button>
</view>
goparams(e){ 因为函数不能加括号传值所以用自定义属性传值
	var id=e.target.dataset.id
	wx.navigateTo({
		url:"../login/login?id="+id
	})
}
---------login组件---------
获取页面传过来的值
onLoad:function(options){
	console.log(options) 打印结果 {id:xxx}
}

微信发送请求

wx.request({
	url:"http://",
	data:{ 参数不一定都写成对象
		user:"",
		pass:""
	},
	method:"get/post", 默认get
	header:{
		"content-type":"application/json" 这是微信默认的请求头
	}，
	success:(res)=>{
		console.log(res.data)
	}
})

微信wxss自定义的字体、图片单位

在app项目中，一般以rem为单位

在微信中，可用rpx为单位，微信小程序会根据设备尺寸自动换算分辨率

说明

iphone 6 的屏幕分辨率为 750*1334 物理分辨率为 375 * 667
一般图片分辨率设置成750px

微信小程序的图片路径问题

若图片带有http://127.0.0.1:5050/list/user\go=123 若路径带有\字符会被微信反编译成其他字符，导致图片路径不能被识别

改变服务器端的路径或客户端修改

使用客户端修改的方法

var row=res.data.list
for(var r of row){
	r.url=r.url.replace(/\\/g,"/") 截取字符并替换
	//replace("\\","/") 若存在多个满足条件的字符，也只能执行一次 "gh\gh\ghg\"有多个\执行到第一个就会停止 \\多加一\是反转义字符，计算机里\是特殊符号，一般不被当做字符，使用\将其转义为字符  正则表达式的g表示全局，会匹配字符下所有\
}

路径里边的变量拼接

url="http://127.0.0.1:5050/"
urls="nav/1.jpg"
<image src="{{url}}{{urls}}"></image> 相当于url+urls

微信小程序swiper轮播组件

主要属性

示例

<swiper class='u-wrp-bnr' indicator-dots='true' autoplay='true' interval='5000' duration='1000' circular='true'>
  <block wx:for="{{bnrUrl}}" wx:for-index="index">
    <swiper-item>
      <image src='{{item.url}}' class='u-img-slide' mode='aspectFill'></image>
    </swiper-item>
  </block>
</swiper>
----------js-----
Page({
  data: {
    "bnrUrl": [{
      "url": "img/1242x366-1531449084.jpg"
    }, {
      "url": "img/1242x366_djj_0706-1530871651.jpg"
    }, {
      "url": "img/1242x366_lyx_0709-1531122892.jpg"
    }, {
      "url": "img/14540040236323_1_o.jpg"
    }]
  }
});
autoplay/interval等也可绑定变量后台操作

微信上拉加载刷新

使用微信内置方法

全局app.json文件
{
	"enablePullDownRefresh":true, 开启全局的下拉刷新事件，若上拉刷新则不用
	"onReachBottomDistance":50  页面上拉触底事件触发时距离页面底部的距离 50为默认值，单位px
}
组件
page({
	onReachBottom(){
		
	}
})

使用scroll-view标签

scroll-view必须得给定高度，不然没法实现滚动

scroll-view属性详情

scroll-view事件

实例，解决重复请求，this指向问题,数据到底关闭问题

调用系统信息官方文档

https://developers.weixin.qq.com/miniprogram/dev/api/base/system/system-info/wx.getSystemInfo.html

-------------wxml-------------
<scroll-view style="height:{{height}}px" scroll-y bindscrolltolower="getdata">
	...
	...
	...
</scroll-view>
-------------js-------------
page({
	data:{
		height:"400",
		info:true,
		list:[]
	}
	onLoad(options){
		wx.getSystemInfo({ 调用系统信息
			success:(res)=>{
				this.setData(
					height:res.windowHeight  获取设备高度
				)
			}
		})
	},
	quest(){
		this.setData({
			info:false
		})
		var that=this 解决下边function的指代问题，
		wx.request({
			url:"...",
			succedd:function(res){
				if(res.data.length<10){
					var fl=false
				}else{
					var fl=true
				}
				var list=that.data.list
				list=list.concat(res.data)
				that.setData({
					list:list,
					info:fl 防止网络慢出现重复请求
				})
		})
	},
	getdata(e){
		if(this.datainfo){
			this.quest()
		}
	}
})

微信小程序解析HTML代码

将普通的HTML代码片段解析为微信小程序标签

使用web-view标签

是一个可用于承载页面的容器，会自动补满小程序页面

但web-view不支持个人类型和海外类型的小程序

<web-view src="https://.."></web-view>

使用wxParse

github搜索wxParse 选择icindy/wxParse下载即可

将wxParse项目目录下的wxParse文件拷贝到自己项目根目录

引入主要文件

var wxparse=require("../../wxParse/wxParse.js")
在要使用的wxss中引入  也可在app.wxss
@import "/wxParse/wxParse.wxss"

数据绑定

var article="<div>HTML片段</div>"
var that=this
wxParse.wxParse("article","html",article,that,5)
对应顺序解释为
bindname绑定的数据名
type输入的数据类型，html或md
target指page对象，一般为this
imagepadding 若当前片段为图片，设置图片的左右内边距值，默认为0

前台渲染

<import src="...../wxParse/wxParse.wxml"/> 在要使用的wxml中引入
<view>
	<template is="wxParse" data="{{wxParse.wxParseData:article.nodes}}"/>
</view>   wxParseData中的article是bindname

util模块化的使用

把一些公共的代码单独抽至一个单独的js文件中，作为一个模块，必须通过module.export或exports 暴露才能被外只用

自定义模块

在根目录util文件夹中新建一个js文件,在该文件中

var myapp={
	host:"http://127.0.0.1:5050", 封装公共域名
	getdata(){
		return this.host
	}
}
module.exports=myapp  将本文件暴露

引入模块

var config=require("../../util/*.js")
console.log(config)

app.js全局数据

根目录app.js文件中

app({
	globalData:{
		user:"nice"
	},
	getdata(){
			return "kcone"
		}
})

要调用数据的组件

var app=getApp() 获取实例
app.getdata()  打印 kcone
app.globalData.user 打印 nice  globalData与自定义的方法都是一样的地位，不局限于此

微信wxs脚本语言的使用

wxs是微信小程序的一套脚本语言，结合wxml可构建出页面的结构

wxs中不可调用其他js文件的方法，不可调用微信小程序api

wxs不可作为组件的事件回调

不可用()=>{} 不可用 const 声明时间new Date() 变成 getDate()

类似于js，但wxs有自己的一套方法，方法名字可能不同，具体请参考

https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/

创建 在微信开发者工具右键创建选择wxs即可

mywxs.wxs
var user="kcone"
var getdata=function(e){
	return e
}
module.exports={
	user:user,
	getdata:getdata
}
module.export.msg="what is you name"

wxml文件

<view> {{sky.msg}}</view> 这样是会报错的，还没导入就使用
<wxs src="./mywxs.wxs" module="sky"></wxs> 将引入的数据传给sky
<view> {{sky.getdata(sky.user)}}</view> bindtap点击事件函数不能加括号在此可行
<view>{{sky.msg}}</view> 

自定义组件

组件可将公共的功能封装起来，方便其他地方使用

可扩展HTML应用的不足

创建一个组件

微信开发工具在选定的目录下右键选择component即可，此方式只创建四个对应组件(wxml/wxss/json/js)文件，不创建文件夹。

组件的js中为component 与vue类似

br.js
component({
	data:{
		... 组件数据
	},
	methods:{
		... 存放方法
	},
	properties:{
		... 存放属性
	}
})
br.wxml
<view class="br"></view>
br.wxss
.br{
	height:200rpx;
}
br.json  ...

在需要用到组件的json文件下声明要引用的组件

---------**.json-------
{
	"usingComponents":{
		"br":"组件的路径",  name为组件定义的名字
		"search":"../search/search" 可引入多个组件
	}
}
----------**.wxml---------
<br/> 即可引用 
<br></br> 也可使用双标签

组件传值

父组件传值

父组件
<header title="{{user}}" type="{{list}}" value="{{value}}" fun="{{func}}"></header> 给子组件绑定一个属性
子组件js
component({
	data:{
		user:"kcone",
		num:0
	},
	properties:{
		title:string, 简化定义
		/*title:{  详细的定义法
			type:string,  数据类型/string/number...
			value:"设置数据默认值",
			observer:()=>{} 处理逻辑
			type/value/observer都是内置属性，不可自行更改
		}*/
	}，
	methods:{ component数据操作和page一样
		add:(){
			var num=this.data.num
			num:num+1
			this.setData({
				num:num
			})
			var user=this.data.user
			return user
		}
	}
})

父组件调用子组件方法

调用子组件时定义id

--------子组件js-----------
component({
	data:{
		list:[...]
	},
	methods:{
		add(){}
	}
})
--------父组件wxml--------
<header id="header"><header>
---------父组件js---------
var header=this.selectComponent("#header")
header.add()
header.data.list 调用子组件数据

子组件调用父组件方法

---------父组件wxml-----------
<header bind:futher="myfuther"></header>  :可加,可不加
---------父组件js-----------
page({
	data(){},
	myfuther(){
		return "kcone"
	}
})
---------子组件js--------------
component({
	properties:{},
	methods:{
		go(){
			this.triggerEvent("futher","传入的参数",set) 如有嵌套关注set
			
		}
	}
})

子组件调用父组件set内容(可能不重要)

slot的使用

在组价wxml提供一个slot节点，用于承载组件引用时提供的子节点

component.wxml

------子组件header-----
<view>****组件页面</view>
</slot></slot>

page.wxml

<header>
	<button>父组件按钮<button> 父组件引用子组件，并向其筛入一个按钮
</header>

自定义Toast组件

子组件wxml

<view class='futher' hidden="{{info}}">
  <view class='son'>{{message}}</view>
</view>

子组件wxss

.futher{
  position:fixed;top:0; bottom:0;left:0;right:0;表示元素水平垂直居中
flex元素内容水平垂直居中
}
.son{
  text-align:center;line-height:120%;
  padding:34rpx 50rpx; 子元素靠内边距撑起 字体背景颜色等省略
  max-width:70%;min-width:35%; 有最大最小宽}

子组件js

Component({
  data: {
    info:true,
    message:""
  },
  methods: {
    gets(e){
        this.setData({
          info:false,
          message:e
        })
        setTimeout(() => {
          this.setData({
            info: true
          })
        }, 1000)}}})

父组件

<toast id="mytoast"></toast>
<button bindtap='text' size='mini'>toast弹窗</button>
 text(e?:any){
    var toast:any=this.selectComponent("#mytoast")
    toast.gets("hello")
  },

微信交互(提示窗口/确认窗/加载窗/底部弹窗)

wx.showToast

wx.showToast({
	title:"文字显示内容",
	icon:"none/success/loading", 无图标/打钩/加载圆
	duration:1000,
	image:"图片路径", 自定义图标的路径，优先级高于icon
	mask:false, 是否显示遮罩层，默认false
	success:()=>{},
	fail:(e)=>{e.errMsg},
	complete:()=>{}
})
/*setTimeout(()=>{
	wx.hideToast() 也可使用hideToast使其关闭
},1000)*/

wx.showModal() 确认窗口

wwx.showModal({
	title:"标题内容",
	content:"提示内容",
	showCancel:true, 是否显示曲线按钮，默认false
	cancelText:"", 取消按钮文字内容，最多4字符
	cancelColor:"#fff", 取消按钮颜色
	confirmText:"", 确定按钮文本内容，最多4字符
	confirmColor:"#fff", 确定按钮颜色
	success:(res)=>{
	res.confirm  true为用户确定，false为用户取消，confirm与cancel相反
	res.cancel
	}
})

wx.showLoading 加载窗口

wx.showLoading({
	title:"标题", 
	mask:false, 是否显示遮罩层
	success:()=>{},
	fail:(e)=>{e.errMsg}，
	complate:()=>{} //无论成功失败都加在
})
setTimeout(()=>{
	wx.hideLoading() 需手动关闭
},1000)

wx.showActionSheet() 底部显示窗口

wx.showActionSheet({
	itemList:["a","b","c"],
	itemColor:"",
	success:(e)=>{
		e.tapIndex 用户点击按钮返回的索引 
	},
})
只要点击按钮就会自动关闭

微信小程序内置组件

swiper 轮播组件

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

属性

事件

实例

<swiper indicator-dots="true" autoplay="true" interval="3000" duraction="800" circular="true">
	<block wx:for="{{list}} wx:key="index">
		<swiper-item>
			<image src="{{item.src}}"></image>
		<swiper-item>
		<swiper-item>
			<image src="{{item.src}}"></image>
		<swiper-item>
	</block>
</swiper>

video 视频媒体标签

https://developers.weixin.qq.com/miniprogram/dev/component/video.html

<video src="http://" controls="true" event-model="buble" id="myvideo"></video>
controls 是否使用微信自带播放控件
page({
	var myvideo=wx.createVideoContent("#myvideo") 获取视频元素
	myvideo.play() 播放视频
	myvideo.pause() 停止播放
})

cover-view

是覆盖在原生组件上的文本视图，可覆盖的原生组件包括map/video/canvas/camera等，有些类似position的z-index，cover-view是覆盖在视图之上的

实例自定义视频播放控件

<video src="..."> 
	<cover-view> 要覆盖到视频视图之上，得在video标签内
		<cover-image></cover-image> 支持嵌套cover-view/cover-image/button
		<button><button>
		<cover-view></cover-view>
	</cover-view>
</video>

微信基础内容

icon 图标

实例

演示图 https://res.wx.qq.com/wxdoc/dist/assets/img/icon.d50f3532.png

<icon type="success" size="22" color="#fff"></icon>

text 文本标签

<text selectable="false" space="false" decode="false" ></text>
selectable 文本是否可选 默认false
space 是否显示连续空格 string类型 默认false
decode 是否解码 默认false

rich-text

将html标签解析为微信标签

<rich-text nodes="{{nodes}}"></rich-text>
page({
	data:{
		nodes:{ 值可为数组，也可为字符串 "<div><span></span><div>"
		[{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
      },
      children: [{
        type: 'text',
        text: 'Hello&nbsp;World!'
      }]
    }]
		}
	}
})

progress 进度条

实例

<progress percent="30" color="#fff" show-info bindactiveend="{{end}}"/>
bindactiveend 进度加载完成后触发事件

表单组件

input

https://developers.weixin.qq.com/miniprogram/dev/component/input.html

属性

类型列括号内为默认值

事件

button

属性

微信开发能力

open-type=“值”

事件

checkbox checkbox-group 多选按钮

checkbox属性

实例

<checkbox-group bindchange="change"> 多项选择器，内部由多个checked组成
	<label wx:for="{{list}}"> 用for绑定对应标签id也可嵌套该标签里边，内部有多个标签的时候默认触发第一个，可绑定的控件有button/checkbox/radio/switch
		<checkbox value="{{item.name}}" chacked="{{item.checked}}">{{item.title}}</checkbox>
	</label>
</checkbox-group>
page({
	data:{
		list:[{name:"1",checked:false,title:"男"},				   {name:"2",checked:false,title:"女"},
		{name:"3",checked:false,title:"保密"}
		]
	},
	change(e){ 
		e.detail.value 返回当前被选定的数组,["1","2"]
	}
})

radio 单选按钮

属性与checkbox一致

实例

<radio-group bindchange="change"> 同chackbox-group
	<label wx:for="{{list}}" wx:key="index">
		<radio value="{{item.name}}" checked="{{item.check}}"></radio>
	</label>
</radio-group>
page({
	data:{
		list:[{name:"1",checked:false,title:"男"}...]
	}
	change(e){e.detail.value}
})

switch 开关

属性

实例

<view>
	<switch bindchange="channge"></switch>
</view>
change(e){
	e.detail.value 当前按钮的点击状态
}

form

所有表单标签的父标签,微信可用form,但vue/angular不推荐用form表单,提交表单会有默认的刷新事件,微信无需阻止

实例

<fomr bindsubmit="submit" bindreset="reset">
	<input name="user"></input>  注意表单组件要定义name名称,提交要用
	<checkbox-group name="check">
		<checkbox></checkbox>...
	</checkbox-group>
	<button form-type="submit">提交</button>
	<button form-type="reset">重置</button>
</form>
submit(e){
	e.detail.value 获取全部表单的值
}
reset(){} 表单重置事件

picker

从底部弹起的标签选择器,有时间,日期,地区等

https://developers.weixin.qq.com/miniprogram/dev/component/picker.html

属性

普通选择器

实例

<picker mode="selector" range="{{list}}" value="{{ids}}" bindcolumnchange="change">
  <view>触发</view> 必须放置子标签使其点击才能触发选择器
  <view>你选择的是{{list[ids]}}</view>
</picker>
page({
	data:{list:["北京","上海","广州","天津","重庆"],ids:0},
	change(e){
		e.detail.value 
	}
})

多项选择器

<picker mode="multiSelector" range={{list}} value="{{index}}" bindcange="change" bindcolumnchange="column">
	<view>选择省份</view>
</picker>
page({
	data:{
		list:[["广东","广西","山东"],["广州","深圳","汕头"]], 多线选择器数据必须以数组套数组的方式存在，数组里数据的个数与对应下标的个数一致
		index:[0,0]
	},
	change(e){ value改变时触发
		e.detail.value value改变时触发change
	},
	column(e){ 列改变时触发
		var raw=e.detail.column 代表列
		var col=e.detail.value 代表列下对应的行，可看做表格的列与行间的布局
		var obj={
			list:this.data.list,
			index:this.data.index
		}
		if(raw==0){
			if(col==0){
				obj.list[1]=["广州","深圳","汕头"]
			}else if(col==1){
				obj.list[1]=["南宁","北海","博白"]
			}else if(col==2){
				obj.list=["太原","石家庄","青岛"]
			}
		}
		this.setData(obj)
	}
})

媒体组件

image

图片缩放请参考

https://developers.weixin.qq.com/miniprogram/dev/component/image.html

图片预览

点击图片后进入一个背景内，可在该背景中左右滑动浏览多张图片

<image src="..." bindtap="zoom"></image>
zoom(){
	wx.perviewImage({
		current:"可能为绝对路径", 当前显示图片的路径
		url:["http","http"] 需预览图片的http连接列表
	})
}

camera

可自定义拍照页面，默认是会调用系统自带拍照组件

https://developers.weixin.qq.com/miniprogram/dev/component/camera.html

属性

实例

<camera device-position="back" flash="off" binderror="error" style="width:100%;height:600rpx;">
</camera>
<button size="mini" bindtap="take">拍照</button>
<button size="mini" bindtap="startrec">开始录制</button>
<button size="mini" bindtap="stoprec">停止录制</button>
<image wx:if="images" src="{{images}}"></image>
<video wx:if="{{videos}}" src="{{videos}}"></video>
data:{images:"",videos:""},
ctx:null,
take(){
	 this.ctx=wx.createCameraContext()
	this.ctx.takePhoto({
		quality:"high",
		success:(res)=>{
			this.setData({images:res.tempImagePath})
		}
	})
},
startrec(){
	this.ctx.startRecord({
	success:(res)=>{
		console.log("已开始录制")
	}
	})
},
stoprec(res){
	this.ctx.stopRecord({
		success:(res)=>{
			this.setData({images:res.tempThumbPath,videos:res.tempVideoPath})
		}
	})
},
error(e){
	e.detail
}

audio 音频控件

https://developers.weixin.qq.com/miniprogram/dev/component/audio.html

属性

实例

<audio src='http://127.0.0.1:5050/chat/text.mp3' id="aud"></audio>
<button bindtap="audstart">开始播放</button><button bindtap="audstop">暂停播放</button>
page({
	data:{},
	onLoad(){
		this.ctx=wx.createAudioContext("aud")
	},
	ctx:null,
	audstart(){
		this.ctx.play()
	},
	audstop(){
		this.ctx.pause()
	}
})

live-player 流视频

通俗讲就是视频直播，微信平台的；流视频需要审核

https://developers.weixin.qq.com/miniprogram/dev/component/live-player.html

open-data

展示开放数据,可获取用户的数据,如城市/性别/头像等

有时无法获得数据可能是由于用户未填写对应信息

https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html

属性

type的合法值

实例

<open-data type="groupName" open-gid="xxxxxx"></open-data> 还不知如何使用
<open-data type="userAvatarUrl"></open-data>
<open-data type="userGender" lang="zh_CN"></open-data>

web-view

<web-view src="http://"></web-view> 会把远程的页面放到微信程序里边运行