uniapp（vue3）-小程序搭建与问题

1.建立版本管理仓库（开发，测试，上线3个分支）

2.hubilder快速搭建uni项目

基础目录结构：

3.封装基础方法与组件

a.store--vuex搭建

b.components--组件封装

c.filters--过滤器方法封装

d.subpkg--分包处理

e.common--公共方法封装（request，api，登录，支付，上传文件方法封装，data模拟数据）

分包：

（1）manifest.json文件启用分包：

 "optimization" : {
            "subPackages" : true //启用分包设置
   },

 （2）pages同目录建立subpkg

 （3）pages.json文件：pages同结构建立subPackages，配置如下：

 https:

this.$http(this.$api.searchApi, criteria).then(res => {
	console.log(res, '返回参数');
})

//是否显示加载框，是否需要传入token，页面上是否接收错误code(返回错误页面有处理)
import {toast,showConfirm,tansParams} from './functions.js'
export function https(opts, data) {
	if (data && data.isLoading) {
		uni.showLoading({
			mask: true,
			title: '请求中...'
		})
	}
	var that = this;
	let httpDefaultOpts = {
		url: opts.url,
		data: data,
		method: opts.method,
		header: opts.method == 'get' ? {
			'X-Requested-With': 'XMLHttpRequest',
			"Accept": "application/json",
			"Content-Type": "application/json; charset=UTF-8"
		} : {
			'Content-Type': "application/json"
		},
		dataType: 'json',
		timeout: 10000,
	}
	// 判断是否使用token
	let token = uni.getStorageSync('userInfo').token;
	if (token != undefined && token != null && token != '') {
		httpDefaultOpts.header.accessToken = token;
	}
	let promise = new Promise(function(resolve, reject) {
		uni.request(httpDefaultOpts).then(
			(res) => {
				uni.hideLoading()
				if (res.data.code == 10005) {
					that.$store.commit("userInfo/setInfo",'');
					// 拦截登录情况
					resolve(res.data);
					return
				}
				if (res.statusCode == 404) {
					toast('无法访问系统资源');
					return
				}
				if (res.statusCode == 401) {
					toast('认证失败，无法访问系统资源');
					return
				}
				if (res.statusCode == 400) {
					toast(res.data.error);
					return
				}
				if (res.statusCode == 500) {
					toast(res.data.error);
					return
				}
				
				resolve(res.data)
			}
		).catch(
			(response) => {
				uni.hideLoading()
				toast('接口连接异常或请求超时')
				reject(response)
			}
		)
	})
	return promise
}

api:

export const rootUrl="";  //管理服务器
export const rootUrlImg="";  //静态资源管理服务器
export const api = {
	// 登录
	login:{
		url: rootUrl + '/auth/wechatlogin.api',
		method: 'POST',
        checkToken:true
	}
}

ios底部安全距离设置：

padding-bottom: calc(0rpx + constant(safe-area-inset-bottom));
padding-bottom: calc(0rpx + env(safe-area-inset-bottom));

scroll-view下拉刷新失败原因：

        动态赋予scroll-view高度的时候，scroll-view的下拉刷新功能可能会只能拉到一半就卡住，并且无法下拉：可以加入v-if，切换时重新渲染改变scroll-view

底部tabar加入角标：例如购物车：

uni.setTabBarBadge({
  index: 0,
  text: '1'
})

uni返回上一个页面调用时调用返回页面中的方法：

uni.navigateBack({
	delta: 1, //返回层数，2则上上页
})
const pages = getCurrentPages(); //获取页面栈
if(pages.length>1){
		const beforePage = pages[pages.length - 2]; //前一个页面
		console.log(beforePage.$vm)
		beforePage.$vm.ordeQuery1(); //前一个页面方法
}

手机号授权

<button open-type="getPhoneNumber" @getphonenumber.stop.prevent="getPhoneNumber">去登录</button>

微信支付：

uni.requestPayment({
		provider: 'wxpay',
		timeStamp: res.item.data.timeStamp,
		nonceStr: res.item.data.nonceStr,
		package: res.item.data.package,
		signType: res.item.data.signType,
		paySign: res.item.data.paySign,
		success: function(res) {
			
		},
		fail: function(err) {
			console.log('fail:' + JSON.stringify(err));
		}
})

图片上传：

		uni.chooseImage({
			sourceType: ['camera', 'album'],
			success: function (res) {
				uni.uploadFile({
					url: api.fileUpload.url,
					fileType: 'image',
					filePath: res.tempFilePaths[0],
					name: 'mf',
					header:{accessToken:userInfo.token,"Content-Type": "multipart/form-data","Accept": "application/json",},
					success: (res) => {
						resolve(res.data);
					},
					fail: (err) => {
						uni.showToast({
							title: '上传失败',
							icon: 'none'
						})
						console.log('上传失败', err)
					}
				})
		
			}
		});

隐藏小程序自带标题栏：

		{
			"path": "pages/shop/shop-my/index",
			"style": {
				"navigationBarTitleText": "个人中心",
				"enablePullDownRefresh": false,
				"onReachBottomDistance": 300,
				"navigationStyle": "custom",
				"app-plus": {
					"titleNView": false
				}
			}
		},

分享：

<button open-type="share">分享微信好友</button>

created同级：
async onShareAppMessage(res) {
	var _this = this
	return new Promise((reslove, reject) => {
		reslove({
			title: _this.aqualiveGoodsDetail.goodsname,
			path: '/subpkg/shop-home/goods-detail?id=' + _this.goodsno
		})
	})
}

父组件调子组件中得方法：

子组件：
<uni-drawer ref="showRight" mode="right" :mask-click="true">uni-drawer</uni-drawer>

父组件中：
setup(){
    const showRight = ref()
    return {
		showRight,
    };
},
method:{
    showDrawer() {
		this.showRight.open();
	},
}