框架

常见的开发小程序的前端框架有:wepy(腾讯开发),uniapp,mpvue(美团)

uniapp

是一个使用vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到 iOS、Android、H5以及各种小程序(微信、支付宝、百度、头条、QQ、钉钉)等多个平台

环境搭建

安装编辑器(VSCode/Hbuilderx)

安装微信开发者工具(百度搜索微信官方文档--小程序----开发(工具)--下载)

运行(网页运行,微信开发者工具运行,手机运行)

pages.json配置项

全局外观配置

pages.json中的globalStyle中进行全局外观配置

详细配置可以在uniapp官方文档--全局文件中进行查看

页面配置

pages.json中的pages中进行页面配置

"pages":[//数组中的第一项表示应用启动项,
    {"path":"pages/index/index"},
    {"path":"pages/message/message"}
]

如果想给单独页面设置单独的样式,则给需要的页面添加style配置:

详细配置可以在官方文档查看

"pages":[
    {
        "path":"pages/index/index"
    },
    {
        "path":"pages/message/message",
        "style":
    }
]

配置tabbar

如果应用是一个多tab应用,可以通过tabbar配置项指定tab栏的表现,以及tab切换时显示的对应项

注意:

  • 当设置position为top时,将不会显示icon(设置top时,tab显示在上方,将不会显示图标,只显示文字)

  • tabbar中的list是一个数组,只能配置最少两个、最多五个tab,tab按数组顺序排序

在pages.json中进行配置,与pages、globalStyle同级,具体配置在官方文档查看

"pages":[
    {
        "path":"pages/index/index"
    }
],
"tabBar":{
    
}

condition启动模式配置

仅开发期间生效,用于模拟直达页面的场景,如:小程序转发后,用户点击锁打开的页面

在pages.json中进行配置,与pages、globalStyle同级,具体配置在官方文档查看

"pages":[
    {
        "path":"pages/index/index"
    }
],
"condition":{
    "current":0,//代表启动时要展示第几个页面
    "list":[
        {
            "name":"详情页",
            "path":"pages/detail/detail",
            "query":"id=123"
        }
    ]
}

组件

uniapp中的组件就像html中的div、p、span等标签作用一样,用于搭建页面的基础结构

具体用法和详细组件可在官网查看

text文本组件

组件属性

属性类型默认值必填说明
selectablebooleanfalse文本是否可选
spacestring显示连续空格,可选参数:ensp、emsp、nbsp
decodebooleantrue是否解码
<text selectable="true"></text>

ensp、emsp、nbsp区别:

  • ensp:中文字符空格一半大小

  • emsp:中文字符空格大小

  • nbsp:根据字体设置的空格大小

view视图容器组件

类似于html中的div

属性名类型默认值说明
hover-classStringnone指定按下去的样式类。当 hover-class="none" 时,没有点击态效果
hover-stop-propagationBooleanfalse指定是否阻止本节点的祖先节点出现点击态,App、H5、支付宝小程序、百度小程序不支持(支付宝小程序、百度小程序文档中都有此属性,实测未支持)
hover-start-timeNumber50按住后多久出现点击态,单位毫秒
hover-stay-timeNumber400手指松开后点击态保留时间,单位毫秒
<view hover-class="box1">我是盒子</view>
<style>
    .box1{
        bnckgroundcolor:red;
    }
</style>

注意:

  • 子盒子和父盒子同时设置hover-class时,按子盒子,父盒子的样式也会生效(类似于冒泡),需要设置hover-stop-propagation

button

