初识微信小程序
文章目录
- 2.初识微信小程序
- 微信小程序：
- 3.创建小程序 注册小程序账户 小程序工具功能介绍 以及小程序的目录结构分析
- 4.小程序MINA框架介绍 wxml wxss pages逻辑层js 介绍 绑定数据、绑定属性、条件判断、循环渲染数据
- MINA框架介绍
- 微信小程序与H5的不同之处：
- 5.微信小程序事件、方法、事件对象、方法传值、获取data数据、修改data数据、冒泡非冒泡事件
- 6.微信小程序app.json配置视图样式、配置底部tab切换、页面跳转配置页面里面的.json文件
- 页面跳转：
- 7.微信小程序小小练习 小程序页面跳转传值、请求Api接口获取服务器数据【无人点餐系统菜品页面制作】
- 8.微信小程序小小练习 解决图片显示问题、页面跳转、以及通过api接口获取详情页面数据 【无人点餐系统菜品详情页面制作】
- 9.小程序wxParse插件 解析html数据 【解析无人点餐系统菜品详情页面html】
- wxParse插件——解析HTML数据
- 10.微信小程序中的模块化utils 以及全局app.js 配置无人点餐项目公共的api地址【配置无人点餐项目公共api】
- 11.微信小程序中的WXS 脚本语言的使用
- 12.微信小程序中的自定义组件 注册组件
- view image text button
- 自定义组件
- 13.微信小程序中的自定义组件 父子组件 组件事件 父子组件传值
- 14.微信小程序中的自定义组件 slot 子组件调用父组件的方法、父组件调用子组件的方法
- 父组件给子组件传值
- 父组件调用子组件的方法
- 子组件执行父组件里面的方法
- 组件模板
- 15.微信小程序自定义toast组件代码讲解
- 16.小程序view 结合scroll-view结合真实新闻客户端api实现上拉分页加载更多
- 17.小程序view 结合scroll-view结合真实新闻客户端api实现上拉分页加载更多 重复请求 没有数据不请求
- 18.微信小程序 导入小程序代码、导入代码片段 、官方组件介绍以及实现swiper组件
- 19.微信小程序 video cover-view cover-image 组件的使用
- cover-view
- cover-image:看文档
- 20.微信小程序基础内容组件 icon 、text 、rich-text、progress
- 21.微信小程序表单组件 button checkbox form input label radio slider switch textarea 获取表单数据
- 1.input
- 2.checkbox
- 3.radio
- 4.switch
- 5.form
- 22.微信小程序表单组件 picker picker-view 实现日期 区域 联动选择
- 1.普通选择器：
- 2.时间选择器
- 3.日期选择器
- 4.省市区选择器
- 5.多列选择器：mode = multiSelector最复杂
- 23.微信小程序媒体组件 images显示图片以及实现多图预览功能
- 24.微信小程序媒体组件camera、audio、video、live-player、live-pusher
- 1.camera组件：
- 2.audio组件：
- 3.video
- 25.open-data web-view 以及 canvas、map简单介绍
- open-data
- web-view
- 26.用微信小程序 请求数据、拍照、上传图片 api实现图片上传功能
- 27.用微信小程序 下载文件 保存文件 打开文件
- 28.微信小程序中类似localStorage的数据缓存Api
- 29.微信小程序获取位置、查看位置、选择位置、系统信息、网络状态、加速度计（摇一摇功能）、罗盘 API
- 30.拨打电话、扫码、剪贴板、屏幕亮度、用户截屏事件、振动、手机联系人 API
2.初识微信小程序
官网：https://mp.weixin.qq.com/cgi-bin/wx
我的APP ID: 网站注册后可以知道
微信小程序：
小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。
微信公众号和小程序的主要区别？
1、定位不同（公众号服务于营销与信息传递，小程序面向产品与服务）
2、实现技术区别 （公众号基于H5（html5 vue angualr react ionic），小程序必须用小程序的语法开发）
3、用户体验 （小程序的用户体验要比 html5好一些，更接近原生app）
4、调用原生的能力 （微信公众号可以借助jssdk调用手机的摄像头拍照 ，调用扫描二维码等 能力有限。 小程序调用原生的能力非常强大，能实现几乎app能实现的所有功能） （调用原生的功能 *可以不开发app ）
5、微信app上面的入口不一样
微信小程序的应用场景：
互联网+ 物联网+ 人工智能+
餐厅点餐+小程序
基于LBS小程序直接搜索附近的餐厅，进店用进行扫码点餐、支付。
无人点餐：
公交+小程序
公交车站放一个小程序二维码，扫一扫就知道公交什么时候来。
买电影票+小程序
进入小程序直接搜附近电影院下单搞定。
加油站缴费+小程序
加油下车排队缴费太麻烦，扫小程序不用下车就能解决。
火车上叫餐+小程序
不用去固定车厢点餐，扫座椅后背的小程序二维码下单，乘务员给你送来。
旅行+小程序
旅行酒店预订、周边攻略、目的地、游记等都可以在小程序里轻松搞定。
快递+小程序
一键打开快递小程序，查看自己的订单，查看快递送达的时间，查看宝贝现在的物流情况
医疗+小程序
用小程序，提前挂号、网上排队，就医后扫码支付，直接拿药
景区+小程序
扫描景点门票小程序的二维码，即可查看景区详情
零售+小程序
想吃个水果或吃点零食，直接搜索附近小程序下单，送货上门。
小程序开发文档、开发工具、开发指南、体验demo：
开发文档
https://developers.weixin.qq.com/miniprogram/dev/
开发工具
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
体验demo
https://developers.weixin.qq.com/miniprogram/dev/demo.html?t=1477656485442
3.创建小程序 注册小程序账户 小程序工具功能介绍 以及小程序的目录结构分析
目录结构：
-
pages-所有页面
首页index 业务逻辑.js wxml–html wxss-css
登录脚本 多了一个配置文件json -
utils
工具js 模块化的东西 -
App.js
全局的js文件 其他地方调用App 只需要用 const app=getApp(); 获取应用实例 -
App.json
全局的配置文件 整个页面 导航条的颜色 底部菜单切换 -
app.wxss
全局css文件 -
project
项目配置文件 一般不改动
视图——wxml wxss
业务逻辑——js
4.小程序MINA框架介绍 wxml wxss pages逻辑层js 介绍 绑定数据、绑定属性、条件判断、循环渲染数据
MINA框架介绍
- MINA(MINA IS NOT APP) 是在微信中开发小程序的框架。
- MINA的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生APP体验的服务。
- MINA提供了自己的视图层描述语言WXML和WXSS，以及基于JavaScript的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，可以让开发者可以方便的聚焦于数据与逻辑上。
- MINA的核心是一个响应的数据绑定系统。
- 整个系统分为两块视图层(View)和逻辑层(App Service)
- MINA可以让数据与视图保持同步非常简单。当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新
- MINA是腾讯给微信小程序命名的框架，其实他实际上应用的是目前IT界最被推崇的MVVM模式。
微信小程序与H5的不同之处：
view=div
text=span
没有ul li
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
数据绑定与Vue差不多
有判断条件
绑定属性
放上去看一下
循环数据——简单数组
{{index}}-----{{item}}
循环数据——数组里面有对象
{{index}}-----{{item.title}}
嵌套循环
使用 wx:for-item 可以指定数组当前元素的变量名，
使用 wx:for-index 可以指定数组当前下标的变量名：
{{item.cate}}
-------{{item.title}}
{{item.cate}}
-------{{car.title}}
5.微信小程序事件、方法、事件对象、方法传值、获取data数据、修改data数据、冒泡非冒泡事件
不可以使用alert方法
自定义方法与data同级
没有br换行
执行方法的几种写法：
1.在生命周期函数里面调用方法
this.run（）
2.
注意触发方法不需要写（）
3.获取data的数据
console.log(this.data.msg);
4.改变data的数据
his.setData({
msg:'我是改变后的msg'
})
MVVM:是Model-View-ViewModel的简写,将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。
事件对象:原生js相似 鼠标按下的当前DOM节点和一切的相关信息
获取自定义属性的值
doEventFn(e){
console.log(e);
console.log(e.currentTarget.dataset.aid);
}
小程序里面执行方法传值——在view视图层执行方法传值
不能直接传值 需要靠event 事件对象
requestViewData(event){
console.log(event.currentTarget.dataset);
}
冒泡与非冒泡事件
事件分类
事件分为冒泡事件和非冒泡事件：
冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。 bindtap
非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。 catchtap
6.微信小程序app.json配置视图样式、配置底部tab切换、页面跳转配置页面里面的.json文件
app.json的配置和使用：
1.pages配置路由、windows显示效果、底部tab切换
导航条只支持黑色和白色
1、小程序里面的资源不能大于2M
2、底部tab切换菜单最少2个最多5个
"tabBar": {
"color":"#666",
"selectedColor":"#f60",
"backgroundColor":"#eee",
"borderStyle":"white",
"position":"bottom",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath":"static/images/home1.png",
"selectedIconPath":"static/images/home.png"
},
{
"pagePath": "pages/news/news",
"text": "新闻",
"iconPath":"static/images/news1.png",
"selectedIconPath":"static/images/news.png"
},
{
"pagePath": "pages/user/user",
"text": "用户",
"iconPath": "static/images/user1.png",
"selectedIconPath": "static/images/user.png"
}
]
}
页面跳转：
从一个页面跳转到另一个页面
goShop(){
wx.navigateTo({
url: '../shop/shop'
})
}
7.微信小程序小小练习 小程序页面跳转传值、请求Api接口获取服务器数据【无人点餐系统菜品页面制作】
页面跳转传值：
goFoodContent(event){
console.log(event.currentTarget.dataset.aid);
var aid = event.currentTarget.dataset.aid;
wx.navigateTo({
url: '../foodcontent/foodcontent?aid='+aid
})
}
跳转到的页面来监听上个页面传过来的值
onLoad: function (options) {
//获取上一个页面的传值
console.log(options);
}
请求数据：
wx.request
WX样式的字体有另一种单位——移动端一般喜欢用rem
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
一般移动端设计：宽度自适应，高度按照设计稿的一半
获取数据在嵌套循环
requestData(){
var that = this;
wx.request({
url: 'http://a.itying.com/api/productlist', // 仅为示例，并非真实的接口地址
data: {
},
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
console.log(res.data);
//用this需要注意this箭头指向
that.setData({
list:res.data.result
})
}
})
}
列表：http://a.itying.com/api/productlist
详情：http://a.itying.com/api/productcontent?id=5ac1a22011f48140d0002955
8.微信小程序小小练习 解决图片显示问题、页面跳转、以及通过api接口获取详情页面数据 【无人点餐系统菜品详情页面制作】
网络图片获取显示：
网络图片地址：\这个斜杠不可以解析
1.服务器数据返回时就将斜杠改为/
2.客户端解决
requestData(){
var that = this;
wx.request({
url: 'http://a.itying.com/api/productlist', // 仅为示例，并非真实的接口地址
data: {
},
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
console.log(res.data);
//替换 \ /
var arr = res.data.result;
for(var i = 0; i < arr.length; i++){
for (var j = 0; j < arr[i].list.length; j++){
arr[i].list[j].img_url = arr[i].list[j].img_url.replace(/\\/g,'/');-----用了正则表达式
}
}
//用this需要注意this箭头指向
that.setData({
list:arr
})
}
})
}
地址改为本地地址：
host:'http://a.itying.com/'
列表：http://a.itying.com/api/productlist
详情：http://a.itying.com/api/productcontent?id=5ac1a22011f48140d0002955
9.小程序wxParse插件 解析html数据 【解析无人点餐系统菜品详情页面html】
web-view远程页面在服务器端 但是有局限性
wxParse插件——解析HTML数据
1、找到demo
https://github.com/icindy/wxParse
2、下载这个demo
3、把demo里面的wxParse目录 拷贝到我们的项目里面
4、在我们要用到的页面的js里面引入 wxParse下面的js
var WxParse = require('../../wxParse/wxParse.js');
数据绑定
var article = '我是HTML代码';
//article是需要渲染的html代码
/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/
var that = this;
WxParse.wxParse('article', 'html', article, that, 5);
5、可以在app.wxss引入 wxParse.wxss
@import "wxParse/wxParse.wxss";
6、模板 wxml引入下面代码
10.微信小程序中的模块化utils 以及全局app.js 配置无人点餐项目公共的api地址【配置无人点餐项目公共api】
公共模块封装一下：
模块化-----utils
可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块里面的属性和方法默认是私有的，
模块只有通过 module.exports 或者 exports 才能对外暴露接口。
在需要使用这些模块的文件中，使用 require(path) 将公共代码引入
var config={
host: 'http://a.itying.com/',
getHost(){
return this.host;
}
}
module.export=config;
在需要使用的页面引用：
var config=require('../../utils/config.js');
将请求数据的api合并一下,可以统一管理
app.js-----小程序逻辑
App() 函数用来注册一个小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。
全局函数
//获取应用实例
const app = getApp()
//获取方法
//调用app.js全局方法
app.getAppMsg();
11.微信小程序中的WXS 脚本语言的使用
WXS–公共的业务逻辑
WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构
把公共的功能抽离成一个单独的WXS, 可以在模板中使用WXS暴露的数据和方法
WXML需要调用自定义的方法，可以放在wxs文件中
注意
- wxs 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
- wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致。
- wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API。
- wxs 函数不能作为组件的事件回调。
- 由于运行环境的差异，在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。
utils里面的语法跟JS语法一致
变量名不能是关键字保留字
使用看文档：
数据类型有点区别
格式化日期的功能：
时间戳—对应日期
wxml文件中写
{{utils.formatDate(d)}}
wxs文件中写
var formatDate = function (oTime) {
//传入时间戳 转换成 2019/1/14
var d = date = getDate(parseFloat(oTime));
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()
var hour = date.getHours()
var minute = date.getMinutes()
var second = date.getSeconds()
return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
console.log(d);
}
var formatNumber = function (n) {
n = n.toString()
return n[1] ? n : '0' + n
}
module.exports = {
formatDate: formatDate
};
12.微信小程序中的自定义组件 注册组件
微信小程序不可以使用html标签进行布局 要使用小程序提供的内置标签
view image text button
用法：
1.可以把公共的功能封装起来 方便其他地方使用
2.可以扩展html–wxml构建应用的不足–标签的不足
自定义组件
1.新建components文件夹
2、在components文件夹下面创建一个组件文件夹，然后点击右键创建组件（components）、
组件也是由四个文件组成—.js .json .wxml .wxss
3、注册组件：–在哪个页面用 就在哪个页面的json中注册
{
"navigationBarTitleText":"新闻页面",
"usingComponents": {
"br": "../../components/br/br" ,
"header": "../../components/header/header"
}
}
注意路径
1.扩展标签—自定义空行标签
2.扩展标签—自定义头部标签
13.微信小程序中的自定义组件 父子组件 组件事件 父子组件传值
父子组件传值：
父组件传给子组件！！！
1.父组件调用子组件的时候给自组件绑定属性
2、在子组件的properties 里面接收父组件传过来的数据
properties: {
myProperty: { // 属性名
type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
value: '', // 属性初始值（可选），如果未指定则会根据类型选择一个
observer: function(newVal, oldVal){} // 属性被改变时执行的函数（可选），也可以写成在methods段中定义的方法名字符串, 如：'_propertyChange'
},
myProperty2: String // 简化的定义方式
}
components子组件触发事件：
是一样的
14.微信小程序中的自定义组件 slot 子组件调用父组件的方法、父组件调用子组件的方法
只有component的方法才在methods里面写，pages的方法函数与data同级
父组件给子组件传值
- 父组件调用子组件的时候给自组件绑定属性
- 在子组件的properties 里面接收父组件传过来的数据
properties: {
myProperty: { // 属性名
type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
value: '', // 属性初始值（可选），如果未指定则会根据类型选择一个
observer: function(newVal, oldVal){} // 属性被改变时执行的函数（可选），也可以写成在methods段中定义的方法名字符串, 如：'_propertyChange'
},
myProperty2: String // 简化的定义方式
}
父组件调用子组件的方法
- 调用子组件的时候定义一个id
- 父组件获取子组件的实例
var header = this.selectComponent("#header")
3、header.方法名 调用子组件里面的方法
header.data.msg父组件里面直接获取子组件的数据
子组件执行父组件里面的方法
- 子组件里面执行父组件的方法
this.triggerEvent('myevent', 数据, 参数） - 父组件绑定方法
真正的方法函数是run myevent是用来标识那个是父子组件
run(e)可以得到父组件的一些数据
组件模板
组件模板的写法与页面模板相同。组件模板与组件数据结合后生成的节点树，将被插入到组件的引用位置上。
在组件模板中可以提供一个
15.微信小程序自定义toast组件代码讲解
16.小程序view 结合scroll-view结合真实新闻客户端api实现上拉分页加载更多
scrollview实现上拉分页加载更多
{{item.title}}
必须设置高度 不然拉到最底部不可以触发方法
得到浏览器高度----wx.getSystemInfo({
success(res) {
console.log(res.model)
console.log(res.pixelRatio)
console.log(res.windowWidth)
console.log(res.windowHeight)
console.log(res.language)
console.log(res.version)
console.log(res.platform)
}
})
//获取屏幕高度
wx.getSystemInfo({
success(res) {
that.setData({
windowHeight: res.windowHeight
})
console.log(res.windowHeight);
}
})
requestData(){
var that=this;
var api = 'http://www.phonegap100.com/appapi.php';
wx.request({
url: api, // 仅为示例，并非真实的接口地址
data: {
a: 'getPortalList',
catid: '20',
page:this.data.page
},
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
//console.log(res.data);
var list = that.data.list.concat(res.data.result);----新旧数据拼接
var page = ++that.data.page;
that.setData({
list:res.data.result,
page:page
})
}
})
}
存在的问题：
1.加载重复页面
2.没数据还是会触发请求
列表
http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1
详情
http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=123
17.小程序view 结合scroll-view结合真实新闻客户端api实现上拉分页加载更多 重复请求 没有数据不请求
1.重复触发页面的解决方法：
多一个判断选择
flag:true
requestData(){
先改变
this.setData({
flag:false
})
}
再改变为true
this.setData({
flag:true
})
}
loadMore(){
if(this.data.flag){
this.requestData();
}
}
2.没有数据就结束请求
根据返回数据的长度来决定
18.微信小程序 导入小程序代码、导入代码片段 、官方组件介绍以及实现swiper组件
小程序内置组件
导入官方的代码块–官方文档–代码片段—小程序demo—在开发者工具中预览效果–有相应程序代码—知道修改
19.微信小程序 video cover-view cover-image 组件的使用
cover-view
覆盖在原生组件之上的文本视图，可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher，只支持嵌套cover-view、cover-image，可在cover-view中使用button。
摩拜单车：上面是地图，下面是扫码
视频播放：自定义播放器的条和按钮 视频标签放一个cover-view覆盖物组件，对覆盖物布局
小程序调用视屏和地图都是调用原生组件
改变视频播放的播放条
JS语言演示：
video的id需要对应起来才能识别
按钮方法–注意myVideo是ID
onReady() {
this.videoCtx = wx.createVideoContext('myVideo')
},
play() {
this.videoCtx.play()
},
pause() {
this.videoCtx.pause()
}
播放
暂停
根据自己的喜好改变样式
.video_box{
position:relative;
}
#myVideo{
width:100%;
}
.controls{
height:80rpx;
line-height: 80rpx;
position:absolute;
bottom:0px;
background: rgba(0,0,0,0.5);
width:100%;
color:#fff;
text-align:center;
display: flex;
}
.controls view{
width:200rpx;
}
cover-image:看文档
20.微信小程序基础内容组件 icon 、text 、rich-text、progress
基础内容组件：
icon 图标
icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
text
相当于span标签
selectable Boolean false 文本是否可选
有时候没效果？？
相当于 span标签 解析为空格
空格输入：半角改成全角下的英文输入法空格 或者css实现空格
rich-text
传入类型：Array / String
解析简单的文本内容是可以的，但是如果是图片的话就不太好用----用WXparse
progress
进度条。
属性：percent show-info stroke-width activeColor backgroundColor
21.微信小程序表单组件 button checkbox form input label radio slider switch textarea 获取表单数据
表单组件：
多了picker
通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。还可以自定义选择器
picker-view、switch
1.input
type:属性决定弹出的键盘的类型
password:属性决定是否是密码符号
focus:获取焦点–输入键盘自动弹起
confirm-type设置键盘右下角按钮的文字（send-发送，done-完成），仅在type='text’时生效
adjust-position 键盘弹起时，是否自动上推页面
bindinput 键盘输入时触发，event.detail = {value, cursor, keyCode}，keyCode 为键值，2.1.0 起支持，处理函数可以直接 return 一个字符串，将替换输入框的内容。
可以获取表单输入的值
2.checkbox
多选项目。
checkbox-group 多项选择器，内部由多个checkbox组成。
bindchange中选中项发生改变时触发 change 事件，detail = {value:[选中的checkbox的value的数组]}
任何项目改变都会触发bindchange里面的方法。。value放在一个数组
3.radio
单选项目
radio-group
单项选择器，内部由多个
bindchange 中的选中项发生变化时触发 change 事件，event.detail = {value: 选中项radio的value}
4.switch
开关选择器。
5.form
bindsubmit 携带 form 中的数据触发 submit 事件，event.detail = {value : {‘name’: ‘value’} , formId: ‘’}
注意要起名字
doPost(e){
//获取form表单提交的数据 注意表单需要定义名称
console.log(e.detail.value);
}
小程序用form获取各个表单的数据
1.整个表单用form包含起来
2.各个表单有唯一的独特名字来标识
3.按钮来提交数据、清空数据
4.form绑定提交表单的方法
22.微信小程序表单组件 picker picker-view 实现日期 区域 联动选择
picker
三级联动选择器
1.普通选择器：
当前选择：{{array[index]}}
range:数组或者对象
value:表示选择了 range 中的第几个（下标从 0 开始）
array:从哪个数组开始选择
index:数组的索引
改变触发方法
bindPickerChange(e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
index: e.detail.value
})
}
2.时间选择器
当前选择: {{time}}
value：表示选中的时间，格式为"hh:mm"
bindTimeChange(e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
time: e.detail.value
})
}
3.日期选择器
当前选择: {{date}}
value：表示选中的日期，格式为"YYYY-MM-DD"
bindDateChange(e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
date: e.detail.value
})
}
4.省市区选择器
当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}
value：数组 表示选中的省市区，默认选中每一列的第一个值
custom-item：字符串 可为每一列的顶部添加一个自定义的项—customItem: ‘全部’（每一列最上面）
bindRegionChange(e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
region: e.detail.value
})
}
5.多列选择器：mode = multiSelector最复杂
两级—
三级
当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
value-----multiIndex
value 每一项的值表示选择了 range 对应项中的第几个（下标从 0 开始）初始值：[0,0,0]
range-----multiArray
二维数组，长度表示多少列，数组的每项表示每列的数据，如[[“a”,“b”], [“c”,“d”]]
bindchange-----value 改变时触发 change 事件，event.detail = {value: value}
bindcolumnchange-----某一列的值改变时触发 columnchange 事件，event.detail = {column: column, value: value}，column 的值表示改变了第几列（下标从0开始），value 的值表示变更值的下标
每一选项有自己子母关系
bindMultiPickerChange(e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
multiIndex: e.detail.value
})
}
bindMultiPickerColumnChange(e) {
console.log('修改的列为', e.detail.column, '，值为', e.detail.value)----先获取改变的列以及最后修改的值
const data = {
multiArray: this.data.multiArray,
multiIndex: this.data.multiIndex
}
data.multiIndex[e.detail.column] = e.detail.value-----改变multiIndex[0,0,0]
//判断第几列
//获取第一列选中的值 e.detail.value进行判断给下一列的值
用switch case来选择
//改变data里面的值
console.log(data.multiIndex)
this.setData(data)
23.微信小程序媒体组件 images显示图片以及实现多图预览功能
image组件：
1.图片地址 本地地址 src=’…/…/images/0.jpg’ src=’/images/1.jpg两者都可以
2.图片缩放解析
mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式
3.图片左右滑动预览----借助API
API-媒体-图片-wx.previewImage(Object object)
在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。
24.微信小程序媒体组件camera、audio、video、live-player、live-pusher
1.camera组件：
自定义拍照页面–区域、样式自己弄（很贵1~2万人工费）
从图库选择、拍照都有现有的API
wx.chooseImage(Object object)
从本地相册选择图片或使用相机拍照。
wx.chooseVideo(Object object)
拍摄视频或从手机相册中选视频。
需要用户授权 scope.camera
属性：
device-position 前置或后置，值为front, back
flash 闪光灯，值为auto, on, off
拍照的组件：
wx.createCameraContext
创建 camera 上下文 CameraContext 对象。CameraContext.takePhoto(Object object) 拍摄照片
直接看组件的源码：
返回的都是地址
播放流视频
live-player：播放视频—实时音视频播放。该组件是原生组件，使用时请注意相关限制。
live-pusher: 直播—实时音视频录制。该组件是原生组件，使用时请注意相关限制。
需要用户授权 scope.camera、scope.record
2.audio组件：
action="{{audioAction}}" 默认暂停
audioAction: {
method: 'pause'
}
集成好的
audioPlayed: function (e) {
console.log('audio is played')
},
audioTimeUpdated: function (e) {
this.duration = e.detail.duration;
},
播放
playAudio: function () {
this.setData({
audioAction: {
method: 'play'
}
});
},
暂停
pauseAudio: function () {
this.setData({
audioAction: {
method: 'pause'
}
});
}
进度—只有播放的时候才有用
bindtimeupdate
当播放进度改变时触发 timeupdate 事件，detail = {currentTime, duration}
//获取音频播放的总时间
audioTimeUpdated: function (e) {
this.duration = e.detail.duration; //获取音频的播放时间 单位：S秒
},
timeSliderChanged: function (e) {
if (!this.duration)
return;
var time = this.duration * e.detail.value / 100; //播放的时间 总时间*进度的百分比
this.setData({
audioAction: {
method: 'setCurrentTime',
data: time //改变音频的播放时间
}
});
},
播放速率---可能没用
playbackRateSliderChanged: function (e) {
this.setData({
audioAction: {
method: 'setPlaybackRate',
data: e.detail.value-----改变音频的播放速率
}
})
},
3.video
发送弹幕的功能
danmu-list 弹幕列表
可以设置出现的文字、颜色、时间
danmuList:
[{
text: '第 1s 出现的弹幕',
color: '#ff0000',
time: 1
},
{
text: '第 3s 出现的弹幕',
color: '#ff00ff',
time: 3
}]
},
enable-danmu 是否展示弹幕，只在初始化时有效，不能动态变更
danmu-btn 是否显示弹幕按钮，只在初始化时有效，不能动态变更
弹幕内容：
bindblur="bindInputBlur"
bindInputBlur: function(e) {
this.inputValue = e.detail.value
},
发送弹幕：
bindtap="bindSendDanmu" formType="submit"
bindSendDanmu: function () {
this.videoContext.sendDanmu({
text: this.inputValue,
color: getRandomColor()
})
},
随机生成颜色：
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('')
}
25.open-data web-view 以及 canvas、map简单介绍
open-data
用于展示微信开放的数据。
可以获取用户信息
userNickName 用户昵称
userCity 用户所在城市
userProvince 用户所在省份
userCountry 用户所在国家
userLanguage 用户的语言
web-view
web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。
就是小程序的浏览器
如果出不来页面 check一下是否是因为没有填写AppID
26.用微信小程序 请求数据、拍照、上传图片 api实现图片上传功能
未完成的功能组件：map canvas 导航——navigator（相当于href标签）
api:小程序里面用H5的东西来调用手机原生的功能
H5不具备上传、下载文件的功能，没法直接扫描、支付，调用手机的文件
小程序通过api接口提供了，H5的知识来使用
拍照：
wx.chooseImage(Object object)
从本地相册选择图片或使用相机拍照。
上传图片：
wx.uploadFile(Object object)
将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求，其中 content-type 为 multipart/form-data。
27.用微信小程序 下载文件 保存文件 打开文件
下载文件：wx.downloadFile
文件操作api——wx.openDocument(Object object)
新开页面打开文档
音频视频的对应接口来打开文件
临时文件转换为永久文件：wx.saveFile——保存文件
wx.getSavedFileList——得到本地保存文件的列表
wx.removeSavedFile——删除保存的文件（一个一个的删除，异步，写一个递归循环删除）
28.微信小程序中类似localStorage的数据缓存Api
H5的本地缓存——localStorage，小程序里面无法使用（作用：实现多个页面之间的数据共享）
1、缓存用户信息
2、实现页面传值
3、猜你喜欢
4、搜索历史记录
数据缓存——wx.setStorage（异步存储）——异步是非阻塞的，必须在里面获取数据
wx.getStorage(异步获取)
wx.setStorageSync(同步存储数据)
29.微信小程序获取位置、查看位置、选择位置、系统信息、网络状态、加速度计（摇一摇功能）、罗盘 API
wx.getLocation——获取当前的地理位置、速度。当用户离开小程序后，此接口无法调用，type属性注意
wx.openLocation——使用微信内置地图查看位置
wx.chooseLocation——打开地图选择位置。选择当前位置，获取经纬度，同城发布商品需要选择当前位置
wx.chooseLocation({
success:function(res){
console.log(res);
}
})
wx.getSystemInfo——获取系统信息（上拉分页加载更多使用过scroll-view）
wx.getNetworkType——获取网络类型（播放视频，选择是3g/4g网络，提示是否需要在流量状态下播放 ）
wx.onAccelerometerChange——监听加速度数据事件。频率根据 wx.startAccelerometer() 的 interval 参数。可使用 wx.stopAccelerometer() 停止监听。（实现摇一摇的功能，手机支持重力感力功能）
方法里面的数据每隔5秒获取一次
1、获取加速度保存
2、获取新的加速度
3、和第一次的加速度比较
4、把第一次的加速度的值当做当前值
5、重复2-4步的操作
wx.onCompassChange——监听罗盘数据变化事件。频率：5 次/秒，接口调用后会自动开始监听，可使用 wx.stopCompass 停止监听。（指南针 手机支持罗盘功能）
30.拨打电话、扫码、剪贴板、屏幕亮度、用户截屏事件、振动、手机联系人 API
wx.makePhoneCall——拨打电话
html5 web页面拨打电话——
wx.scanCode——调起客户端扫码界面进行扫码
wx.setClipboardData——设置系统剪贴板的内容
wx.setScreenBrightness——设置屏幕亮度
wx.onUserCaptureScreen——监听用户主动截屏事件。用户使用系统截屏按键截屏时触发
wx.vibrateLong——使手机发生较长时间的振动（400 ms)
wx.addPhoneContact——添加手机通讯录联系人。用户可以选择将该表单以「新增联系人」或「添加到已有联系人」的方式，写入手机系统通讯录
本微信小程序基础知识是看大地老师视频学习的！！！