uni-app开发总结
uni-app 是⼀个使⽤  开发所有前端应⽤的框架，开发者编写⼀套代码，可发布到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、但是这些⽣命周期只能在页⾯中使⽤，在组件中我们只能使⽤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
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')
console.log('wexinInit')
const {
signPackage
} = await getGrWechatJsUploadConfig({
url: window.location.href
});
const jsApiList = ['onMenuShareTimeline', 'onMenuShareAppMessage',
'updateAppMessageShareData', 'updateTimelineShareData', 'checkJsApi',
'hideOptionMenu','showOptionMenu'];
debug: false,
appId: signPackage.appId,
timestamp: signPackage.timestamp,
nonceStr: Str,
signature: signPackage.signature,
jsApiList: [...jsApiList]
});
if (getStorage()) wx.showOptionMenu();
else wx.hideOptionMenu();
//分享给好友
const updateAppMessageShareData = typeof(wx.updateAppMessageShareData) !=
"undefined" ? wx.updateAppMessageShareData : wx.onMenuShareAppMessage;
ShareInfo('weixin'));
const updateTimelineShareData = typeof(wx.updateTimelineShareData) != "undefined"
wx.updateTimelineShareData : wx.onMenuShareTimeline
ShareInfo('weixin'))
});
// 预加载失败回调
<(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开发用什么框架
},
},
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,
...ShareInfo(ufrom) //同H5的shareInfo
});
},
注：APP分享设置的图⽚⼤⼩不能超过20kb
8、运⾏和调试
调试H5可以直接运⾏到H5
调试⼩程序，需要先打开开发者⼯具，选择运⾏到⼩程序模拟器->开发者⼯具，运⾏结束后会⾃动打开⼩程序
调试今⽇头条⼩程序，选择运⾏到⼩程序模拟器->今⽇头条开发者⼯具，需要⾃⾏导⼊⽂件 unpackage->dist->dev->mp-toutiao APP调试，安卓可以连接⼿机后打开开发者模式运⾏到⼿机终端。IOS可以使⽤模拟器调试

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。