属性名类型默认值说明生效时机平台差异说明
sizeStringdefault按钮的大小
typeStringdefault按钮的样式类型
plainBooleanfalse按钮是否镂空,背景色透明
disabledBooleanfalse是否禁用
loadingBooleanfalse名称前是否带 loading 图标H5、App(App-nvue 平台,在 ios 上为雪花,Android上为圆圈)
form-typeString用于 <form> 组件,点击分别会触发 <form> 组件的 submit/reset 事件
open-typeString开放能力
hover-classStringbutton-hover指定按钮按下去的样式类。当 hover-class="none" 时,没有点击态效果App-nvue 平台暂不支持
hover-start-timeNumber20按住后多久出现点击态,单位毫秒
hover-stay-timeNumber70手指松开后点击态保留时间,单位毫秒
app-parameterString打开 APP 时,向 APP 传递的参数,open-type=launchApp时有效微信小程序、QQ小程序
hover-stop-propagationbooleanfalse指定是否阻止本节点的祖先节点出现点击态微信小程序
langstring'en'指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文。微信小程序
session-fromstring会话来源,open-type="contact"时有效微信小程序
send-message-titlestring当前标题会话内消息卡片标题,open-type="contact"时有效微信小程序
send-message-pathstring当前分享路径会话内消息卡片点击跳转小程序路径,open-type="contact"时有效微信小程序
send-message-imgstring截图会话内消息卡片图片,open-type="contact"时有效微信小程序
show-message-cardbooleanfalse是否显示会话内消息卡片,设置此参数为 true,用户进入客服会话会在右下角显示"可能要发送的小程序"提示,用户点击后可以快速发送小程序消息,open-type="contact"时有效微信小程序
group-idString打开群资料卡时,传递的群号open-type="openGroupProfile"QQ小程序
guild-idString打开频道页面时,传递的频道号open-type="openGuildProfile"QQ小程序
public-idString打开公众号资料卡时,传递的号码open-type="openPublicProfile"QQ小程序
@getphonenumberHandler获取用户手机号回调open-type="getPhoneNumber"微信、支付宝、百度、字节、快手、京东小程序
@getuserinfoHandler用户点击该按钮时,会返回获取到的用户信息,从返回参数的detail中获取到的值同uni.getUserInfoopen-type="getUserInfo"微信、QQ、百度、快手、京东小程序
@errorHandler当使用开放能力时,发生错误的回调open-type="launchApp"微信、QQ、快手、京东小程序
@opensettingHandler在打开授权设置页并关闭后回调open-type="openSetting"微信、QQ、百度、快手、京东小程序
@launchappHandler从小程序打开 App 成功的回调open-type="launchApp"微信、QQ、快手、京东小程序
@chooseavatarHandler获取用户头像回调open-type="chooseAvatar"微信小程序
@addgroupappHandler添加群应用的回调open-type="addGroupApp"QQ小程序
@chooseaddressHandler调起用户编辑并选择收货地址的回调open-type="chooseAddress"百度小程序
@chooseinvoicetitleHandler用户选择发票抬头的回调open-type="chooseInvoiceTitle"百度小程序
@subscribeHandler订阅消息授权回调open-type="subscribe"百度小程序
@loginHandler登录回调open-type="login"百度小程序

image

属性名类型默认值说明平台差异说明
srcString图片资源地址
modeString'scaleToFill'图片裁剪、缩放的模式
lazy-loadBooleanfalse图片懒加载。只针对page与scroll-view下的image有效微信小程序、百度小程序、字节跳动小程序、飞书小程序
fade-showBooleantrue图片显示动画效果仅App-nvue 2.3.4+ Android有效
webpbooleanfalse在系统不支持webp的情况下是否单独启用webp。默认false,只支持网络资源。webp支持详见下面说明微信小程序2.9.0
show-menu-by-longpressbooleanfalse开启长按图片显示识别小程序码菜单微信小程序2.7.0
draggablebooleantrue是否能拖动图片H5 3.1.1+、App(iOS15+)
@errorHandleEvent当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong'}
@loadHandleEvent当图片载入完毕时,发布到 AppService 的事件名,事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}

Tips

  • <image> 组件默认宽度 320px、高度 240px(不同平台会有所不同);app-nvue平台,暂时默认为屏幕宽度、高度 240px;

组件的创建使用和组件的声明周期函数

<view>
    <test>这是自定义组件</test>
</view>
<script>
    import text from '组件地址'
    export default{
        components:{
            test
        }
    }
</script>

生命周期与vue相同

组件通讯方式

props、$emit

uni.$emit(eventName,OBJECT)

触发全局的自定义事件,附加参数都会传给监听器回调函数。

属性类型描述
eventNameString事件名
OBJECTObject触发事件携带的附加参数

代码示例

    uni.$emit('update',{msg:'页面更新'})

uni.$on(eventName,callback)

监听全局的自定义事件,事件由 uni.$emit 触发,回调函数会接收事件触发函数的传入参数。

属性类型描述
eventNameString事件名
callbackFunction事件的回调函数

代码示例

	uni.$on('update',function(data){
		console.log('监听到事件来自 update ,携带参数 msg 为:' + data.msg);
	})

