微信小程序的特点
-
与web相比,入口不同
-
主要都是基于传统的前端技术,以JavaScript语言为主
-
与APP相比,学习门槛和开发成本低
-
不需要下载和安装
-
相比H5,小程序受限微信运营规范,不像H5页面那么灵活,但它可以做一些H5做不了的事,比如订阅,直接转发消息给好友等
小程序的开发能力
依托于微信的宿主环境,除了常用的UI组件及网络API之外,在设备能力上,凡微信有的能力,例如振动,监听网络状态,罗盘,小程序都有,此外,在运营上开发的能力有一下8点比较值得关注的:
-
小程序和公众号可重名
-
小程序开放群相关能力
-
小程序“附近小程序”功能
-
小程序“星标”功能
-
小程序可关联500个公众号
-
可以直接打开网页
-
小程序灰度更新和线上版本回退功能
-
小程序客服能力配置
开发小程序的一般流程
-
注册
-
小程序信息完善
-
开发小程序
-
提交审核和发布
组件的定义及属性:
组件是页面视图层(WXML)的基本组成单位,组件组合可以构成功能强大的页面结构。小程序框架为开发者提供了容器视图、基础内容、表单、导航、多媒体、地图、画布、开放能力等8类(30多个)基础组件。
每一个组件都由一对标签组成,有开始标签和结束标签,内容放置在开始标签和结束标签之间,内容也可以是组件。组件的语法格式如下:<标签名 属性名="属性值">内容</标签名>
组件通过属性来进一步细化。不同的组件可以有不同的属性,但他们也有一些共用属性,如id、class、style、hidden、data-*、bind*/catch*等
id:组件的唯一标识,保持整个页面唯一,不常用
class:组件的样式类,对应wxss中定义的样式
style:组件的内联样式,可以动态设置内联样式
hidden:组件是否显示,所有组件默认显示
data-*:自定义属性,组件触发事件时,会发送给事件处理函数。事件处理函数可以通过传入参数对象的currentTarget.dataset方式来获取自定义属性的值
bind*/catch*:组件的事件,绑定逻辑层相关事件处理函数
容器组件视图:
容器视图组件是能容纳其他组件的组件,是构建小程序页面布局的基础组件,主要包括view、scroll-view和swiper组件。
view:
view组件是块级组件,没有特殊功能,主要用于布局展示,相当于html中的div,是布局中最基本的用户界面(User Interface UI)组件,通过设置view的css属性可以实现各种复杂的布局。view组件的特有属性如表所示:
通过<view></view>组件实现页面布局示例代码如下:
<!--pages/chapter04/viewDemo/viewDemo.wxml-->
<view style="text-align: center;">默认flex布局</view>
<view style="display: flex;">
<view style="border: 1px solid #f00; flex-grow: 1;">1</view>
<view style="border: 1px solid #f00; flex-grow: 1;">2</view>
<view style="border: 1px solid #f00; flex-grow: 1;">3</view>
</view>
<view style="text-align: center;">上下混合布局</view>
<view style="display: flex;flex-direction: column;">
<view style="border: 1px solid #f00;">1</view>
<view style="display: flex;">
<view style="border: 1px solid #f00;flex-grow: 1;">2</view>
<view style="border: 1px solid #f00;flex-grow: 2;">3</view>
</view>
</view>
<view style="text-align: center;">左右混合布局</view>
<view style="display: flex;">
<view style="border: 1px solid #f00;flex-grow: 1;">1</view>
<view style="display: flex;flex-direction: column;flex-grow: 1;">
<view style="border: 1px solid #f00;flex-grow: 1;">2</view>
<view style="border: 1px solid #f00;flex-grow: 2;">3</view>
</view>
</view>
scroll-view:
通过设置scroll-view组件的相关属性可以实现滚动视图的功能,其属性如表所示:
通过scroll-view组件可以实现下拉刷新和上拉加载等更多,代码如下:
<!--pages/chapter04/scrollViewDemo/scrollViewDemo.wxml-->
<view class="container" style="padding: 0rpx;">
<!--垂直滚动,这里必须设置高度-->
<scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height: {{scrollHeight}}px;" class="list" bind-scrolltolower="bindDownLoad" bindscrolltoupper="topLoad" bindscroll="scroll">
<view class="item" wx:for="{{list}}">
<image class="img" src="{{item.pic_url}}"></image>
<view class="text">
<text class="title">{{item.name}}</text>
<text class="description">{{item.short_description}}</text>
</view>
</view>
</scroll-view>
<view class="body-view">
<loading hidden="{{hidden}}" bindchange="loadingChange">加载中</loading>
</view>
</view>
// pages/chapter04/scrollViewDemo/scrollViewDemo.js
var url = "http://www.imooc.com/course/ajaxlist";
var page = 0;
var page_size = 5;
var sort = "last";
var is_easy = 0;
var lange_id = 0;
var pos_id = 0;
var unlearn = 0;
// 请求数据
var loadMore = function(that){
that.setData({
hidden:false
});
wx.request({
url: 'url',
data:{
page:page,
page_size:page_size,
sort:sort,
is_easy:is_easy,
lange_id:lange_id,
pos_id:pos_id,
unlearn:unlearn
},
success:function(res){
// console.info(that.data.list);
var list = that.data.list;
for(var i = 0; i < res.data.list.length; i++){
list.push(res.data.list[i]);
}
that.setData({list:list});
page++;
that.setData({hidden:true});
}
})
}
Page({
data:{
hidden:true,
list:[],
scrollTop:0,
scrollHeight:0
},
onLoad:function(){
// 这里要注意,微信的scroll-view必须设置高度才能监听滚动事件,所以需要在页面的onLoad事件中为scroll-view的高度赋值
var that = this;
wx.getSystemInfo({
success: (res) => {
that.setData({
scrollHeight:res.windowHeight
});
},
});
loadMore(that);
},
// 页面滑动到底部
bindDownLoad:function(){
var that = this;
loadMore(that);
console.log("lower");
},
scroll:function(event){
// 该方法绑定了页面滚动时的事件,这里记录了当时的position.y的值,为了在请求数据后将页面定位到这里
this.setData({
scrollTop:event.detail.scrollTop
});
},
topLoad:function(event){
// 该方法绑定了页面滑动到顶部的事件,然后做页面上拉刷新
page = 0;
this.setData({
list:[],
scrollTop:0
});
loadMore(this);
console.log("lower")
}
})
/* pages/chapter04/scrollViewDemo/scrollViewDemo.wxss */
.userinfo{
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar{
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.userinfo-nickname{
color:#aaa;
}
.usermotto{
margin-top: 200px;
}
scroll-view{
width: 100%;
}
.item{
width: 90%;
height: 300rpx;
margin: 200rpx auto;
background: brown;
overflow: hidden;
}
.item.img{
width: 430rpx;
margin-right: 20rpx;
float:left;
}
.title{
font-size: 30rpx;
display: block;
margin: 30rpx auto;
}
.description{
font-size: 26rpx;
line-height: 15rpx;
}
swiper:
swiper组件可以实现轮播图、图片预览、滑动页面等效果。一个完成的swiper组件由<swiper/>和<swiper-item/>两个标签组成,它们不能单独使用。<swiper/>中只能放置一个或多个<swiper-item/>,若放置其他组件则会被删除;<swiper-item/>内部可以放置任何组件,默认宽高自动设置为100%。swiper组件的属性如表所示:
<swiper-item/>组件为滑块项组件,尽可以被放置在<swiper/>组件中,宽高尺寸默认按100%显示。
设置swiper组件,可以实现轮播图效果,代码如下:
<!--pages/chapter04/swiperDemo/swiperDemo.wxml-->
<swiper indicator-dots="true" autoplay="true" interval="5000" duration="1000">
<swiper-item>
<image src="../../../images/avatar_01.jpg" style="width:100%;"></image>
</swiper-item>
<swiper-item>
<image src="../../../images/avatar_02.jpg" style="width:100%;"></image>
</swiper-item>
<swiper-item>
<image src="../../../images/avatar_03.jpg" style="width:100%;"></image>
</swiper-item>
</swiper>
基础内容组件:
基础内容组包括icon、text和progress,主要用于在视图页面中展示图标,文本和进度条等信息。
icon:
icon组件即图表组件,通常用于表示一种状态,如success、info、warn、waiting、cancel等。其属性如表所示:
示例代码如下:
// pages/chapter04/iconDemo/iconDemo.js
Page({
data:{
iconType:["success","success_no_circle","info","warn","waiting","cancel","download","search","clear"],
iconSize:[10,20,30,40],
iconColor:["#f00","#0f0","#00f"]
}
})
<!--pages/chapter04/iconDemo/iconDemo.wxml-->
<view>
icon类型:
<block wx:for="{{iconType}}">
<icon type="{{item}}"/>{{item}}
</block>
</view>
<view>
icon大小:
<block wx:for="{{iconSize}}">
<icon type="success" size="{{item}}"/>{{item}}
</block>
</view>
<view>
icon颜色:
<block wx:for="{{iconColor}}">
<icon type="success" size="30" color="{{item}}"/>{{item}}
</block>
</view>
API应用
一.网络API
微信小程序处理的数据通常从后台服务器获取,再将处理过的结果保存到后台服务器,这就要求微信小程序要有与后台进行交互的能力。
网络API可以帮助开发者实现网络URL访问调用、文件的上传和下载、网络套接字的使用等功能处理。
1 发起网络请求
wx.request(0bject)实现向服务器发送请求、获取数据等各种网络交互操作,其相关参数如表所示。
通过 wx.requesl(0bject)获取百度(https:// www,baidu.com)首页的数据。
代码:
Page({
data:{
html:''
},
getbaidutap:function(){
var that=this;
wx.request({
url: 'https://www.baidu.com',//百度网址
data:{},//发送数据为空
header:{"Content-Type":"application/json"},
success:function(res){
console.log(res);
that.setData({
html:res.data
})
}
})
}
})
2 上传文件
wx.uploadFile(Object)接口用于将本地资源上传到开发者服务器,并在客户端发起一个HTTPS POST请求,其相关参数如表所示
代码:
Page({
data:{
img:null,
},
uploadumage:function(){
var that=this;
//选择图片
wx.chooseImage({
success:function(res){
var tempFilePaths=res.tempFilePaths
upload(that.tempFilePaths);
}
})
//显示toast提示消息
function upload(page,path){
wx.showToast({
icon:'loading',
title: '正在上传'
}),
wx.uploadFile({
filePath: path[0],
name: 'file',
url: 'http://localhost/',
success:function(res){
console.log(res);
if(res.statusCode!=200){
wx.showModal({
title:"提示",
content:"上传失败",
showCancel:false
})
return;
}
var data=res.data
//上传成功修改显示头像
page.setData({
img:path[0]
})
},
fail:function(e){
console.log(e);
wx.showModal({
title:"提示",
content:"上传失败",
showCancel:false
})
},
//隐藏Toast
complete:function(){
wx.hideToast();
}
})
}
}
})
下载文件
wx.downloadFile(Objeet)接口用于实现从开发者服务器下载文件资源到本地,在客户端
直接发起一个HITPGET请求,返回文件的本地临时路径。
代码:
Page({
datd:{
img:null
},
downloadimage:function(){
var that=this;
wx.downloadFile({
//通过WAMP软件实现
url: 'http://localhost/1.jpg',
success:function(res){
console.log(res)
that.setData({
img:res.tempFilePath
})
}
})
}
})
2 多媒体 API
多媒体API主要包括图片API、录音API、音频播放控制AP1、音乐播放控制API等,其目的是丰富小程序的页面功能
1.选择图片或拍照
wx.chooselmage(Object)接口用于从本地相册选择图片或使用相机拍照。
代码:
Page({
wx.chooseImage({
//默认值为9
count:2,
//可以指定是原图还是压缩图,默认二者都有
sizeType:['original','compressed'],
//可以指定来源是相册还是相机,默认二者都有
sourceType:['album','camera'],
success:function(res){
//返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的sec属性来显示图片
var tempFilePaths=res.tempFilePaths
var tempFiles=res.tempFiles
console.log(tempFilePaths)
console.log(tempFiles)
}
})
})
2.预览图片
wx.previewlmage(0bject)接口主要用于预览图片
代码:
page({
wx.previewImage({
current:"http://bomob-cdn-16488.b0.upaiyun.com/2018/02/05/2.png",
urls: ["http://bomob-cdn-16488.b0.upaiyun.com/2018/02/05/1.png",
"http://bomob-cdn-16488.b0.upaiyun.com/2018/02/05/2.png",
"http://bomob-cdn-16488.b0.upaiyun.com/2018/02/05/3.png"
],
})
})
.获取图片信息
wx.getlmagelnfo(Object)接口用于获取图片信息
代码:
wx.chooseImage({
success:function(res){
wx.getImageInfo({
src: res.tempFilePaths[0],
success:function(e){
console.log(e.width)
console.log(e.height)
}
})
},
})
6.4本地数据及缓存API
6.4.1保存数据
1.wx.setStorage(Object)
示例代码:
wx.setStorage({
key:'name',
data:'sdy',
success:function(res){
console.log(res)
}
})
2.wx.setStorageSync(key,data)
示例代码:
wx.setStorageSync('age', '25')
6.4.2获取数据
1.wx.setStorage(Object)
示例代码:
wx.getStorage({
key:'name',
success:function(res){
console.log(res.data)
},
})
2.wx.setStorageSync(key)
示例代码:
try{
var value =wx.getStorageSync('age')
if(value){
console.log("获取成功"+value)
}
}catch(e){
console.log("获取失败")
}
位置信息API
小程序可以通过位置信息API来获取或显示本地位置信息,小程序支持WGS84和GCj02标准,WGS84标准为地球坐标系,是国际上通用的坐标系;GCj02标准是中国国家测绘局制定的地理信息系统的坐标系统,是由WGS84坐标系经加密后的坐标系,又称为火星坐标系。默认为WGS84标准,若要查看位置需要使用GCj02标准。
三个标准:
■ wx.getLocation(Object)接口用于获取位置信息。
■ wx.chooseLocation(Object)接口 用于选择位置信息。
■ wx.openLocation(Object)接口用于通过地图显示位置。
获取位置信息
wx. getLocation(Object)接口用于获取当前用户的地理位置、速度,需要用户开启定位功能,当用户离开小程序后,无法获取当前的地理位置及速度,当用户点击“显示在聊天顶部”时,可以获取到定位信息
wx. getLocation(Object)调试成功后,返回的参数
代码:
wx.getLocation({
type:'wgs84',
success:function(res){
console.log("经度:"+res.longitude); console.log("纬度:"+res.latitude); console.log("速度:"+res.longitude);
console.log("位置的精确度:"+res.accuracy);
console.log("水平精确度:"+res.horizontalAccuracy); console.log("垂直精确度:"+res.verticalAccuracy);},
})
选择位置信息
wx. chooseLocation(Object)接口用于在打开的地图中选择位置,用户选择位置后可返回当前位置的名称、地址、经纬度信息。
wx. chooseLocation(Object)调用成功后,返回的参数
代码:
wx.getLocation({
type:'gcj02',//返回可以用于wx.openLocation的经纬度
success:function(res){
var latitude = res.latitude
var longitude= res.longitude
wx.openLocation({
latitude: latitude,
longitude:longitude,
scale:10,
name:'智慧国际酒店',
address:'西安市长安区西长安区300号'})
}
})
设备相关API:
设备相关的接口用于获取设备相关信息,主要包括系统信息、网络状态、拨打电话及扫码等。
五个:api
■ wx.getSystemInfo(Object)接口、wx.getSystemInfoSync()接口 用于获取系统信息。
■ wx.getNetworkType(Object)接口 用于获取网络类型。
■ wx.onNetworkStatusChange(CallBack)接口 用于监测网络状态改变。
■ wx.makePhoneCall(Object)接口 用于拨打电话。
■ wx.scanCode(Object)接口 用于扫描二维码
获取系统信息
wx. getSystemInfo(Object)接口、wx. getSystemInfoSync()接口分别用于异步和同步获取系统信息。
wx. getSystemInfo()接口或wx.getSystemInfoSync()接口调用成功后
wx. getSystemInfo()接口或wx.getSystemInfoSync()成功返回相关信息
代码:
wx.getSystemInfo({
success:function(res){
console.log("手机型号:"+res.model)
console.log("设备像素比:"+res.pixelRatio)
console.log("窗口的宽度:"+ res.windowWidth)
console.log("窗口的高度:"+res.windowHeight)
console.log("微信的版本号:"+res.version)
console.log("操作系统版本:"+ res.system)
console.log("客户端平台:"+res.platform)},})
网络状态
获取网络状态
wx. getNetworkType(Object)用于获取网络类型
wx.getNetworkType({
success:function(res){
console.log(res.networkType)},})
监听网络状态变化
wx. onNetworkStatusChange(CallBack)接口用于监听网络状态变化,当网络状态变化时,返回当前网络状态类型及是否有网络连接。
代码:
wx.onNetworkStatusChange(function(res){
console.log("网络是否连接:"+res.isConnected)
console.log("变化后的网络类型"+res.networkType)})
拨打电话
wx. makePhoneCall(Object)接口用于实现调用手机拨打电话
代码:
wx.makePhoneCall({
phoneNumber:'18092585093'//需要拨打的电话号码
})
扫描二维码
wx. scanCode(Object)接口用于调起客户端扫码界面,扫码成功后返回相应的内容
代码:
//允许从相机和相册扫码
wx.scanCode({
success:(res) =>{
console.log(res.result)
console.log(res.scanType)
console.log(res.charSet)
console.log(res.path)
}
})
//只允许从相机扫码
wx.scanCode({
onlyFromCamera:true,
success:(res) =>{
console.log(res)
}
})