uni-app
是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。
1、开发工具使用HBuilder 可以进行快捷打包运行
2、项目结构
common 是存放公共js和css的目录,大家可以把一些工具js或者公共的css放这里面
components是放组件的目录,我们所有的组件都可以放这里面,记住组件里面不能使用uni-app页面钩子函数
pages 是uni-app放页面的文件夹,我们每次在这里面新建一个页面,hbuilder X都会在pages.json里面配置好。
static 是存放字体或图片的文件夹,一些静态资源都可以放这里面 如果image标签想要引入本地文件,只能放到static里才能访问到
store 是vuex状态管理,因为uni-app项目内置vuex所以直接在main.js里面配置一下就可以使用了
subpages 是因为内容过多,分的包,这里面新建的页面pages.json里面不会自动生成对应配置项
unpackage 里面的打包后的东西,我们可以不用管,h5打包后会放在这个里面的dist/build/h5里面,
App.vue 可以说是入口文件,我们公共的css可以放这里面,应用启动需要做的事情也可以放这里面,但是这个里面是不能进行页面跳转的
main.js 是入口js文件,跟vue脚手架一样的,我们可以引入全局js,配置一些全局js函数等都可以在这里操作
manifest.json是uni-app的配置项,一般都是可视化配置,很少用到源码配置,大家基本看一看就知道了
pages.json 就是页面配置文件了,你写的每一个页面都要在这里面配置,每个页面一些的特殊配置项也是在这里面写
3、页面元素及API
页面dom元素和小程序类似,使用view而不是div,使用的一些组件也是基本和微信小程序类似,API靠近微信小程序规范,但需将前缀 wx
替换为 uni
4、生命周期
uni-app页面的生命周期和小程序生命周期基本一致,包括onLaunch、onLoad、onShow、onHide...但是这些生命周期只能在页面中使用,在组件中我们只能使用vue.js的生命周期cerated、mounted 等
5、运行平台判断
以h5平台和app平台为例,在html和css中判断方法
<!-- #ifdef H5 -->
<!-- 在H5平台下要显示的内容 -->
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<!-- 在APP平台下要显示的内容 -->
<!-- #endif -->
在JS中的判断方法
// #ifdef H5
console.log("只在H5端执行的代码")
//#endif
// #ifdef APP-PLUS
console.log("只在APP端执行的代码")
//#endif
H5(H5端)、APP-PLUS(APP端)、MP-WEIXIN(微信小程序端)、MP-BAIDU(百度小程序)、MP-ALIPAY(支付宝小程序)、MP-TOUTIAO(今日头条小程序)、MP-QQ(QQ小程序)
6、支付功能
uni-app支持微信支付、支付宝支付功能,不同平台情况不同,在微信小程序总只支持微信支付,在今日头条小程序中只支持支付宝支付 APP和H5同时支持微信和支付宝支付,值得注意的是APP中实现在线支付功能,需要在manifest.json中先进行支付模配置并填写相应的appid
然后调用APP支付API
uni.requestPayment({
provider: type, // wxpay 或者是 alipay
orderInfo: orderInfo, //wxpay: orderInfo是object对象,alipay: orderInfo是字符串
success: (e) => {
},
fail: e => {
}
})
微信小程序、今日头条的小程序的支付最好调用自己的支付API
7、分享到微信功能
uni-app支持分享功能,目前主要做的是分享到微信,包括微信小程序分享、H5分享、APP分享
微信小程序分享只需要调用微信小程序分享api即可
H5分享比较麻烦,和普通的H5分享流程一致,需要调后端接口获取code,通过code获取openid,unionid,然后通过当前页链接获取签名信息,设置分享权限。
async weixinInit() {
console.log('wexinInit')
const {
signPackage
} = await getGrWechatJsUploadConfig({
url: window.location.href
});
const jsApiList = ['onMenuShareTimeline', 'onMenuShareAppMessage',
'updateAppMessageShareData', 'updateTimelineShareData', 'checkJsApi',
'hideOptionMenu','showOptionMenu'];
wx.config({
debug: false,
appId: signPackage.appId,
timestamp: signPackage.timestamp,
nonceStr: signPackage.nonceStr,
signature: signPackage.signature,
jsApiList: [...jsApiList]
});
wx.ready(() => {
if (getStorage()) wx.showOptionMenu();
else wx.hideOptionMenu();
//分享给好友
const updateAppMessageShareData = typeof(wx.updateAppMessageShareData) !=
"undefined" ? wx.updateAppMessageShareData : wx.onMenuShareAppMessage;
updateAppMessageShareData(this.getShareInfo('weixin'));
const updateTimelineShareData = typeof(wx.updateTimelineShareData) != "undefined"
?wx.updateTimelineShareData : wx.onMenuShareTimeline
updateTimelineShareData(this.getShareInfo('weixin'))
});
// 微信预加载失败回调
wx.error(wx.hideOptionMenu);
},
getShareInfo(ufrom) {
return {
title: '瓜分千万现金红包',
desc: '瓜分千万现金红包',
summary: "瓜分千万现金红包",
link: `${domain}/pages/inviteCoupon/index?activityid=${this.id}&invite_uid=${getStorage('uid')}&from=singlemessage&ufrom=${ufrom}`,
href: `${domain}/pages/inviteCoupon/index?activityid=${this.id}&invite_uid=${getStorage('uid')}&from=singlemessage&ufrom=${ufrom}`,
// #ifdef APP-PLUS
imageUrl: `${imgSrc}/wx-logo.jpg`,
// #endif
//#ifdef H5
imgUrl: `${imgSrc}/wx-logo.png`,
//#endif
success: () => {
// #ifdef APP-PLUS
uni.showToast({
title: '分享成功'
});
// #endif
},
fail: (err) => {
// #ifdef APP-PLUS
uni.showToast({
title: '分享失败',
icon: 'cancel'
});
// #endif
},
complete: res => {
}
}
},
APP分享到微信,需要在manifest.json勾选微信分享配置,填写相应appid,universal links
然后通过调用uni-app的api实现分享功能
this.initShareAll('WXSceneSession', 'wx'); //分享给微信好友
//this.initShareAll('WXSenceTimeline', 'pyq') //分享到朋友圈
shareHandle(scene, ufrom) {
uni.share({
provider: "weixin",
scene,
type: 0,
...this.getShareInfo(ufrom) //同H5的shareInfo
});
},
注:APP分享设置的图片大小不能超过20kb
8、运行和调试
调试H5可以直接运行到H5
调试微信小程序,需要先打开微信开发者工具,选择运行到小程序模拟器->微信开发者工具,运行结束后会自动打开小程序
调试今日头条小程序,选择运行到小程序模拟器->今日头条开发者工具,需要自行导入文件 unpackage->dist->dev->mp-toutiao
APP调试,安卓可以连接手机后打开开发者模式运行到手机终端。IOS可以使用模拟器调试