样式

  • rpx即响应式px,一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为准,750rpx恰好为屏幕宽度。屏幕宽度变宽,rpx实际显示效果会等比放大

  • 使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用 ; 表示语句结 在<style></style>中引入:

    <style>
    	@import url('地址');
    </style>
  • 在uniapp中不能使用*选择器

  • page相当于body节点

  • uni-app支持使用字体图标,使用方式与普通web项目相同,需要注意以下几点:

    • 字体文件小于40kb.uni-app会自动将其转化为base64格式;

    • 字体文件大于等于40kb,需开发者自己转换,否则使用将不生效;

    • 字体文件的引用路径推荐使用以~@开头的绝对路径。

      @font-face{
          font-family:test1-icon;
          src:url('~@/static/iconfont.ttf');
      }

生命周期

应用生命周期

定义在app.vue文件中

函数名说明
onLaunch当uni-app初始化完成时触发(全局只触发一次)
onShow当uni-app启动,或从后台进入前台显示
onHide当uni-app从前台进入后台
onError当uni-app报错时触发(形参就是错误信息)

页面生命周期

在每个页面中使用

函数名说明
onLoad监听页面加载,其参数为上个页面传递的数据,参数类型为Object(options,用于页面传参)
onShow监听页面显示,页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面
onReady监听页面初次渲染完成
onHide监听页面隐藏
onUnload监听页面卸载
onPullDownRefresh监听用户下拉动作,一般用于下拉刷新
onReachBottom页面滚动到底部的事件,常用于下拉下一页数据

开启下拉刷新的方法:

1、在pages.json中,找到当前页面的pages节点,并在style选项中开启enablePullDownRefresh

当处理完数据后,`uni.stopPullDownRefresh()`可以停止当前页面的下拉刷新

2、uni.startPullDownRefresh()方法

发送请求

uni.request({
    url:'接口地址'
})

参数说明

参数名类型必填默认值说明平台差异说明
urlString开发者服务器接口地址
dataObject/String/ArrayBuffer请求的参数App 3.3.7 以下不支持 ArrayBuffer 类型
headerObject设置请求的 header,header 中不能设置 Referer。App、H5端会自动带上cookie,且H5端不可手动修改
methodStringGET有效值详见下方说明
timeoutNumber60000超时时间,单位 msH5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)、微信小程序(2.10.0)、支付宝小程序
dataTypeStringjson如果设为 json,会尝试对返回的数据做一次 JSON.parse
responseTypeStringtext设置响应的数据类型。合法值:text、arraybuffer支付宝小程序不支持
sslVerifyBooleantrue验证 ssl 证书仅App安卓端支持(HBuilderX 2.3.3+),不支持离线打包
withCredentialsBooleanfalse跨域请求时是否携带凭证(cookies)仅H5支持(HBuilderX 2.6.15+)
firstIpv4BooleanfalseDNS解析时优先使用ipv4仅 App-Android 支持 (HBuilderX 2.8.0+)
successFunction收到开发者服务器成功返回的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

数据缓存

异步接口

uni.setStorage()

将数据存储在本地缓存中指定的key中,会覆盖掉原来该key对应的内容,这是一个异步接口

参数名类型必填说明
keyString本地缓存中的指定的 key
dataAny需要存储的内容,只支持原生类型、及能够通过 JSON.stringify 序列化的对象
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)
uni.setStorage({
	key: 'storage_key',
	data: 'hello',
	success: function () {
		console.log('success');
	}
});

uni.getStorage()

从本地缓存中异步获取指定 key 对应的内容。

参数名类型必填说明
keyString本地缓存中的指定的 key
successFunction接口调用的回调函数,res = {data: key对应的内容}
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)
uni.getStorage({
	key: 'storage_key',
	success: function (res) {
		console.log(res.data);
	}
});

uni.removeStorage()

从本地缓存中异步移除指定 key。

参数名类型必填说明
keyString本地缓存中的指定的 key
successFunction接口调用的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)
uni.removeStorage({
	key: 'storage_key',
	success: function (res) {
		console.log('success');
	}
});

同步接口

uni.setStorageSync(KEY,DATA)

将 data 存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个同步接口。

参数类型必填说明
keyString本地缓存中的指定的 key
dataAny需要存储的内容,只支持原生类型、及能够通过 JSON.stringify 序列化的对象
try {
	uni.setStorageSync('storage_key', 'hello');
} catch (e) {
	// error
}

uni.getStorageSync(KEY)

从本地缓存中同步获取指定 key 对应的内容。

参数说明

参数类型必填说明
keyString本地缓存中的指定的 key

示例

try {
	const value = uni.getStorageSync('storage_key');
	if (value) {
		console.log(value);
	}
} catch (e) {
	// error
}

uni.removeStorageSync(KEY)

从本地缓存中同步移除指定 key。

参数说明

参数名类型必填说明
keyString本地缓存中的指定的 key

示例

try {
	uni.removeStorageSync('storage_key');
} catch (e) {
	// error
}

上传、预览图片

上传:uni.chooseImage()

从本地相册选择图片或使用相机拍照。

参数名类型必填说明平台差异说明
countNumber最多可以选择的图片张数,默认9见下方说明
sizeTypeArray<String>original 原图,compressed 压缩图,默认二者都有App、微信小程序、支付宝小程序、百度小程序
extensionArray<String>根据文件拓展名过滤,每一项都不能是空字符串。默认不过滤。H5(HBuilder X2.9.9+)
sourceTypeArray<String>album 从相册选图,camera 使用相机,默认二者都有。如需直接开相机或直接选相册,请只使用一个选项
cropObject图像裁剪参数,设置后 sizeType 失效App 3.1.19+
successFunction成功则返回图片的本地文件路径列表 tempFilePaths
failFunction接口调用失败的回调函数小程序、App
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

crop 参数说明

参数名类型必填说明平台差异说明
qualityNumber取值范围为1-100,数值越小,质量越低(仅对jpg格式有效)。默认值为80。
widthNumber裁剪的宽度,单位为px,用于计算裁剪宽高比。
heightNumber裁剪的高度,单位为px,用于计算裁剪宽高比。
resizeBoolean是否将width和height作为裁剪保存图片真实的像素值。默认值为true。注:设置为false时在裁剪编辑界面显示图片的像素值,设置为true时不显示

预览:uni.previewImage()

参数名类型必填说明平台差异说明
currentString/Number为当前显示图片的链接/索引值,不填或填写的值无效则为 urls 的第一张
urlsArray<String>需要预览的图片链接列表
indicatorString图片指示器样式,可取值:"default" - 底部圆点指示器; "number" - 顶部数字指示器; "none" - 不显示指示器。App
loopBoolean是否可循环预览,默认值为 falseApp
longPressActionsObject长按图片显示操作菜单,如不填默认为保存相册App 1.9.5+
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

条件编译

条件编译是用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台。

写法:以 #ifdef 或 #ifndef 加 %PLATFORM% 开头,以 #endif 结尾。

  • #ifdef:if defined 仅在某平台存在

  • #ifndef:if not defined 除了某平台均存在

  • %PLATFORM%:平台名称

条件编译写法说明
#ifdef APP-PLUS 需条件编译的代码 #endif仅出现在 App 平台下的代码
#ifndef H5 需条件编译的代码 #endif除了 H5 平台,其它平台均存在的代码
#ifdef H5 || MP-WEIXIN 需条件编译的代码 #endif在 H5 平台或微信小程序平台存在的代码(这里只有||,不可能出现&&,因为没有交集)

%PLATFORM% 可取值如下:

生效条件
VUE3HBuilderX 3.2.0+ 详情(opens new window)
APP-PLUSApp
APP-PLUS-NVUE或APP-NVUEApp nvue
H5H5
MP-WEIXIN微信小程序
MP-ALIPAY支付宝小程序
MP-BAIDU百度小程序
MP-TOUTIAO字节跳动小程序
MP-LARK飞书小程序
MP-QQQQ小程序
MP-KUAISHOU快手小程序
MP-JD京东小程序
MP-360360小程序
MP微信小程序/支付宝小程序/百度小程序/字节跳动小程序/飞书小程序/QQ小程序/360小程序
QUICKAPP-WEBVIEW快应用通用(包含联盟、华为)
QUICKAPP-WEBVIEW-UNION快应用联盟
QUICKAPP-WEBVIEW-HUAWEI快应用华为

例如:

  • 在html中使用

<!-- #ifdef H5 -->
<view>只在h5页面显示</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view>只在微信小程序显示</view>
<!-- #endif -->
  • 在js中使用

onload(){
    //#ifdef MP-WEIXIN
	console.log('微信'),
    //#endif
    //#ifdef H5
    console.log('h5')
	//#endif
}
  • 在css中使用

/* #ifdef H5 */
view{
    color:red;
},
/* #endif */
/* #ifdef MP-WEIXIN */
view{
    color:bule;
}
/* #endif */

导航跳转和传递参数

声明式导航

<navigator url:"跳转的地址"></navigator>

该组件类似HTML中的<a>组件,但只能跳转本地页面。目标页面必须在pages.json中注册。

属性名类型默认值说明平台差异说明
urlString应用内的跳转链接,值为相对路径或绝对路径,如:"../first/first","/pages/first/first",注意不能加 .vue 后缀
open-typeStringnavigate跳转方式
deltaNumber当 open-type 为 'navigateBack' 时有效,表示回退的层数
animation-typeStringpop-in/out当 open-type 为 navigate、navigateBack 时有效,窗口的显示/关闭动画效果,详见:窗口动画App
animation-durationNumber300当 open-type 为 navigate、navigateBack 时有效,窗口显示/关闭动画的持续时间。App
hover-classStringnavigator-hover指定点击时的样式类,当hover-class="none"时,没有点击态效果
hover-stop-propagationBooleanfalse指定是否阻止本节点的祖先节点出现点击态微信小程序
hover-start-timeNumber50按住后多久出现点击态,单位毫秒
hover-stay-timeNumber600手指松开后点击态保留时间,单位毫秒
targetStringself在哪个小程序目标上发生跳转,默认当前小程序,值域self/miniProgram微信2.0.7+、百度2.5.2+、QQ

open-type 有效值

说明平台差异说明
navigate对应 uni.navigateTo 的功能
redirect对应 uni.redirectTo 的功能
switchTab对应 uni.switchTab 的功能
reLaunch对应 uni.reLaunch 的功能字节跳动小程序与飞书小程序不支持
navigateBack对应 uni.navigateBack 的功能
exit退出小程序,target="miniProgram"时生效微信2.1.0+、百度2.5.2+、QQ1.4.7+

编程式导航

uni.navigateTo(OBJECT)

保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。

参数类型必填默认值说明平台差异说明
urlString需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2',path为下一个页面的路径,下一个页面的onLoad函数可得到传递的参数
animationTypeStringpop-in窗口显示的动画效果,详见:窗口动画App
animationDurationNumber300窗口动画持续时间,单位为 msApp
eventsObject页面间通信接口,用于监听被打开页面发送到当前页面的数据。2.8.9+ 开始支持。
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)
//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
	url: 'test?id=1&name=uniapp'
});

uni.redirectTo(OBJECT)

关闭当前页面,跳转到应用内的某个页面。

参数类型必填说明
urlString需要跳转的应用内非 tabBar 的页面的路径,路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2'
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

示例

uni.redirectTo({
	url: 'test?id=1'
});

uni.reLaunch(OBJECT)

关闭所有页面,打开到应用内的某个页面。

注意: 如果调用了 uni.preloadPage(OBJECT) 不会关闭,仅触发生命周期 onHide

参数类型必填说明
urlString需要跳转的应用内页面路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2',如果跳转的页面路径是 tabBar 页面则不能带参数
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

示例

uni.reLaunch({
	url: 'test?id=1'
});

uni.switchTab(OBJECT)

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。

注意: 如果调用了 uni.preloadPage(OBJECT) 不会关闭,仅触发生命周期 onHide

OBJECT参数说明

参数类型必填说明
urlString需要跳转的 tabBar 页面的路径(需在 pages.json 的 tabBar 字段定义的页面),路径后不能带参数
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

示例

pages.json

{
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    },{
      "pagePath": "pages/other/other",
      "text": "其他"
    }]
  }
}

other.vue

uni.switchTab({
	url: '/pages/index/index'
});

uni.navigateBack(OBJECT)

关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。

OBJECT参数说明

参数类型必填默认值说明平台差异说明
deltaNumber1返回的页面数,如果 delta 大于现有页面数,则返回到首页。
animationTypeStringpop-out窗口关闭的动画效果,详见:窗口动画App
animationDurationNumber300窗口关闭动画的持续时间,单位为 msApp
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

示例

// 注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,而 redirectTo 方法则不会。见下方示例代码

// 此处是A页面
uni.navigateTo({
	url: 'B?id=1'
});

// 此处是B页面
uni.navigateTo({
	url: 'C?id=1'
});

// 在C页面内 navigateBack,将返回A页面
uni.navigateBack({
	delta: 2
});

注意:

  • 跳转到 tabBar 页面只能使用 switchTab 跳转

Logo

前往低代码交流专区

更多推荐